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  in the right way on radio buttons  Does every radio button field need the attribute like below or is it sufficient if only one field gets it       lt input type  radio  name  color  value  black  required  required    gt   lt input type  radio  name  color  value  white  required  required    gt

User · Answer

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

_x000D_

fieldset { 
  display: block;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  border: none;
}
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;}

_x000D_

<form>
  <div>
    <label for="name">Name (optional)</label>
    <input id="name" type="text" name="name">
  </div>
  <fieldset>
  <legend>Gender</legend>
  <div class="checkboxes">
    <label for="male"><input id="male" type="radio" name="gender" value="male" class="hidden" required="required"><span>Male</span></label>
    <label for="female"><input id="female" type="radio" name="gender" value="female" class="hidden" required="required"><span>Female </span></label>
    <label for="other"><input id="other" type="radio" name="gender" value="other" class="hidden" required="required"><span>Other</span></label>
  </div>
  </fieldset>
  <input type="submit" value="Send" />
</form>

_x000D_

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.

User · Answer

You can use this code snippet       lt html gt     lt body gt        lt form gt             lt input type  radio  name  color  value  black  required   gt             lt input type  radio  name  color  value  white    gt             lt input type  submit  value  Submit    gt       lt  form gt     lt  body gt   lt  html gt    Specify  required  keyword in one of the select statements  If you want to change the default way of its appearance  You can follow these steps  This is just for extra info if you have any intention to modify the default behavior   Add the following into you  css file      style all elements with a required attribute     required     background  red      For more information you can refer following URL   https   css-tricks com almanac selectors r required

User · Answer

I had to use required  quot required quot  along with the same name and type  and then validation worked fine   lt input type  quot radio quot  name  quot user-radio quot   id  quot  quot  value  quot User quot  required  quot required quot    gt    lt input type  quot radio quot  name  quot user-radio quot  id  quot  quot  value  quot Admin quot    gt    lt input type  quot radio quot  name  quot user-radio quot  id  quot  quot  value  quot Guest quot    gt

User · Answer

TL DR  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    x000D   x000D   lt form gt  x000D    Select Gender  lt br gt  x000D   x000D     lt label gt  x000D       lt input type  radio  name  gender  value  male  required gt  x000D      Male x000D     lt  label gt  lt br gt  x000D   x000D     lt label gt  x000D       lt input type  radio  name  gender  value  female  gt  x000D      Female x000D     lt  label gt  lt br gt  x000D   x000D     lt label gt  x000D       lt input type  radio  name  gender  value  other  gt  x000D      Other x000D     lt  label gt  lt br gt  x000D   x000D     lt input type  submit  gt  x000D   lt  form gt  x000D   x000D   x000D    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

[html] How to use the "required" attribute with a "radio" input field

Examples related to html

Examples related to radio-button

Examples related to required