How to tie the Label to a Dropdown Menu

[DoubleDee]

What is the proper way to tie the Label and a Drop-Down Menu together?

1.) Do you wrap the Select inside a Label ?

2.) Do you wrap the Label and Select inside a Fieldset?

3.) Other?

Sincerely,

Debbie

[chris_upjohn]

You can simply use the for attribute on the label to bind it to the id attribute of the select box, see the following pen for an example, however please note that label’s can’t trigger an event to open the drop down, they can only focus onto it.

http://codepen.io/ChrisUpjohn/pen/dGAif

[ralphm]

Something like this:

<label for="business">Some Label</label>

<select id="business" name="business">
	<option value="First Choice">First Choice</option>
	<option value="Second Choice">Second Choice</option>
	<option value="Third Choice">Third Choice</option>
	<option value="Fourth Choice">Fourth Choice</option>
</select>

Welcome back, Chris. Your CodePen link isn’t active, though. Perhaps you didn’t save it?

[chris_upjohn]

@ralph_m

Welcome back, Chris. Your CodePen link isn’t active, though. Perhaps you didn’t save it?

Thanks Ralph, I forgot to take it out of private mode

[ralphm]

Thanks Chris.

@chris_upjohn

label’s can’t trigger an event to open the drop down, they can only focus onto it.

I’m on the iPad right now, and interestingly, touching the label does trigger the select list to open.

[chris_upjohn]

@ralph_m

I’m on the iPad right now, and interestingly, touching the label does trigger the select list to open.

I should have clarified that, mobile devices will trigger the drop down as they hook into a system UI control unlike desktop browsers which generally use the built in operating system control that forbids access via the focus event.

[DoubleDee]

@ralph_m

Something like this:

<label for="business">Some Label</label>

<select id="business" name="business">
	<option value="First Choice">First Choice</option>
	<option value="Second Choice">Second Choice</option>
	<option value="Third Choice">Third Choice</option>
	<option value="Fourth Choice">Fourth Choice</option>
</select>

Welcome back, Chris. Your CodePen link isn’t active, though. Perhaps you didn’t save it?

So there is no extra benefit of doing this…

<label for="business">Some Label

<select id="business" name="business">
	<option value="First Choice">First Choice</option>
	<option value="Second Choice">Second Choice</option>
	<option value="Third Choice">Third Choice</option>
	<option value="Fourth Choice">Fourth Choice</option>
</select>

</label>

Debbie

[chris_upjohn]

For general use no, but from an accessibility standpoint it makes sense to bind labels to form elements as those who either have low or fully impaired vision can understand what they’re focused on.

[DoubleDee]

@chris_upjohn

For general use no, but from an accessibility standpoint it makes sense to bind labels to form elements as those who either have low or fully impaired vision can understand what they’re focused on.

I’m not following you.

What would be the difference between Ralph’s code and mine?

I was taught that if you wrap form objects like radio buttons in the Label, then it makes both the Object and Label clickable.

But would that also be true with how Ralph showed me above?

Sincerely,

Debbie

[chris_upjohn]

@DoubleDee

I’m not following you.

Sorry, I misread your reply, it’s a bit late in Melbourne.

@DoubleDee

I was taught that if you wrap form objects like radio buttons in the Label, then it makes both the Object and Label clickable.

The <label> element is valid if you do wrap it but it doesn’t work any differently compared to using it before or after the form element it’s bound to, even without the label your form will function the same way as it only triggers the focus event.

From a personal standpoint I always put the label before the form element as I find it easier to manage when styling forms, the only time I would ever use it after an element is form custom checkboxes, either way it’s all valid markup.

[DoubleDee]

@chris_upjohn

Sorry, I misread your reply, it’s a bit late in Melbourne.

The <label> element is valid if you do wrap it but it doesn’t work any differently compared to using it before or after the form element it’s bound to, even without the label your form will function the same way as it only triggers the focus event.

From a personal standpoint I always put the label before the form element as I find it easier to manage when styling forms, the only time I would ever use it after an element is form custom check-boxes, either way it’s all valid markup.

Still not really following what you said… (I think you’ve got some words out of order.)

I wasn’t asking about wrapping the Label.

I was asking about wrapping other Form Elements inside of the Label.

There is a difference.

Anyways, I am getting more confused by my own testing…

In the past, it seemed like if the Label and Radio Button were separate, then if you clicked on the Label, it would NOT select the Radio Button.

And then I thought Ralph told me by wrapping the Radio Button inside of the Label, it would make it so that when the user clicked on either the Label or Radio Button, the Radio Button would get selected - which is definitely better!

But now based on my own testing, I am wondering if what makes the Label/Radio Button pair work is not whether the Label wraps things, but inside whether the Label FOR and Radio Button ID match… :-/

(And I mention Label/Radio Buttons, because presumably the logic is similar for Label/Drop-Down Lists as well…)

At the end of the day, the intent of my OP was just to make sure I am using the best code to link Labels with Form Objects and make it easier for both sighted and sight-less users!

Whew!

Sincerely,

Debbie

[C_Ankerstjerne]

I prefer to place the form element inside the label. While it doesn’t provide any real advantages (and, in very old screen readers, some accessibility issues, if the for-attribute isn’t still used), it seems to me to provide a much more logical hierarchy.