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?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
This question is related to
html
radio-button
required
Here is a very basic but modern implementation of required radio buttons with native HTML5 validation:
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;}<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>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.
You can use this code snippet ...
<html>
<body>
<form>
<input type="radio" name="color" value="black" required />
<input type="radio" name="color" value="white" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
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.
I had to use required="required" along with the same name and type, and then validation worked fine.
<input type="radio" name="user-radio" id="" value="User" required="required" />
<input type="radio" name="user-radio" id="" value="Admin" />
<input type="radio" name="user-radio" id="" value="Guest" />
Source: Stackoverflow.com