Partie 2 : Éléments Select, Radio/Checkbox et Button
Les formulaires HTML sont devenus omniprésents alors que les organisations tentent de se connecter avec leurs clients. Par conséquent, il est impératif de les connaître pour quiconque apprend à créer des sites Web et/ou des applications Web. Dans cette courte série sur les formulaires HTML, nous nous familiarisons avec les contrôles de formulaire en en créant un qui accepte les coordonnées de l’utilisateur pour un abonnement hypothétique à une newsletter ou une adhésion à un site. Dans partie 1, nous avons appris à utiliser les éléments Form, Input et Label. Dans cet article, nous couvrirons les commandes Select, Radio/Checkbox et Button. Ensuite, dans la partie 3, nous apprendrons à utiliser CSS et JavaScript pour améliorer notre formulaire.
La démo revisitée
Vous trouverez le formulaire rempli sur codepen.io:
C’est vraiment juste une fourchette de Le projet de Konstantin Bychkov. Il a ajouté quelques améliorations CSS et JavaScript pour que son formulaire se démarque de votre course du moulin Formulaire HTML.
L’élément en HTML Comme le nom de la balise l’indique, le élément est utilisé pour créer une liste déroulante à partir de laquelle l’utilisateur peut sélectionner un ou plusieurs éléments. Les balises à l’intérieur du élément définissent les choix disponibles dans la liste déroulante. C’est un bon contrôle à utiliser lorsque vous avez entre trois et une cinquantaine d’éléments à présenter à l’utilisateur. Voici le balisage HTML pour la ville élément dans notre formulaire: <select class="form-select__select"> <option selected disabled>Choose your city:</option> <option>Tokyo</option> <option>Rome</option> <option>Paris</option> <option>Berlin</option> <option>Oslo</option> <option>Toronto</option> <option>Tulsa</option> <option>New York</option> <option>Washington DC</option> <option>Vienna</option> <option>Other</option> </select> Connaissez vos options Les tag prend en charge quelques attributs supplémentaires, dont quelques-uns sont utilisés dans l’option « Choisissez votre ville ». Voici les choisi et désactivée les attributs: choisi définit le texte de l’option qui apparaîtra par défaut, c’est-à-dire avant que l’utilisateur ne fasse une sélection. Le voici sous notre forme : Réglage de la désactivée L’attribut empêche l’utilisateur de sélectionner cette option. C’est utile pour les options qui fournissent des informations d’espace réservé. Vous remarquerez que les options désactivées sont grisées dans la liste déroulante : Les types « radio » et « case à cocher »
Nous avons déjà couvert l’élément dans partie 1. Comme évoqué ici, l’élément est le plus polyvalent de tous les contrôles de formulaire. Comment polyvalent? Jetez un œil au nombre de contrôles qu’il couvre :
- (par défaut si aucun attribut de type n’est fourni)
Nous ne couvrirons pas chacun d’entre eux ici, mais nous incluons les « case à cocher » et “radio” types dans notre formulaire pour le genre et “Souviens-toi de moi” champs, respectivement.
L’élément en HTML
Commençons par les boutons radio, puisqu’ils apparaissent en premier dans notre formulaire. Les boutons radio sont normalement présentés dans un groupe qui appartient à un ensemble d’options liées, mais mutuellement distinctes (comme le genre). Étant distinct, un seul bouton radio d’un groupe peut être sélectionné à la fois.
Jetez un œil à nos deux boutons radio de genre dans le code source :
<div class="form-checkbox">
<label class="form-checkbox__label">
<input class="form-checkbox__input" type="radio" name="gender">
<span class="form-checkbox__text">Male</span>
</label>
</div>
<div class="form-checkbox">
<label class="form-checkbox__label">
<input class="form-checkbox__input" type="radio" name="gender">
<span class="form-checkbox__text">Female</span>
</label>
</div>
Les voici à nouveau avec tous les attributs de classe supprimés pour une lisibilité plus facile :
<div>
<label>
<input type="radio" name="gender">
<span>Male</span>
</label>
</div>
<div>
<label>
<input type="radio" name="gender">
<span>Female</span>
</label>
</div>
On peut voir comment les membres d’un même groupe radio sont définis via le Nom attribut, ou, plus précisément, par la valeur de l’attribut name. Dans notre cas, les deux partagent le nom de « genre ». La sélection d’un bouton radio portant le même nom désélectionne automatiquement tout autre bouton radio sélectionné. Vous pouvez avoir autant de groupes radio sur une page que vous le souhaitez, tant que chaque groupe a son propre nom.
Bien que nous ne l’utilisions pas, l’option valeur L’attribut définit une valeur unique associée à chaque bouton radio. La valeur n’est pas visible pour l’utilisateur, mais c’est la valeur qui est envoyée au serveur sur le formulaire « soumettre » qui identifie le bouton radio sélectionné. Cette valeur a tendance à être en corrélation avec un ID dans la base de données.
L’élément
La case à cocher s’affiche sous la forme d’une case carrée qui est cochée (cochée) lorsqu’elle est activée. Semblables aux boutons radio, les cases à cocher sont utilisées pour permettre à un utilisateur de sélectionner une ou plusieurs options parmi un nombre limité de choix. La phrase clé étant que « une ou plusieurs » cases à cocher au sein d’un groupe peuvent être sélectionnées (nous ne voyons pas ce comportement dans notre formulaire car nous n’avons qu’une seule case à cocher).
Voici la case à cocher « Se souvenir de moi » dans le balisage HTML :
<div class="form-checkbox">
<label class="form-checkbox__label">
<input class="form-checkbox__input" type="checkbox">
<span class="form-checkbox__text">Remember me</span>
</label>
</div>
Et encore sans les cours :
<div>
<label>
<input type="checkbox">
<span>Remember me</span>
</label>
</div>