The Label Element4:05 with Nick Pettit
Right now, it’s impossible for the user to tell what kind of information they should type into each form field. We can label form controls using the label element.
- <label> - The label element helps to organize forms by assigning some helpful text to a form control. This text helps the user to understand what kind of data they should add to each form field.
[MUSIC] 0:00 >> Our form has some nice CSS applied and 0:04 looks okay but it's still just a little bit messy. 0:07 Right now it's impossible for the user to tell which form control does what. 0:11 There's no way to know if the bio field is for 0:15 their email or if the email field is for their password. 0:18 We can label each one of our form controls using the label element. 0:22 Let's create some labels right now and learn how they work. 0:27 I'm going to create a label and then I'll explain it. 0:30 So if we hop into work space here our first 0:34 form field is for name, so lets add a label for that, I'm going to type label. 0:40 And as you can see, work spaces will automatically close that element for me. 0:48 And then I'm going to add an attribute called for and 0:52 we'll say it's equal to name and then 0:57 inside of our label I'm going to type name followed by a colon. 1:02 So let's save that out, switch over to our preview, and refresh. 1:09 And as you can see we now have a name label for this form field and, if I click 1:16 on it, we'll automatically get focus on this particular formed field. 1:22 One thing I should note here is that 1:29 I've added a colon, but that's not actually required. 1:31 You can format your label text however you'd like. 1:35 So, how does this work? 1:39 Well, you'll notice that I've added a for attribute to our label. 1:41 This attribute associates the label with a particular form element. 1:46 The way it matches is by ID. 1:52 So, if there's an element on the page with the same value in its ID 1:55 attribute, like we have right here, as the value that's in the for attribute. 2:01 As we have right here it will be matched. 2:08 So, what it is mean for an element to be matched to its label. 2:11 Well, when I click on the label, like I showed you previously we'll 2:16 automatically get focus but what if we didn't have that for attribute there. 2:19 We'll just remove that, save and refresh and now if I 2:26 click on the name, it won't actually give me focus to this element. 2:32 However, if we do have the four attribute there, 2:39 we'll get that behaviour back. 2:44 So let's add a few more labels for our other form controls. 2:47 I'm going to add a label for the email field. 2:52 So I'll type in email and then I'll add one for password. 3:00 Say, label for=password and again, I'm making sure that I match. 3:05 The IDs with the for attributes. 3:12 So, we'll type in password there and then finally 3:17 let's type in a label for our bio field. 3:21 So the ID is bi and we'll say, Biography. 3:26 Let's 3:32 make some space between each one of these, just 3:34 so we can see more clearly what's going on. 3:37 I'll save that, switch back to our preview, and refresh the page. 3:40 And let's just click around on each one of these 3:45 to make sure that it gives focus to the proper element. 3:48 Yep, it looks like everything's working just like we expect and that looks good. 3:52 Now the user can tell what kind of 3:59 information they should put into each form field. 4:01
You need to sign up for Treehouse in order to download course files.Sign up