From the course: Building Great Forms with HTML and CSS

Fieldsets and legends

From the course: Building Great Forms with HTML and CSS

Start my 1-month free trial

Fieldsets and legends

“

- [Instructor] While not necessary in every form, fieldsets and legends are useful in larger forms and can help to organize the fields and guide users and aid in accessibility. The fieldset and the legend elements work together to tell screen readers that a group of form fields relate to each other and to provide a label for that particular group. They can also visually help to separate and organize content within a page and help to ensure that your page is more semantic. The fieldset element provides a container for related form controls and the legend element acts as a heading to identify the group. All of the related fields go inside the fieldset element and the legend element is used to represent the overarching label for that particular group. These are especially useful when you're working with radio buttons and checkboxes as they provide a method for grouping these elements together. You should use the fieldset and legend elements when you have a single multiple choice question as in you're using radio buttons or checkboxes or you have several questions relating to the same topic, like text boxes or any other type of field. When you wish to organize your form into related groups of content then you'll definitely want to use fieldset and legend. Let's look at how we can incorporate this into a project. I'll start off by showing you the page as it exists right now. As you can see, I have no styling on my page. And since I'm not using fieldsets or legends there's really not a clear indication of what these fields really are grouped with or what they actually mean. For instance, these radio buttons are not descriptive at all in regards to what I'm selecting. So let's go into our code and let's see how we can alter this. Here's the code that we're going to be working with. So I have a series of label and input fields for the first block, the information that I want to collect. And then I have some radio buttons in addition to those fields. We're going to surround this content inside of the fieldset and the legend elements so that we can organize it. So I'll start off by eliminating the label and input section. I'm going to create my fieldset and my legend. And my legend is going to ask or specify that this is your contact details. And then after the legend, I'm going to go ahead and put in the label and input fields. Now, to keep my page organized, I'm going to select the input and label fields and just indent them so they align with the legend. You can do this in brackets by selecting all of the code and hitting the tab key. I'll go ahead and I'll create a legend and fieldset down below as well. So I'm going to cut the radio button code. We'll create our fieldset. And inside the fieldset, I'm going to create a legend. This is going to be asking the user for their food preference. And then after the legend, I'll paste in the code. Once again, I'm going to select the lines that I wish to indent and go ahead and hit the tab key. If we save the code and return back to the browser, click refresh, you can see that now the content is a little bit more organized. So what the fieldset does is it surrounds this block with a box and then the legend is the text that appears in the upper left-hand section of the box. We can improve the look and the layout of this significantly by incorporating a little bit of CSS. I'm not going to go into the details of what the CSS is actually doing because we're going to talk about that later. So I'm just going to uncomment out my external CSS file. I'll save and we'll return to the browser. And when I click refresh, you can see that now the content is much more organized. We have a lot of white space. I've made the label fields a little bit bigger and changed the color. And the form actually looks so much better. I really like how the fieldset and the legend help to organize this content and draw attention to the various blocks that I want my user to fill out. Let's go back to our form. And we have one more snippet section where we're going to add some additional code. So once again, I'll create the fieldset and the legend. This is going to contain activities. And in regards to the code, I've provided a text file which has the code. So I'm just going to select the third snippet block of code and copy. We'll go back to our HTML file and we'll paste this in. And once again, let's just select this code and indent it a little bit so that we are a little bit more organized. We'll save the page and return to the browser, hit refresh, and now you can see that my page is blocked out very nicely so that the user will be clear in regards to what these checkboxes, radio buttons, or input fields pertain to. The grouping and labeling of thematically-related controls within a form is an important aspect of providing semantic information so users can understand and complete a form successfully.

Contents