Form template renders radio field inputs with same id

[calebsyring]

The default radio field renders with multiple inputs with same id.

keg-elements/keg_elements/templates/keg_elements/forms/horizontal_b4.html

Lines 194 to 199 in 69003d3

	{% for value, label, checked in field.iter_choices() %}
	<div class="radio">
	<label>
	<input type="radio"
	name="{{ field.id }}"
	id="{{ field.id }}"

[bchopson]

perhaps id="{{ field.id }}-{{ field.value }}"

[rsyring]

Is there a reason we are even setting id on these inputs? You should be able to target them in tests based on index position (since you control the data you know what index you want. In JS, it would be just as easy to target based on name or value attributes. Actually, you can do the same with PyQuery.

FWIW, I try to avoid using IDs for anything unless really needed due to the issue of accidental duplication.

I don't like just using lower b/c you could have characters in a value that aren't valid in the id attribute. I'd suggest using blazeutils simplify instead as the filter.

My preferences would be:

1. Remove id attribute and you no longer need to worry about it being accidentally duplicated
2. Use the loop value
3. Use simplify on the value instead of lower.

/cc @matthiaswh, @guruofgentoo, @bchopson to weigh in.

[bchopson]

I believe the id for inputs is so that a <label> can reference that input via its for attribute. Setting for explicitly is helpful for screen readers.