Ik vraag me gewoon af hoe u het nieuwe HTML5-ingangsattribuut “Vereist” op de juiste manier op radio-knoppen kunt gebruiken. Heeft elk veld met een radioknop het attribuut nodig zoals hieronder of is het voldoende als slechts één veld het krijgt?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
Antwoord 1, Autoriteit 100%
TL; DR: Stel de requiredAttribuut in voor ten minste één ingang van de radio-groep.
Instelling requiredVoor alle ingangen is duidelijker, maar niet noodzakelijk (tenzij dynamisch het genereren van radioknoppen).
Om radioknoppen te groeperen, moeten ze allemaal hetzelfde hebben namewaarde. Hierdoor kan er slechts één tegelijk worden geselecteerd en is van toepassing op requiredaan de hele groep.
<form>
Select Gender:<br>
<label>
<input type="radio" name="gender" value="male" required>
Male
</label><br>
<label>
<input type="radio" name="gender" value="female">
Female
</label><br>
<label>
<input type="radio" name="gender" value="other">
Other
</label><br>
<input type="submit">
</form>Antwoord 2
U kunt deze code snippet gebruiken …
<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>
Specificeer het “vereist” zoekwoord in een van de select-instructies. Als u de standaardmanier van het uiterlijk wilt wijzigen. U kunt deze stappen volgen. Dit is alleen voor extra informatie als je de intentie hebt om het standaardgedrag te wijzigen.
Voeg het volgende toe aan je .css-bestand.
/* style all elements with a required attribute */
:required {
background: red;
}
Voor meer informatie kunt u de volgende URL raadplegen.
https://css-tricks.com/almanac/selectors/r/required /
Antwoord 3
Hier is een zeer eenvoudige maar moderne implementatie van de vereiste keuzerondjes met native HTML5-validatie:
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>Antwoord 4
Ik moest required="required"gebruiken, samen met dezelfde naam en type, en dan werkte validatie prima.
<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" />