Je me demande simplement comment utiliser correctement le nouvel attribut d'entrée HTML5 "requis" sur les boutons radio. Chaque champ de bouton radio a-t-il besoin de l'attribut comme ci-dessous ou est-ce suffisant si un seul champ l'obtient?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />Réponses:
TL; DR: définissez l' requiredattribut d'au moins une entrée du groupe radio.
Le réglage requiredde toutes les entrées est plus clair, mais pas nécessaire (sauf si des boutons radio sont générés dynamiquement).
Pour grouper les boutons radio, ils doivent tous avoir la même namevaleur. Cela permet à un seul d'être sélectionné à la fois et s'applique requiredà l'ensemble du groupe.
<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>Prenez également note de:
Pour éviter toute confusion quant à la nécessité ou non d'un groupe de boutons radio, les auteurs sont encouragés à spécifier l'attribut sur tous les boutons radio d'un groupe. En effet, en général, les auteurs sont encouragés à éviter d'avoir des groupes de boutons radio qui n'ont pas de contrôles initialement vérifiés, car il s'agit d'un état dans lequel l'utilisateur ne peut pas revenir, et est donc généralement considéré comme une mauvaise interface utilisateur.
Vous pouvez utiliser cet extrait de code ...
<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>Spécifiez le mot clé " requis " dans l' une des instructions de sélection . Si vous souhaitez modifier le mode par défaut de son apparence. Vous pouvez suivre ces étapes. C'est juste pour des informations supplémentaires si vous avez l'intention de modifier le comportement par défaut.
Ajoutez ce qui suit dans votre .cssfichier.
/* style all elements with a required attribute */
:required {
background: red;
}Pour plus d'informations, vous pouvez consulter l'URL suivante.
Si vos boutons radio ont été personnalisés, par exemple, l'icône d'origine du bouton radio a été masquée via css display:noneafin que vous puissiez créer votre propre bouton radio, vous obtiendrez peut-être l'erreur.
La solution consiste à remplacer display:noneparopacity:0
display:none. C'est déjà répondu ici: stackoverflow.com/questions/49687229/…
Voici une implémentation très basique mais moderne des boutons radio requis avec validation HTML5 native:
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="other" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>Bien que je sois un grand fan de l'approche minimaliste de l'utilisation de la validation HTML5 native, vous voudrez peut-être la remplacer par une validation Javascript à long terme. La validation Javascript vous donne beaucoup plus de contrôle sur le processus de validation et vous permet de définir de vraies classes (au lieu de pseudo-classes) pour améliorer le style des champs (in) valides. Cette validation HTML5 native peut être votre solution de rechange en cas de Javascript cassé (ou manquant). Vous pouvez en trouver un exemple ici , ainsi que d'autres suggestions sur la façon de créer de meilleures formes , inspirées d' Andrew Cole .
J'ai dû utiliser required="required"le même nom et le même type que la validation a bien fonctionné.
input type="radio" name="userradio" id="" value="User" required="required"
input type="radio" name="userradio" id="" value="Admin"
input type="radio" name="userradio" id="" value="Guest"