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. The fieldset and legend tags allow us to do just that. The fieldset tag is used to create the separate regions in your form, while the legend tag is used to identify them. Both assist with accessibility and the organization of your form elements. For our form, we will have three fieldset regions: the personal info, login info, and tour profile regions.
Before we begin placing individual form elements on the page, we will create our fieldsets first. So here I have the join.htm file open. Picking up where we left off, we have our empty form tag on the page. So I am just going to place my cursor inside that form tag. You want to see it blinking inside that red dotted box. We are going to go up to our Insert panel and we are going to insert a fieldset. Now fieldsets can be found right here towards the two-thirds on the right-hand side. It looks like a little box with another littler box in the upper left-hand corner, which is an incredibly appropriate icon for fieldsets as you're about to see.
So, I am going to go ahead and click to insert my first fieldset and the only option I get when I insert a fieldset is well, what do you want inside this legend? So here, I'm going to type in Personal Information and you can type anything you want into those. They can be as long as you want. They just need to describe that area itself. And again, most people keep these short, maybe one or two words. I am going to go ahead and click OK and there is our first fieldset. Now, when Dreamweaver sort of renders these as a default with nothing inside of them, it can be really confusing as to where you are and where you've inserted these.
So, in order to make sure that we don't put one fieldset inside of another one, that it would be bad, we need to do a little precise cursor movement using Dreamweaver. Here is what I'd like you to do. Go down to your Tag Selector. Find the fieldset tag. It should be just to the left of the legend tag, which should be highlighted. You want to click the fieldset tag so that you're focused on the fieldset and now hit on your keyboard your Right Arrow key. Now what does that do for us? It moves us outside of the fieldset tag to the right. I know it doesn't look like it inside the Design View. It looks like we're inside the fieldset and ready to type.
But in the reality, we're outside of it. You can see the Tag Selector for example, that it has this just listed as being inside of the form. That is really important that you do that, that way because clicking inside of the form right now will probably result in you going back into the fieldset. So you just sort of do that, don't touch anything else, and insert your next fieldset. So, we are going to go right up here, insert our next fieldset and this time the legend is going to be Login Information. You can see that we have one fieldset now on top of the other one and we've got a little bit of separation there, and we want to do exactly the same thing that we did last time for our third fieldset.
I am going to click on the fieldset tag, hit my Right Arrow key so that I am assured that I'm outside of the Login Information fieldset and add our last one. So one more, and here we are going to go ahead and give that the legend Tour Profile. There we go! Now it's never a bad idea to check in the Code View and make sure that these guys are where they're supposed to be. So I am going to highlight them, just to make it easier to find in the code and click on Split View. And right there we can see we've got exactly what we want. Each fieldset comes right after the other.
If you see them inside of each other, don't panic. You can cut and paste them, so they're stacked on top of each other like this or you could just delete them and start over again. Just remember to use the Tag Selector to help you with that. Honestly, there are some things that are just easier to do in code but at least we can still do that in Design View if we need to. All right. I am going to save this file and there is really not much to look at yet, but I'm going to go ahead and preview this in my browser anyway, because I want to show you the default styling for fieldsets and legends. The default styling for a fieldset is that part of the form will be surrounded by sort of a gray border.
The legend itself shows up in the top left-hand corner of the fieldset and just kind of hovers there in the middle of it. Now if that is something that you're comfortable with then that's fine. There are all sorts of styling that you can do with this. But I am going to go out on a limb here and tell you that's the hardest tag in all of CSS to style. We are going to be styling it on our own in just a little bit. But before we start styling all those elements, we need to start building the rest of the form and we're going to do that next.
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.