Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Organization is just as important in a form, as it is to the rest of your site, maybe even more so. Especially in longer forms you may have several areas of content that would be better organized if there were some way to divide them into separate sections. Well, the Fieldset and Legend Tags allow us to do just that. The Field to element is used to create the separate regions in your form, while the Legend Tag is used to identify them. Both assist with the accessibility and the organization of your form elements. For our form, we're going to have two Fieldset regions, one for Personal Info, and another for Areas of study.
Before you begin placing individual form elements on the page, we'll go ahead and create our Fieldsets first. Now again, I am going to do this in a request.html file and this one is opened from the 10_05/admissions directory and I am just going to click inside the form tag that we created in our last movie. So you just want to make sure your cursor is blinking inside that, you can see inside this sort of red dash line there. And I am going to my Forms Objects and the Fieldset is this little guy right here, it kind of looks like a Folder icon or a Tab up there.
But essentially it's a graphical representation of the Legend sitting inside the Fieldset. So there is our Fieldset, as soon as I click that, it's going to place a Fieldset element on the page, but it's going to prompt me for a Legend. So do I want this Fieldset also have a Legend, which will be displayed textually? And yes I do. So for the first one I am going to type in Personal information click OK and I can see the text Personal information shows up on the page. Now I'm going to go down to the Tag Selector, click the Fieldset tag and hit my right arrow key. I want to make sure that I am outside of that Fieldset when I enter another one in.
I am going to go up and enter my second Fieldset and for this one the Legend is going to be the Areas of study, I'll click OK again. And you can see the second Fieldset has been added to our form. Now if you're wondering how these look, if I Save my file and go into Live View, you can see they don't look all that great. Mostly the default rendering for Fieldsets is sort of have either a gray background or gray outline around it, and most Legends are displayed just like this. Sort of half in and half out of the Fieldset, I have no idea why that became the default formatting for Fieldets and Legends, but it is.
Thankfully, we can do little bit about that with CSS. So I am going to turn Live View off, and if I look in Code View to see what we did to structure of our form, you can see that you have your Fieldset element and the Legend element just sits right inside the Fieldset. And of course, for each grouping within our form, the form elements will go inside that individual groupings. So of all the form elements that are pertained to Personal information will go inside Fieldset. Okay, so, so far our form only consists of two Fieldsets and two Legend Tags and neither of them are styled that nicely, so we're going to have to fix them with styling a little bit later on.
But before we begin styling form elements, we need to start building the rest of our form, and we will start that in our next movie.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.