Labels & Inputs

[00:00:00]
>> Jen Kramer: And if we were coding very minimally, that is what we would do. But there's actually an additional step here that I'd like you guys to be aware of which is making your forms accessible. What do we mean by accessibility, yeah?
>> Ryan: People with disabilities can access them.

[00:00:15]
>> Jen Kramer: That people with disabilities can actually access our form as well and complete it. And so on the web there's a whole, just like in real life, there are a lot of people who have various types of disabilities. But in fact, there are a lot of disabilities that we don't necessarily think of as disabilities that apply to websites.

[00:00:34]
For example, color blindness, I briefly mentioned the other day, 10% of the population is red-green color blind. We try to avoid making red web pages in Christmas colors for that reason, okay? Because it can be very difficult for people who are colorblind to tell the difference between red and green.

[00:00:52]
Likewise, we don't necessarily think of people who wear glasses as disabled people. But yet, some people need deep fonts to be a little bit bigger, especially older people, so that they can read web pages very clearly. So these accessibility features don't take a lot of time to add.

[00:01:10]
And they can really help a whole lot of people in using your work. So what we're going to do here to make this form more accessible is we're gonna add a new field here for your name. And instead of it being a paragraph, we're going to make it a label.

[00:01:26]
And we're going to do a lot of labeling today. And this label tag is going to go all the way around your name, all right. So with that, we know that your name is a label. But it's a label for what? Do we know? We have no idea.

[00:01:50]
So we need to associate the label with the field we just created. So we're going to say label for name. So the ID down here, in our input, is what will be associated with the label here. So whatever you type in for ID, that is what's going to go up here for for, the for attribute value in the label tag.

[00:02:15]
>> Speaker 3: So you could have named it George.
>> Jen Kramer: I could have named George and if I did that, I would have said the ID is George. And then the for value up here would be.
>> Speaker 3: George.
>> Jen Kramer: George, just like that. Just because you can doesn't mean you should, but technically, that will work just fine, okay?

[00:02:36]
And what's the difference between id and name, as- Okay, great question, so what's the difference between id and name? So ID is going to be used specifically in this case, certainly with this label tag. Often there's a JavaScript processing script associated with forms that do error checking to make sure people have filled out the fields that you want.

[00:02:58]
Sometimes those IDs can also be used in JavaScript, okay. But in our case, very specifically, this ID is associated with the label. The name portion of this, okay, the name portion of this is going to be associated with the processing script. When we click our submit button for our form, and this whole contents of the form get sent to the server, right?

[00:03:23]
The processing script on the server needs this name field in order to do whatever it needs to do, make sense? Fortunately, we don't need to worry about the processing script. We're front end people. We don't write that stuff. We hire people to write those processing scripts, okay? And our engineers are gonna tell us exactly what we need to do in terms of name fields in order for our processing script to work.

[00:03:47]
Make sense? We're actually gonna work through that later once we have this initial form coded. Yeah, Ryan?
>> Ryan: Just for clarification, ID, name, and for need to all have the same value?
>> Jen Kramer: They do not all need to have the same value. You could have three different values.

[00:04:03]
But I like to make them the same value. [LAUGH] Because I just think it works better, okay.