Formulaire intermédiaire

Heureusement, les formulaires ne se limitent pas aux <input type="text">. Ils acceptent une variété de champs adaptés a différents type d'information. Voyons quelques-uns de ces champs.

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 🍕

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.

• 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.

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:

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.

• 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.

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:

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.

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.

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.