HTML5: How to use the “required” attribute with a

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

If your radio buttons have been customised, for example the original icon for the radio button has been hidden via css display:none so that you can create your own radio button then you will might be getting the error.

The way to fix it is to replace display:none with opacity:0

Answer 2

Set the required attribute for at least one input of the radio group.

---

Setting required for all inputs is more clear, but not necessary (unless dynamically generating radio-buttons).

To group radio buttons they must all have the same name value. This allows only one to be selected at a time and applies required to the whole group.

<form>
  Select Gender:

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

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

  <input type="submit">
</form>

Also take note of:

To avoid 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. Indeed, 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.

Source

Answer 3

Here is a very basic but modern implementation of required radiobuttons with native HTML5 validation:

body {font-size: 15px; font-family: serif;}
input {
  background: transparent;
  border-radius: 0px;
  border: 1px solid black;
  padding: 5px;
  box-shadow: none!important;
  font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
  opacity: 0; 
  position: absolute; 
  pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
  display: block;
  border: 1px solid black;
  border-left: 0;
  padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}

<form>

  <div>
    <label for="name">Name (optional)</label>
    <input id="name" type="text" name="name">
  </div>

  <label>Gender</label>
  <div class="checkboxes">
    <label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
    <label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
    <label><input id="other" type="radio" name="gender" value="male" class="hidden" required><span>Other</span></label>
  </div>

  <input type="submit" value="Send" />

</form>

Although I am a big fan of the minimalistic approach of using native HTML5 validation, you might want to replace it with Javascript validation on the long run. Javascript validation gives you far more control over the validation process and it allows you to set real classes (instead of pseudo classes) to improve the styling of the (in)valid fields. This native HTML5 validation can be your fall-back in case of broken (or lack of) Javascript. You can find an example of that here, along with some other suggestions on how to make Better forms, inspired by Andrew Cole.

Answer 4

try out this...

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

      <input type="submit" value="Click Here" />
</form>

Find JSFIDDLE