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 · Accepted 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

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

Here is a very basic but modern implementation of required radio buttons with native HTML5 validation   x000D   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  gt  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   lt form gt     lt div gt       lt label for  name  gt Name  optional  lt  label gt       lt input id  name  type  text  name  name  gt     lt  div gt     lt fieldset gt     lt legend gt Gender lt  legend gt     lt div class  checkboxes  gt       lt label for  male  gt  lt input id  male  type  radio  name  gender  value  male  class  hidden  required  required  gt  lt span gt Male lt  span gt  lt  label gt       lt label for  female  gt  lt input id  female  type  radio  name  gender  value  female  class  hidden  required  required  gt  lt span gt Female  lt  span gt  lt  label gt       lt label for  other  gt  lt input id  other  type  radio  name  gender  value  other  class  hidden  required  required  gt  lt span gt Other lt  span gt  lt  label gt     lt  div gt     lt  fieldset gt     lt input type  submit  value  Send    gt   lt  form gt  x000D   x000D   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

[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