Alan J. WilliamsOnline profile

Came across this anomaly today for the first time. Extending a form where the label tag defined a row with several radio buttons inside, for the basis of providing a rating system from 1-5.


Rate this (1-5)



In Firefox this demonstrates some weird behaviour where by if you click the 4th one, it’ll generally just select the first one, unless you vehemently keep clicking to get it to the correct value. Oddly this is valid HTML and works fine in IE, Opera and Chrome (and presumably Safari).

The source for this is below.

<label>
	<span>Rate this (1-5)</span>
	<input style="margin: 10px;" name="rating" type="radio" value="1" />
	<input style="margin: 10px;" name="rating" type="radio" value="2" />
	<input style="margin: 10px;" name="rating" type="radio" value="3" />
	<input style="margin: 10px;" name="rating" type="radio" value="4" />
	<input style="margin: 10px;" name="rating" type="radio" value="5" />
</label>

It appears the issue is caused by having a single label tag surrounding all the radio buttons. So the correct fix is to do it per radio using the for=”…” attribute. My quick solution for my work was to close the label after my span tag and allow them to sit seperately.

Thanks to this thread on StackOverflow for the solution.