Fieldsets and Legends3:39 with Nick Pettit
Sometimes, certain form controls belong together in a logical grouping. Form controls can be grouped together using fieldsets and then labeled using a legend.
- <fieldset> - The fieldset element wraps multiple form elements into common groups. This can help organize a form and make it easier to understand for users.
- <legend> - The legend element is similar to the label element, but instead of labeling a form control, it labels a fieldset. Adding a legend to a fieldset can provide some helpful context for users that are filling out a form.
Labels help to organize forms a lot. 0:00 But, we can do better. 0:02 Sometimes, certain form controls belong together in a logical grouping. 0:04 For example, if our sign up form included a physical mailing address, we 0:09 would want to make sure all of that data was visually grouped together. 0:14 In our case, we want to make two groups. 0:18 One for basic information, and one for the information that will show 0:20 up on a user's profile, after they've logged into our imaginary app. 0:25 We can do that by wrapping our form controls in the field set element. 0:30 So let's try that out. 0:35 Just after the h1, I'm going to type 0:37 a fieldset, element, and it will automatically close. 0:41 But I don't want it to close right there. 0:47 I actually want to wrap, all of these form elements in a fieldset. 0:51 So I'm going to highlight all of those and indent them. 0:58 And then I want to add a second fieldset. 1:02 [BLANK_AUDIO] 1:04 And I'll move the closing tag, 1:08 [BLANK_AUDIO] 1:10 Just after our text area. 1:12 And I'll indent that as well. 1:16 We'll leave the button outside of any kind of fieldsets. 1:19 But all of our other form controls will be inside one of these two fieldsets. 1:22 So, let's save that out. 1:27 Switch back to the preview, and refresh. 1:29 And as you can see there's now some slight spacing, and some padding 1:33 and margin adjustments that have been made, 1:38 based on our fieldsets that we added. 1:40 These two fieldsets created logical groupings, but 1:43 it would be nice to label them. 1:46 We can do this using the legend element. 1:48 So, let's try that out. 1:52 I'm going to switch over to my work space here. 1:52 And, just after my fieldset, but just before the 1:57 first label element, I'm going to type the legend tag. 2:01 And inside of that, I'm going to say Your basic info. 2:08 Now, I also want to number each one of 2:14 these sections as if they were steps in a process. 2:17 So, I'm going to add a span element, just like that. 2:20 And I'm going to give it the class, 2:26 number, because inside of our CSS, there is a number class 2:30 that will style whatever is inside of this span very nicely. 2:36 So I'm going to say this is step 1. 2:40 And then I'll have a space just after my span. 2:42 And then I'll say, Your basic info. 2:46 And all of that, should go inside of this legend. 2:49 So, let's copy this line, and let's add it 2:53 to our other field set, and then adjust what's inside. 2:57 So, this will be step 2. 3:01 And we'll say, Your profile. 3:03 [SOUND] So, let's save that out. 3:07 Switch back to the browser, and refresh the page. 3:12 And as you can see, we now have these nice 3:16 legends that are labeling each one of our field sets. 3:19 So we have, Your basic info, and then, Your profile. 3:23 So, that's great. 3:27 Our form looks a lot more organized now and we're ready to add more controls. 3:29 When we add form controls from now on, we'll make sure to label them as we go. 3:34
You need to sign up for Treehouse in order to download course files.Sign up