web-dev-qa-db-fra.com

HTML5: Comment utiliser l'attribut "required" avec un champ de saisie "radio"

Je me demande simplement comment utiliser le nouvel attribut d'entrée HTML5 "requis" de la bonne manière sur les radiobuttons. Est-ce que chaque champ de radiobutton a 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" />
html5radio-buttonrequired
318
nerdess

Définissez l'attribut required pour au moins une entrée du groupe radio.

Le réglage de required pour toutes les entrées est plus clair, mais pas nécessaire (à moins de générer des boutons radio dynamiques).

Pour regrouper les boutons radio, ils doivent tous avoir la même valeur name. Cela permet de n'en sélectionner qu'un à la fois et applique required à l'ensemble du groupe.

<form>
  Select Gender:

  <label><input type="radio" name="gender" value="male" required>Male</label>

  <label><input type="radio" name="gender" value="female">Female</label>

  <input type="submit">
</form>

Prenez également note de:

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. En effet, en général, les auteurs sont encouragés à éviter d’avoir des groupes de boutons radio dépourvus de contrôles initialement vérifiés, car c’est un état dans lequel l’utilisateur ne peut pas revenir et qui est donc généralement considéré comme une interface utilisateur médiocre.

La source

534
Seybsen

essayez ceci ...

<form>
      <input type="radio" name="color" value="black" required />
      <input type="radio" name="color" value="white" />

      <input type="submit" value="Click Here" />
</form>

Trouver JSFIDDLE

12
Vijay

Si vos boutons radio ont été personnalisés, par exemple, l’icône originale du bouton radio a été masquée via css display:none afin que vous puissiez créer votre propre bouton radio, il est possible que l’erreur apparaisse. 

La solution est de remplacer display:none par opacity:0

3
james

Voici une implémentation très simple mais moderne des radiobuttons requis avec validation native HTML5:

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="male" class="hidden" required><span>Other</span></label>
  </div>

  <input type="submit" value="Send" />

</form>

Bien que je sois un grand partisan de l’approche minimaliste consistant à utiliser 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 des classes réelles (au lieu de pseudo-classes) afin d'améliorer le style des champs valides (in). Cette validation HTML5 native peut être votre solution en cas de Javascript cassé (ou manquant). Vous pouvez trouver un exemple de cela ici , ainsi que d’autres suggestions sur la manière de créer de meilleures formes , inspirées par Andrew Cole .

0
JoostS

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é " required " dans l'un des états select . Si vous voulez changer la manière par défaut de son apparence. Vous pouvez suivre ces étapes. Ceci 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 fichier .css.

/* style all elements with a required attribute */
:required {
  background: red;
}

Pour plus d'informations, vous pouvez vous référer à l'URL suivante.

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

0
Dulith De Costa