FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.3 Setting Up The Form

It’s time for us to start laying out our form as we see fit using Semantic UI. It’s easy to quickly lay out a form that would normally take a lot longer to achieve by programming it all by ourselves.

6.3 Setting Up The Form

Hi guys. Welcome back to Getting Started with Semantic UI. And in this lesson, we're going to continue on adding content into the contact page. So in the previous lesson, we set up a form inside of the Semantic UI. We had a look at the states of the form and form fields, then also the variations. And now I wanna take a look at the Groups. So with the Groups, we can have a nice grid system. So it's the same grid system we had a look at before, where we can specify how many columns we want in the grid and then we can fill it up with fields. So for this example, you have three fields and there are the three fields. Or you could have the 16 column grid by default, and you can specify how wide you want each field to be. And then, of course, you have grouped fields, which we'll get onto later. And also inline fields which allow you to put this into one line with multiple fields. So within our form that we have on our contact page, what I would like to do is group some fields together. So the first thing we need to do is create a div that's going to wrap around all of the fields. So what I'm gonna do is put in the class of fields. And it must be a plural, so make sure you put that S on the end there. And then you have your individual fields within there. So let's go ahead and take a look at pasting that in. So now we have this div that is wrapping around this field. And we don't want to specify this as inline right now. Let's get rid of that, and then I wanna take a look at copying this out again and pasting it. So we now have two fields, and this one will get rid of the label. And so we have another one, and then just for kicks, let's have another one in there as well, and get rid of the label. So now we have three fields grouped together in that div for the cast off fields. So if we save it, go back, hit Refresh, you'll notice we have all of these fields. So we really didn't have to do anything in order to get these to stack up one next to another. But however, again, what we can do is say all these fields must be inline. So if we save that and hit Refresh, you'll notice now they all go inline and are formatted correctly. We can also take a look at specifying how many fields I want on a row. So I could say I want three fields on a row divided up nice and evenly. So I can go back, hit Refresh, and you'll notice it's divided up into three. And this guy right here I can say well, I want this field to be inline, so the label is inline. And everything looks nice and neat. You can do that if you wanted to, or you could say I only want two, you know, it doesn't have to be exactly how many you have in your group. So I could say two and the third one goes down onto a new line. And you can see it divides it up nicely. Also let's get rid of that inline. And also that specification of how many fields we want on a row. And we can actually work with the 16 column grid system. So i can say I want these two fields to be seven wide. So seven columns wide, which equals 14, together. And then this last one only has the ability of going to two wide, before it goes down onto a new line. So this should all be on the same line. If I hit refresh, you'll notice this is only two wide, and this is seven wide, and this is seven wide. So you have that ability as well. So I'm just going to cut that and move it above so I can easily swap stuff around and play with it, and just hit Refresh, and there we go. And now I actually want to take a look at, you know, starting to develop up our form. So the first thing I'll do is strip out that label cuz I want a label in here to tell the user what to put in. I'd rather not use placeholders, and I wanna use those nice pointered labels. So with each one of these fields, we're going to add a div element inside of there with the class of ui label, and I want it pointing, so I'm gonna say pointing. And because they are both the field, we need to say they want to be pointing below to the field, and I'd like the color of them to be red. Then inside of there I'd like an icon and let's go ahead and add a class in here. I want to add in an icon, and it's going to be the asterisk icon to notify the user that this information is required and then on top of that, we are going to have the name. So we have first name, this one is going to be last name, cuz these both are seven wide. And the very first one is going to be Title. So if I save that and we hit Refresh, you'll notice we have Title, First Name, Last Name. So the next thing I want to do is, below there, is add in an email field. So this is going to be a field all on its own. It's gonna stretch all the way across. So I can simply, below this group, and we can collapse it so that we can read this a little bit better. And then below there, we can add in a div with a class of field. And inside of there we can have a label that's red, pointing down below, we have an asterisk and it says, email. And then we can have an input and then that can have the type of text. And we can save that, go back over, hit Refresh, and then it stretches all the way across, there's the email. And now I'd like to take a look at creating two columns with one column with a text area for the message. And the other column will be for a group of radio buttons. So let's go ahead and take a look at adding in another div with the class of fields. So again, we're grouping fields together because we want two fields side by side. Now again I could specify in here I could say two, but however the main text area needs to take up more space than the grouped radio buttons. So, in order for me to specify how wide I want each field to be, I'll have to specify on the fields themselves. So we need the div with the class of field. And then how wide do you want it to be? Well we'll make this one ten wide, and then inside of there we'd like to put in a label again, and it is required. And I'm gonna say this is a message. And then, we just want to put in a text area. And then, after we have a ten wide, we just need a six wide. So, I can just paste this in. We need to just change that to six. And this one is not required, so I'll give it the color of teal, so it's a little bit different. And it will just say, where did you hear about us? And also let's take out that asterisk icon, so it doesn't indicate this is a required field. And then I'm gonna delete out the text area. And what I want to put in is some grouped radio buttons. So if we review the documentation, you can see we have the grouped fields. Now with the grouped fields, it's actually, in semantic clusters, a checkbox or a group of checkboxes. So if we open up the menu and scroll down, underneath Modules you will find Checkbox. And you can have a standard checkbox on its own. You can format a checkbox to look like a slider or a toggle switch. Or you could have a group and make the checkboxes appear like radio buttons. And if you actually take a look at this, the inputs are the type of radio. But, you can see here they're wrapped around a div with the classes of ui radio checkbox. So it's classing it as a checkbox, but making it look like a radio button. So let's review this code. So first of all we have the form which we already have. Then we have the div for the classes of grouped inline fields. So we're grouping fields together and again that needs to be a plural right there because we have multiple fields. And we're also saying inline. So the reason why we're saying inline is because we have the label, and then the input. And it makes sense to have them inline. It just adds that nice formatting on there. And then inside of the group fields, you have the field itself. So we have a div with a class of field. Inside of there, we have another div with the classes of ui radio checkbox, again making it look like a radio button. And then we have the input with the type of radio, the name of fruit in this case, but it needs to be the same as all of the other radio buttons. That's very, very important because they need to be grouped together, so the name needs to be the same as all the others. And then of course we have checked. So you can check a radio button or, in fact, a checkbox automatically by default. And then of course we have the label below there, telling the user what this input value is all about. So now that we have this, I wanna take a look at putting it into my contact page. So firstly, we need a div to wrap around all of our fields. So, I'm gonna say div with a class of grouped and what are we grouping? We are grouping the fields, which again, it needs to be a plural and then I also want to say inline. That way the labels go next to the radio button. So after that, we need the individual fields. So, I'm just going to create a div for the class of field and then inside of there, we need to have our radio button. So, Semantic is going to be styling the radio input, so we first need to have a div for the class of ui, and technically, it's a checkbox, but it's formatted to be a radio-looking button. So we say ui checkbox radio. Then, inside of there, we have the input. So the input is going to be of the type, radio. And then we need a name, so that they all can link together, very important. I'll just say, advert, something like that. And then, I also will set this one to be checked, but it won't do it right now. Then, below there we're going to have our label, and in here we can say something like Envato. And then, I can copy this so, I'm going to copy that field out, and repeat it, three other times. So we have Envato, we can say YouTube, Google, and also we can have tutsplus. So after that, we can set the first one to be checked, so that way it's checked by default, and then the user can change it at a later date. So if I save the file and preview it in the browser, you'll notice that we do have the radio button styles, but however when I click on it, it doesn't select that option. Now there isn't anything wrong with the DOM, we need to actually use a bit of JavaScript. So if you scroll up and take a look at Usage, you'll find that you need to target the element. And we'll target the element with the class of UI and also checkbox. And then we'll run the checkbox method. And that way we'll get everything up and running. So take a look at the script.js and then we want to target every single element with the class of ui and checkbox and run that method. And that way that ensures that if we have any other checkboxes on any other pages, as long as we have our script.js file loaded, it will make that Semantic provides the functionality for the checkbox. So, if we go back, and hit Refresh, you'll now be able to see that when we click on the radio button, you have the ability to select a specific option. Now also you don't have to have it formatted as a radio to group them all together. You can leave it formatted as a regular checkbox. So if we get rid of the class radio, it will be a grouping of checkboxes even though the inputs are radio buttons. So that shows you that Semantic UI is actually doing all of the styling here. Now let's go ahead and collapse this right here, and also we'll collapse that. And so now underneath there I'd like to put in another segment. So now I'm going to put in a div with the class of ui and also segment as well. And then inside of there I'd like to have a checkbox, so I'm just going to put in a div with the class of field, first of all. And then we need to put in a div, here, that's gonna deal with they styling of the checkbox. Which, as you know, needs the class of ui, and also checkbox, as well. Then after that, inside of the div, we need the input. So I'm going to say input and the type is going to be a regular checkbox type. And then I want to have a label, and the label will be agree to terms. And then we can refresh the page. >> There's the segment with the checkbox. Now I also want a Submit button below the checkbox. So let's go ahead and add in a div with the class of ui, it's going to be a button and it's going to be a submit button, it's going to be labeled. And it's going to have an icon, and also we want to make it red, and the size of it to be small. Then inside of there, we want the icon, so we're going to add the class of icon. And then want the type of icon, I'll just say the edit icon. And then we'll say submit. So if I save that, we hit Refresh, there's the button. But I'd like it over the right hand side, so let's add the id of submit and then we can save it. Take a look at the CSS and underneath the contact page comment, I can say submit and then I can tell it to float over to the right. So once I've done that I can then refresh the page. And you can see it goes over to the right hand side. So thank you for watching me in this lesson, and please join me in the next lesson, where we'll take a look at continuing on adding content to the contact page.

Back to the top