FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.2 Form Fields & Message Block

First off, we need to make sure we understand how fields and groups of fields work, so we can being to build a form. We also want to add in a message block to show any errors that could exist.

6.2 Form Fields & Message Block

Hi, guys. Welcome back to Getting Started with Semantic UI. And in this lesson, we're gonna continue on adding content into the contact page. So what is a form in the Semantic UI? Well, a form is no different to a form in your HTML page, the form is just a collection of elements. So you inputs, textareas, labels, selection dropdowns, checkboxes, and also message blocks as well. But what's interesting is the layout of the form. This is what the form is all about. How do we lay out those fields? How do we present the form, to the user? So, this is what the form is all about. Now we've already reviewed the documentation specifically for imports and also labels. But, however, we will also go into the documentation for the dropdowns. As you'll notice under modules you have dropdown. You also have Checkbox right here, that has its own documentation. And finally Message which is under Collections. And you can just click on Form to get examples of forms. So how do we put these together? How do we get the form to look a certain way? So if I scroll down, you can see we can have fields next to one another. You can have a whole host of different options. So, this is actually what a form is. A form is to do with the layout of the elements. It is not the elements itself. So firstly, we're going to create a very simple form, that's going to involve inputs and labels and possibly message blocks as well, just to give you a nice introduction to the form. And then of course, we can start to focus on the dropdown selections, where you can also put attached area in there that's simple enough and also take a look at the checkboxes as well. And this will allow us to get a good understanding of the forms, and how to quickly put a form together in the Semantic UI. And with the simple form, we're going to take a look at the states. So you have loading. You have error. And you have warning. And so on and so forth. Then also you have variations, so how do I stack certain fields next to one another. You can have inverted, you can have an inline label, and so on and so forth. So we're just gonna be building something very, very basic. And we want to discover the options available to us with the layout of the form. So firstly, if you want a form, you need to have the parent element that wraps around all the form fields and it needs to have the classes of UI and form. Optionally, it can be styled as a segment as well, and these classes can be applied to a div. But however, I would rather not. So you could have a development inside of here with the classes of UI and also form as well, which is fine. But however, in a real world example you wouldn't want to use a div. What you would actually want to use is the form tag and it works just as well. So you might as well use the form tag and also that allows you to then post to a certain script on the server side and then of course that can process it and send the email off and so on and so forth. So I'd much rather you use the form tags and then of course put the classes of UI and form onto there. And now, inside of that form we can have form fields. So let's create a div for the class of field. So this is a single field on its own. Then we're going to have a label, and we'll just say name for the label. And then I would like an input, which is just gonna be a standard text input. So save that, hit refresh, and there is our input and you can see that it is pretty much fluid. Now if your forms are not fluid then what you can do is add the class of fluid onto your form, and then it'll make sure that it is fluid. But I found that the form, pretty much, is fluid anyway. So you can see there, this is looking real nice. The next thing we can do is make the label inline with the input. So with the parent that wraps around the label and the input, I can say inline and that will make it an inline field and if I hit refresh, it let's us then now inline. But unfortunately, that whole fluid just goes straight out the window when you say inline unfortunately. So now that we have this, we can take a look at the size. So you can have a small form. Just like so, so it's a little bit smaller. Or you could have it large. So if I save that, you'll see that it gets a little bit larger. Now you also have the states of the form. So we could say loading. So I can save that, go back and hit refresh. Now the form really isn't big enough, it needs to have more of a height. But you can see there that we have sort of a dimmer going over the top which is white so it fades out the form fields. And then also, you have the nice loading icon. You can review the documentation for the loader underneath elements, and you go to loader. The loader can be applied to a segment, but what it needs to be is actually a dimmer. So you create a dimmer. That is active, by default, meaning it's visible by default and then you have inside of there the div with the classes of UI and load and that will put that nice circular loader in there. And as long as that dimmer is active within the parent segment it will overlay and create that nice loader. You can also have a white loader which is what we have with the form, and you can have inline and all sorts of variations. So you can have smaller or larger loaders. So the next thing that we want to take a look at is a few more of those states that we have with the form. So if I click on states, you can see here that we have the loading state, which we've already discovered. And then, we have the error state. So, the error state and also the warning state works with the message block. And again, we have underneath collections the documentation for message, which is this specific message box. So this is all that this class actually does. So for example, if we have the parent, which is the form itself with a class of error, and a message block with the class of error, and those two classes much be matching. Then the error message will display. If you have a warning, again, the parent, the form must have the class of warning and the message block must have the class of warning. And it will show that warning inside of there. So now, to involve the states of the form, we need to create a message. So let's move on over and take a look at the message documentation. So firstly, we have a message box with just text inside of it and you can have a header for some larger text. We also have the list message which allows you to list out whatever information you'd like. This is good for the form errors to list out which fields have errors. Then also you have icon message which that you can actually put an icon in the message box. You also have dismissible, which involves a little bit of JavaScript, so that when you click on that little x in the top right hand corner, you can dismiss this message block. Then also you have the states. So we have, hidden. So it will hide it. But however, you don't need to add this in for your form, because by default, if you add a message box into the form, it is hidden automatically. But however, it must have the class of either error or warning. Then you have visible to make it show up, and then we have the variations, which is floating. So, floating means that we can just have a nice little shadow in here to pop it off the page. A lot like raised in the segment. If you take a look at the code you can see there it says floating, then also you have compact which changes it from a block level element to an inline block. And that means that is not taking up any more space than it needs to. It also means that if you want to center align it, you're gonna have to work with the text alignment, not the margins. Then also you have Attached. So you can have message boxes attach themselves onto all the sections of the page. They don't have to necessarily be a form, it could be a segment, you can have it attach at the top or the bottom. Then you have the different colors, red, blue, green, and yellow. And you'll notice that warning matches the yellow color. Then also you have info, which is blue. Success, which is green. And error, which is red. And then you have all the various sizes for your message box. So now let's take a look at adding that into our contact page. I'm gonna get rid of the loading state on the form. And then inside of the form, we are going to create a div with the class of UI. And then also we need a few more. I want this to be an icon message box. And we're just going to stick with that for now. And then we want to put in an icon, first of all. So let's add the class of icon, so that's what it is, and then also what icon do we want, so I can say the attention icon. Then we need the content, so I'm gonna create a div for the class of content, and then inside of there we can have a header. So I'm gonna say div, and then it's gonna have the class of header and then the content with that div is going to be the larger text so I could say error. Then, I'd like a list instead of just having a paragraph with loads of lorem ipsum, let's put in a nice list. So I'm gonna put in an unordered list and it needs to have the class of list. Then inside there, I will just have two list items, just as an example. So now, I can save this and head on over and hit refresh. So you'll notice that a message block is visible if it doesn't have the class of error or warning. But however, info will also hid it as well. So, if we take a look at this message and we say info and save it and hit refresh, it will hid it. But even if you put info on the form, which then you'd be thinking that, okay, it will show up now. It won't. So that one, you'd have to actually manually bring it. But the states of the form still do apply. So we have error, so let's go ahead and put the error class onto both of the message box and the form. And then I can save that. Hit refresh. And the error will show up. But however if the error class is not on the form, the error message box will not show. So it's nice to have this here just hidden by default so then we can check and validate and if it comes back with an error then we can easily add that class onto the form itself. Then also, you have warning, which is the yellow color scheme, but you don't want to put the class of yellow in here, you want to put the class of warning and again the same thing applies like so. And there we go. [BLANK_AUDIO] And with success it shows no matter what. So if I have success on here and also success on here. And we save it and hit refresh it is going to show up and even if I take these success class off the form it will still show up. So be careful of that one. They don't all necessarily play well with the message box. So you have just, mainly have error and warning, that's it. So, I have my info box in here. We're going to leave it as error so that it hides it by default, and then also I'm going to take a look at stripping out the list altogether. Because I don't want that visible yet. And of course, then it will be ready for any errors and I can tell JavaScript to create an unordered list and put it into the error message box and show the error message box by adding a class of error onto the form. So lets take a look now at collapsing that and then we can review the form documentation so we have the states on the overall form. But then also you can have states for the form field. So we have error and disabled. So let's first of all on this field, within my form, add the class of error. Save it, go back, hit refresh. And that will clearly indicate to the user there is an error in that field. Also, we can have disabled. And then we can save that and hit refresh. But however, do note that it doesn't actually disable the input. So there's actually two ways you can disable an input via the dom. And that is by either using the read only attribute and setting it to read only, or saying disabled and also setting the value to disabled. But there's also another way of doing it, that I'd like to show you, via CSS. You can see here that we have pointer events set to none. That means the user is unable to interact with whatever element you are targeting. So let's go ahead and target the element with the class of field and also with the class of disabled. So that will target that specific field and then it will take a look at the child elements. And I can just put in the asterisks if I wanted to, to say a wild card. So whatever element is inside of that div the pointer events will be set to none, I can save that, hit refresh. And now I'm unable to edit the input. And also, if I was to take away that class, that CSS selector will not apply. And of course I can go and edit it. So thank you for watching me in this lesson and please join me in the next lesson where we'll continue on adding content to the Contact page.

Back to the top