How to use the “required” attribute with a “radio” input field

Question

I am just wondering how to use the new HTML5 input attribute "required" the right way on radiobuttons. Does every radiobutton field need the attribute like below? Or is it sufficient if only one field gets it?

<input type="radio" name="color" value="black" required="required" />

<input type="radio" name="color" value="white" required="required" />

Answer 1

To group the radio buttons, but all of them must have the same name value. This will allows only one to be selected at a time and applies required to the whole group. Try this code to do the same:

<form>

  Select Gender:

  <label><input type="radio" name="gender" value="male" required>Male</label>

  <label><input type="radio" name="gender" value="female">Female</label>

  <label><input type="radio" name="gender" value="other">Other</label>

<input type="submit">

</form>

Note: Setting is required for all the inputs, but not necessary (unless dynamically generating radio-buttons).

Note that to avoid the confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. In general, authors are encouraged to avoid having radio button groups that do not have any initially checked controls in the first place, as this is a state that the user cannot return to, and is therefore generally considered a poor user interface.