Formulaire intermédiaire

5

Radio

Les boutons radio permettent de choisir une seule option parmi un groupe 🔘. Leur usage est approprié lorsque peu d'options sont disponibles ou qu'il est important que l'usager puisse voir toutes les options disponibles.

Par exemple, si seulement une option de pizza 🍕 peut-être sélectionnée:

Voir le CodePen de Simon Arnold (@smnarnold).

Attributs de radio

  • name tous les boutons radio partageant le même name font partie d'un même groupe. Seul une option/un bouton radio parmi ce groupe peut être sélectionnée à la fois.

Par exemple, il est impossible de sélectionner les options Végétarienne et Toute garnie en même temps, puisqu'elles font toutes deux partie du groupe pizza.

  • checked permet de spécifier à l'aide d'un booléen (true/false) si l'élément doit-être sélectionné. Si aucune valeur n'est attribuée, la simple présence de l'attribut suffit à sélectionner l'élément.

La présence ou absence de cet attribut est aussi utilisée en CSS afin d'appliquer des styles différents en fonction du statut de l'élément.

Par exemple: .radio:checked { outline: solid 5px green; }

  • value indique la valeur associée au bouton radio. Ainsi lorsque le formulaire est soumis, la valeur associée au name est celle de l'élément checked.

Par exemple, si le formulaire est soumis sans que les boutons radio soient touchés, la valeur reçue sera pizza: "toute-garnie".

  • disabled permet d'afficher en lecture seule une option afin d'indiquer que bien qu'elle soit normalement disponible, celle-ci ne l'est pas en ce moment.

Pour en savoir plus, voir cet article MDN à propos de input radio.

Checkbox

Les boîtes à cocher permettent de définir individuellement un statut booléen (true/false) pour une option ☑. Leur usage est approprié lorsque des choix optionnels sont disponibles.

Par exemple, si des options en extra sont offertes sur une pizza 🍕

Voir le CodePen de Simon Arnold (@smnarnold).

Attributs de checkbox

  • name nom de référence lorsque le formulaire est soumis.
  • checked permet de spécifier à l'aide d'un booléen (true/false) si l'option devrait être cochée ou non. Si aucune valeur n'est attribuée, la simple présence de l'attribut suffit à cocher l'élément.

Lorsqu'une boite à cocher est cochée, la pseudo-classe :checked est ajoutée à l'élément, permettant ainsi de modifier l'apparence de l'élément en fonction de son statut.

Par exemple: .checkbox:checked { outline: solid 5px green; }

  • value cet attribut est optionnel. S'il n'est pas spécifié et que l'option Olives est cochée, la soumission du formulaire retourne olives: "on". Si une value est spécifiée, comme dans le cas de l'option Oignons, le formulaire retourne oignons: "oui svp".
  • disabled permet d'afficher en lecture seule une boite à cochée afin d'indiquer que bien qu'elle soit normalement disponible, elle ne l'est pas en ce moment.

Contrairement aux autres <input>, les boîtes à cocher ne sont incluses dans les soumissions du formulaire uniquement si celles-ci sont cochées ✅.

Pour en savoir plus, voir cet article MDN à propos de input checkbox.

Select

Les <select> permettent de choisir une seule option parmi un groupe 🔽. Leur usage est approprié lorsque plusieurs options sont disponibles et qu'il n'est pas nécessaire pour l'usager de tous les voir.

Par exemple, pour choisir une plage horaire de livraison, il n'est pas nécessaire une fois sa plage trouvée de voir les autres options:

Voir le CodePen de Simon Arnold (@smnarnold).

Attributs de select

  • name nom de référence lorsque le formulaire est soumis.
  • multiple permet la sélection de plusieurs options.
  • disabled permet d'afficher en lecture seule le <select>.

Attributs d'option

  • value indique la valeur associée au <select>. Ainsi lorsque le formulaire est soumis, la valeur associée au name est celle de l'option sélectionnée.
  • selected permet de spécifier à l'aide d'un booléen (true/false) si l'option devrait être sélectionnée. Si aucune valeur n'est attribuée, la simple présence de l'attribut suffit à sélectionner l'élément.
  • disabled permet d'afficher en lecture seule une option en particulier. Par exemple, la page horaire 15h dans l'exemple précédent est visible, mais n'est pas sélectionnable.

Pour en savoir plus, voir cet article MDN à propos de select.

Textarea

Similaire au champ texte de base, <textarea> permet de définir une zone de texte sur plusieurs lignes, permettant ainsi à l'usager d'inscrire un contenu plus long. Au besoin, cette boite de texte peut être redimensionée grâce à sa poignée dans le coin inférieur droit.

Voir le CodePen de Simon Arnold (@smnarnold).

Attributs de textarea

  • cols définit la largeur de base du textarea.
  • rows définit la hauteur de base du textarea.
  • Cette balise accepte aussi les mêmes attributs qu'un champ texte régulier, tel que: readonly, placeholder, required, minlength, maxlength, etc.

Pour en savoir plus, voir cet article MDN à propos de textarea.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme