Transcript from the "Input Name & Value" Lesson
[00:00:00]
>> Jen Kramer: And then for every option there's gonna be a value, value=. And that value is whatever you wanna call it based on what you see there in the text. So I call this one the tour, here I'd like a tour of the solar system. Value= dinner, you wanna do alien dinner and discussion, value= dance, alien dance lessons.
[00:00:32]
And then of course, the very popular whale-watching,
>> Jen Kramer: Whales. So let's just take a look at what we have here so far. We go ahead and save that, and then take a look at that here in your web browser for your form. And once again, don't worry about the formatting, it's a mess.
[00:00:55]
I hear you, it's a mess, we're gonna fix it. So what type of alien abduction experience do you want? You'll see that we have our little select list right here, and we can switch this to whatever we want, okay? Is anyone bothered by the fact that it starts off, right away, just by saying tour of the solar system?
[00:01:16]
Anyone bothered by that? Yeah, what does it normally say on these kind of selects when you see these on the web?
>> Speaker 2: Select.
>> Jen Kramer: It's says, select one or something, right? So we can add that, how might we go about adding that? Anyone have an idea, yeah?
>> Speaker 3: We add another option.
[00:01:33]
>> Jen Kramer: Add another option, exactly. So what we're going to do is we're gonna say, [COUGH]
option, and then we can say, you can give this a value if you want, but I'm actually gonna leave my value out. I don't want people picking this as an option, [LAUGH] okay?
[00:01:53]
There's gonna be no value, but I will add this, selected. Because this is what's gonna be selected by default. And then I can type in select one,
>> Jen Kramer: Oops, /option.
>> Jen Kramer: So we can add that to the top of our choices here.
>> Jen Kramer: And once you've done that, [COUGH] you can save your form, and then go ahead and refresh the page.
[00:02:31]
>> Jen Kramer: Make sure you save your HTML. I saved my HTML.
>> Jen Kramer: I must have selected this already. There we go, select one.
>> Jen Kramer: Okay? So there we go, you should have a select one there at the top of the list. Did it work? More or less? Okay, yes?
[00:03:00]
>> Speaker 4: So I need another rundown on the difference between id, name and value.
>> Jen Kramer: Okay, id, name, and value three things. And in the context of which of these fine types of form fields that we've been talking about.
>> Speaker 4: I mean, it seems just unintuitive. Okay, if you have an input and some input types, you need an id and a name, but also a value on these options.
[00:03:27]
We just have a value. How do you know when to use one of the other, when do you what do you always have to have? What do you-
>> Jen Kramer: Right. Right, right.I think I actually forgot to put in the name up here so maybe that will help you.
[00:03:39]
Name equals AB type. Sorry, so that'll probably help you.You'll need a name up there in the select. So, okay, so what Emma's pointing out here is there's a little bit of inconsistency. So the thing to remember about this is the following, ID, right, ID. Is for the label tag.
[00:03:59]
That's why we have it here in HTML and CSS. The only reason that we put an ID into a form, it's to work with the label tag. Okay, and the value of ID and the value of for the for attribute in the label tag. They have to be the same, right?
[00:04:14]
Always 100% of the time. Okay? IDs and four they go together. The name is for back end processing. Okay? Name is for back end processing. And that's what that is there for. And value is the one that's gonna vary But value is of course, the actual values. Remember we talked about property value pairs in CSS, like border, one pixel solid red?
[00:04:51]
Remember that whole thing? Name and value are the same kinda thing. The property is name and the value is whatever it is. Make sense? Okay, so if we go scroll all the way back on up here and we take a look at let's say for example name all right?
[00:05:09]
Name is actually a box, we have no idea what people's names are, we can account for 7 billion people on this planet and all their individual names, right? Nor would we want to. So we give you a box and whatever you type in the box, that is going to be the value, right?
[00:05:24]
So the name of the Name field or the name, the name property of phone or something, whatever you type in that box. That is the value. Make sense?
>> Jen Kramer: Thing under value. So it's like a key value pair. The name is the key, the value is the value.
[00:05:44]
>> Speaker 4: Or in like a spreadsheet, the name is the header row and the value is the value in itself.
>> Jen Kramer: Correct, yeah, yeah, so that's true for these things where you're typing something in, right? But in the case of a radio button, for example, or for a select box, there's nothing to type in, right?
[00:06:00]
So somehow, we still need to transmit a value. And so that's why we have a value property here for radio buttons and select boxes. Also for check boxes, which we'll get to in a minute. Does that help some? Great question. Okay.
>> Speaker 4: What was the last thing that you typed in i missed you noticed you.
[00:06:21]
>> Speaker 5: Name there
>> Jen Kramer: Yes. So for the Select, i forgot the name, sorry. So iI put in, here's the ID app type. That's for the label. The name is for the backend processing. That's apptype. Then the value in this case those are right there in those tax in the drop down the option tax, thank you for continuing to ask that question.
[00:06:45]
Ask it again. If you still don't understand this is like really important. If you don't understand this stuff, your forms not gonna work, right?
>> Speaker 5: Get a couple more times.
>> Jen Kramer: Okay. She's gonna ask you a few more times. That's great. No problem, no problem at all.