HTML Forms

Selected Attribute

Jen Kramer

AnnieCannons
HTML Forms

Check out a free preview of the full HTML Forms course

The "Selected Attribute" Lesson is part of the full, HTML Forms course featured in this preview video. Here's what you'd learn in this lesson:

Jen explains how to configure an option or radio button value to be preselected using the selected attribute.

Preview
Close

Transcript from the "Selected Attribute" Lesson

[00:00:00]
>> Jen Kramer: I have ne more thing I want to add for the Select. We put in the selected value here, on line 46. We added selected because that is the thing that is selected by default. Just because we've put selected there and it happens to be the first thing in the list, that's great, but did you know of course that we can move selected anywhere we want?

[00:00:21]
So I could put selected down here, Alien dinner and discussion. You can do that.
>> Jen Kramer: The first item doesn't have to be the one that's selected. Does that make sense? Yes.
>> Speaker 2: So if you do that, it still shows in the same order?
>> Jen Kramer: It'll still show in the same order, by default-

[00:00:42]
>> Speaker 2: It'll say select one at the first glance, but they've already selected one for you to cram it down your throat.
>> Jen Kramer: Right so in this case, Alien dinner and discussion is pre-selected. When I click on the Select I'll still see select one, tour of the solar system, and then under it, the other options.

[00:01:01]
>> Speaker 2: Basically, make that the default option for anybody who doesn't select one, I've sort of selected it for them.
>> Jen Kramer: I selected one for them, correct. Can anyone think of a use case where this might actually work? Or a situation where you may actually want to select something that's not the first thing in the list?

[00:01:21]
>> Speaker 3: If it was like 90% of the time what was selected by people?
>> Jen Kramer: Yeah, something that's going to be selected by somebody a lot. So for example, you have a list of states, and you are a restaurant, you're right here in Minneapolis and people are ordering takeout.

[00:01:40]
Are people ordering take out from your restaurant in Massachusetts or Virginia, or even Wisconsin? Wisconsin's closer but you know still a long drive to go get it there, right? Okay, so in that case, if you had a list of 50 states, you might want Minnesota to be pre selected.

[00:02:01]
And clearly M in Minnesota is not at the top of the list of states in alphabetical order, right? So this is a reason that you might want to choose something in your select list that's not the first thing. Make sense? But 99.99% of the time, it's probably the first thing on the list that you want selected, right?

[00:02:24]
Okay, so we'll go ahead and move it back. Likewise, I didn't tell you about this about radio buttons, but we can pre-select the radio button as well, okay? So by default we have no radio button selected, but if you want one choice selected as people go into the form you can do that.

[00:02:43]
Which one would you like selected by default, anybody, yeah?
>> Speaker 4: Classic.
>> Jen Kramer: The classic, okay, so what we would do here is we would say checked. Checked is our value.
>> Jen Kramer: So, if you say check there, that radio button will be selected by default.
>> Jen Kramer: And, when we refresh our web page, there it is, it's selected by default, classic oval UFOs.

[00:03:15]
Obviously you can chance it to something else, right. But by default the first one is selected.
>> Speaker 5: Can we have two name values, like 1,2?
>> Jen Kramer: 1,2? If you have a value like 1,2, that is not you're passing 1 and 2. You're passing 1,2, the whole thing as a unit.

[00:03:42]
Make sense? I don't know what you're gonna do on the backend, but you're passing the whole thing as a unit. You're not passing two values.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now