Clickable Label not working

Why is the label to my radio button not clickable?


	<label class="photoAction" for="photoAction">
		<input type="radio" name="photoAction" value="2" checked="checked" />
		Use a Custom Photo
	</label>

Debbie

Probably needs an ID on the input, also remove the checked attribute…

<label class="photoAction" for="photoAction">
		<input type="radio" id="photoAction" name="photoAction" value="2" />
		Use a Custom Photo
</label>

I don’t understand your suggestions…

1.) Why would adding an ID matter?

2.) Why are you telling me to remove “checked” when I want and need it?!

Debbie

Because the value of “for” has to be the id of whatever element the label applies to.

You need a way to uncheck the option? I presume you’d be having a no option as well?

How about this…


	<label class="photoAction" for="photoAction_opt2">
		<input id="photoAction_opt2" type="radio" name="photoAction" value="2" checked="checked" />
		Use a Custom Photo
	</label>

Debbie

When a user changes their profile photo, they can either choose “Do not use a photo” or “Upload a new photo”.

It is either or.

I default to Option #2, because I assume most people will be uploading a new photo versus opting out.

If you want to leave your profile photo as-is, then you - of course - wouldn’t choose “Change Profile Photo”! :slight_smile:

Sincerely,

Debbie

How about it? :slight_smile: I’m not sure what you want me to say. You’ve added the id; does it now work as you expect?

Of course, there’s no way to tell that from the code in your first post. :slight_smile: As I believe I may have mentioned before (once or twice ;)), it’s much easier to give the correct answer first time if we know the whole picture.

I need a hug… :smiley:

Looks okay so far, but maybe it will blow up my computer later…

Detail… details…

:stuck_out_tongue:

I could have swore that I had an ID in there before.

So is it correct that I need a unique FOR/ID pair for each Radio Button?

If I had 10 Radio Buttons, would I need to create 10 unique ID’s?

This code makes me cranky because it is soooooo looooooong - especially when it includes inline PHP like this…


	<label class="photoAction" for="photoAction_opt2">
		<input id="photoAction_opt2" type="radio" name="photoAction" value="2" <?php echo ((empty($photoAction)) || (isset($photoAction) && $photoAction == "2")) ? 'checked="checked"' : ''; ?> />
		Use a Custom Photo
	</label>

ID’s and Classes and For’s and so on can be a drag sometimes.

Guess they are all needed in cases like this?!

Sincerely,

Debbie

Yup.

Whether the checkbox or radio button is checked doesn’t affect the clickability of the label, just the for-id relationship.

ARIA seems to have borrowed this pattern (someone has an id=“someID” and the button controlling it has aria-controls=“someID”) and the new form attribute (form has id=“someID” and form control who is outside the form has form=“someID”).

This code makes me cranky because it is soooooo looooooong

Since users don’t see these id’s, you could make them shorter.

I write most of my stuff at work in a templating system (Jinja), and often I have lines like
{% for k, v in list_of_banks %}
<input type=“radio” id=“bank_{{ loop.index }}” name=“{{ v }}” >
<label for=“bank_{{ loop.index }}”>{{ v.name }}</label>
{% endfor %}

which might end up as
<input type=“radio” id=“bank_1” name=“RABO” >
<label for=“bank_1”>Rabobank</label>
x 10 banks

where I get some long list of thingies and I must have unique ID’s (and later on the page that same loop runs again, so I don’t use the “v” but choose something I hope is appropriate to the questions, for future maintainers/myself…).

So, nothing wrong with “shortname_number” style if you find it readable to yourself a few months down the road.