1 00:00:00,380 --> 00:00:02,720 Labels help to organize forms a lot. 2 00:00:02,720 --> 00:00:04,410 But, we can do better. 3 00:00:04,410 --> 00:00:09,130 Sometimes, certain form controls belong together in a logical grouping. 4 00:00:09,130 --> 00:00:14,040 For example, if our sign up form included a physical mailing address, we 5 00:00:14,040 --> 00:00:18,880 would want to make sure all of that data was visually grouped together. 6 00:00:18,880 --> 00:00:20,932 In our case, we want to make two groups. 7 00:00:20,932 --> 00:00:25,510 One for basic information, and one for the information that will show 8 00:00:25,510 --> 00:00:30,850 up on a user's profile, after they've logged into our imaginary app. 9 00:00:30,850 --> 00:00:35,930 We can do that by wrapping our form controls in the field set element. 10 00:00:35,930 --> 00:00:37,638 So let's try that out. 11 00:00:37,638 --> 00:00:41,373 Just after the h1, I'm going to type 12 00:00:41,373 --> 00:00:47,102 a fieldset, element, and it will automatically close. 13 00:00:47,102 --> 00:00:51,059 But I don't want it to close right there. 14 00:00:51,059 --> 00:00:58,080 I actually want to wrap, all of these form elements in a fieldset. 15 00:00:58,080 --> 00:01:00,850 So I'm going to highlight all of those and indent them. 16 00:01:02,560 --> 00:01:04,753 And then I want to add a second fieldset. 17 00:01:04,753 --> 00:01:08,083 [BLANK_AUDIO] 18 00:01:08,083 --> 00:01:10,574 And I'll move the closing tag, 19 00:01:10,574 --> 00:01:12,824 [BLANK_AUDIO] 20 00:01:12,824 --> 00:01:16,003 Just after our text area. 21 00:01:16,003 --> 00:01:19,080 And I'll indent that as well. 22 00:01:19,080 --> 00:01:22,320 We'll leave the button outside of any kind of fieldsets. 23 00:01:22,320 --> 00:01:27,900 But all of our other form controls will be inside one of these two fieldsets. 24 00:01:27,900 --> 00:01:29,570 So, let's save that out. 25 00:01:29,570 --> 00:01:32,540 Switch back to the preview, and refresh. 26 00:01:33,640 --> 00:01:38,390 And as you can see there's now some slight spacing, and some padding 27 00:01:38,390 --> 00:01:40,700 and margin adjustments that have been made, 28 00:01:40,700 --> 00:01:43,938 based on our fieldsets that we added. 29 00:01:43,938 --> 00:01:46,790 These two fieldsets created logical groupings, but 30 00:01:46,790 --> 00:01:48,860 it would be nice to label them. 31 00:01:48,860 --> 00:01:52,100 We can do this using the legend element. 32 00:01:52,100 --> 00:01:52,840 So, let's try that out. 33 00:01:52,840 --> 00:01:56,190 I'm going to switch over to my work space here. 34 00:01:57,450 --> 00:02:01,340 And, just after my fieldset, but just before the 35 00:02:01,340 --> 00:02:06,850 first label element, I'm going to type the legend tag. 36 00:02:08,200 --> 00:02:14,230 And inside of that, I'm going to say Your basic info. 37 00:02:14,230 --> 00:02:17,030 Now, I also want to number each one of 38 00:02:17,030 --> 00:02:20,840 these sections as if they were steps in a process. 39 00:02:20,840 --> 00:02:26,820 So, I'm going to add a span element, just like that. 40 00:02:26,820 --> 00:02:28,640 And I'm going to give it the class, 41 00:02:30,910 --> 00:02:36,140 number, because inside of our CSS, there is a number class 42 00:02:36,140 --> 00:02:40,820 that will style whatever is inside of this span very nicely. 43 00:02:40,820 --> 00:02:42,730 So I'm going to say this is step 1. 44 00:02:42,730 --> 00:02:46,500 And then I'll have a space just after my span. 45 00:02:46,500 --> 00:02:49,600 And then I'll say, Your basic info. 46 00:02:49,600 --> 00:02:53,900 And all of that, should go inside of this legend. 47 00:02:53,900 --> 00:02:57,240 So, let's copy this line, and let's add it 48 00:02:57,240 --> 00:03:01,000 to our other field set, and then adjust what's inside. 49 00:03:01,000 --> 00:03:02,295 So, this will be step 2. 50 00:03:03,770 --> 00:03:07,083 And we'll say, Your profile. 51 00:03:07,083 --> 00:03:12,004 [SOUND] So, let's save that out. 52 00:03:12,004 --> 00:03:16,675 Switch back to the browser, and refresh the page. 53 00:03:16,675 --> 00:03:19,633 And as you can see, we now have these nice 54 00:03:19,633 --> 00:03:23,830 legends that are labeling each one of our field sets. 55 00:03:23,830 --> 00:03:27,860 So we have, Your basic info, and then, Your profile. 56 00:03:27,860 --> 00:03:29,520 So, that's great. 57 00:03:29,520 --> 00:03:34,450 Our form looks a lot more organized now and we're ready to add more controls. 58 00:03:34,450 --> 00:03:39,310 When we add form controls from now on, we'll make sure to label them as we go.