Comment utiliser l'attribut «requis» avec un champ de saisie «radio»

409

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" />
html radio-button required nerdess
la source

Réponses:

692

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>
Développer l'extrait

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.

La source

Seybsen
la source
1
@kumar_harsh: Toute case cochée comme requise doit être cochée. De même, le fait de cocher une case requise n'a aucun effet sur les autres cases à cocher (même nom ou non). Il n'y a pas de balisage simple pour indiquer indiquer "de ces x cases à cocher avec le même nom", au moins une doit être cochée.
Brad Kent
3
@Davdriver oui, vous pouvez le spécifier sur tous les boutons radio, si vous le souhaitez. En fait, w3c a écrit: Pour éviter toute confusion quant à savoir si un groupe de boutons radio est requis ou non, les auteurs sont encouragés à spécifier l'attribut sur tous les boutons radio d'un groupe. (voir w3.org/TR/html5/forms.html#the-required-attribute sous Exemple de code )
Seybsen
1
Sry mais le suivant est un tas de boloney: 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 c'est un état dans lequel l'utilisateur ne peut pas revenir, et est donc généralement considéré comme une mauvaise interface utilisateur. Pourquoi? Parce que ne pas avoir de contrôle initialement vérifié est un cas totalement valide (UX).
PussInBoots
2
Je voudrais également ajouter que, dans certains cas, les boutons radio qui n'ont pas d'état "vérifié" initialisé sont une très bonne chose et une bonne UX. Dans mon cas, l'utilisateur doit d'abord classer un objet sur la base d'une liste semi-longue de réponses oui / non. Une mauvaise réponse à ces questions nuirait à la logique en aval. Par conséquent, je ne peux pas par défaut répondre à Oui ou Non car cela variera pour chaque objet que l'utilisateur classe. Il est possible qu'ils en manquent un qui devait être modifié et saisissent de mauvaises données dans la base de données. Ou la tâche doit être interrompue et ne sait pas où ils se sont arrêtés.
Joel Wigton
1
@Seybsen Nah, "en général" couvre que ce n'est pas un absolu. Mais ces organismes de normalisation ne donnent jamais d'exemples de cas où il serait en fait une mauvaise interface utilisateur d'utiliser leur recommandation, j'ai donc voulu en fournir une. Ils donnent l'impression que si vous l'utilisez, vous n'avez pas pensé à votre UX. Je veux que les autres développeurs aient la confiance nécessaire pour faire un choix de conception éclairé - pas seulement par défaut aveuglément sur chaque bouton radio.
Joel Wigton
4

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.

https://css-tricks.com/almanac/selectors/r/required/

Dulith De Costa
la source
3

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

James
la source
Je suppose que vous voulez dire que le message d'erreur du navigateur n'est pas visible si le bouton radio lui-même est masqué via display:none. C'est déjà répondu ici: stackoverflow.com/questions/49687229/…
Seybsen
1

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>
Développer l'extrait

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 .

JoostS
la source
0

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"
mk
la source
1
Il serait utile de formater votre réponse et d'expliquer pourquoi cela a fonctionné.
Joe Lissner
1
d'accord avec @JoeLissner. Veuillez formater votre code en tant que tel à l'aide des outils fournis.
sao