1. Sélection multiple et listes
Les formulaires HTML offrent de nombreuses possibilités pour interagir avec une page web. En plus des champs de texte et des boutons, les formulaires prennent en charge des éléments de sélection multiple et des listes, ce qui permet de créer des interfaces plus flexibles et confortables pour la saisie de données. Aujourd'hui, nous allons les découvrir.
En HTML, les formulaires offrent plusieurs moyens de créer des
éléments permettant de choisir dans une liste. Les éléments les plus
couramment utilisés pour ces objectifs sont
<select> et <option>, ainsi
que les cases à cocher et les boutons radio.
Liste déroulante : <select> et
<option>
La balise <select> crée une liste déroulante, tandis que
<option> est utilisée pour ajouter des
options à cette liste. L'utilisateur peut choisir
une ou plusieurs options dans la liste.
Choix unique : Par défaut,
<select> permet de choisir une
seule option.
<label for="country">Choisissez un pays:</label>
<select id="country" name="country">
<option value="ru">Russie</option>
<option value="us">USA</option>
<option value="de">Allemagne</option>
</select>
<label for="country">Choisissez un pays:</label>
<select id="country" name="country">
<option value="ru">Russie</option>
<option value="us">USA</option>
<option value="de">Allemagne</option>
</select>
Sélection multiple : En ajoutant l'attribut
multiple, l'utilisateur peut sélectionner
plusieurs options en maintenant la touche Ctrl (sur
Windows) ou Cmd (sur Mac) lorsqu'il clique.
<label for="languages">Choisissez des langues:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Russe</option>
<option value="en">Anglais</option>
<option value="de">Allemand</option>
</select>
<label for="languages">Choisissez des langues:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Russe</option>
<option value="en">Anglais</option>
<option value="de">Allemand</option>
</select>
Dans ce cas, les données de plusieurs éléments sélectionnés sont envoyées au serveur sous forme de tableau de valeurs.
Cases à cocher : <input type="checkbox">
Les cases à cocher sont des éléments qui permettent à l'utilisateur
de sélectionner une ou plusieurs options dans une liste donnée.
Chaque case est créée avec la balise
<input type="checkbox">.
<label><input type="checkbox" name="interests" value="sports"> Sports</label>
<label><input type="checkbox" name="interests" value="music"> Musique</label>
<label><input type="checkbox" name="interests" value="travel"> Voyages</label>
<label><input type="checkbox" name="interests" value="sports"> Sports</label>
<label><input type="checkbox" name="interests" value="music"> Musique</label>
<label><input type="checkbox" name="interests" value="travel"> Voyages</label>
Si toutes les cases à cocher ont le même attribut name,
alors lors de l'envoi du formulaire, les données de chaque case
cochée seront envoyées sous forme de tableau.
Boutons radio : <input type="radio">
Les boutons radio permettent à l'utilisateur de sélectionner une seule
option dans un groupe. Les boutons radio avec la même valeur pour
l'attribut name sont regroupés, et
l'utilisateur peut sélectionner une seule option dans ce groupe.
<p>Choisissez le sexe:</p>
<label><input type="radio" name="gender" value="male"> Masculin</label>
<label><input type="radio" name="gender" value="female"> Féminin</label>
<p>Choisissez le sexe:</p>
<label><input type="radio" name="gender" value="male"> Masculin</label>
<label><input type="radio" name="gender" value="female"> Féminin</label>
Les boutons radio sont pratiques pour choisir une option parmi plusieurs fixées, comme « Oui » ou « Non », le sexe, le groupe d'âge, etc.
2. Éléments des formulaires de différents types
En HTML, il existe de nombreux types de
<input> qui offrent diverses
possibilités pour la saisie de données. En plus de ceux que nous
avons déjà abordés, il y en a plusieurs autres utiles qui
permettent d'améliorer l'interaction avec les formulaires et de
recueillir des données plus précises.
Téléphone (type="tel")
Champ pour saisir des numéros de téléphone. Ce type permet de saisir des numéros de téléphone et, selon l'appareil, peut afficher un clavier numérique sur les appareils mobiles.
<label for="phone">Téléphone:</label>
<input type="tel" id="phone" name="phone" placeholder="+33 (123) 456-7890">
<label for="phone">Téléphone:</label>
<input type="tel" id="phone" name="phone" placeholder="+33 (123) 456-7890">
Recherche (type="search")
Champ pour saisir du texte, optimisé pour la recherche. Il peut inclure un bouton pour effacer le texte (selon le navigateur), et est souvent stylisé différemment d'un champ texte habituel.
<label for="search">Recherche:</label>
<input type="search" id="search" name="search" placeholder="Entrez votre recherche">
<label for="search">Recherche:</label>
<input type="search" id="search" name="search" placeholder="Entrez votre recherche">
GO TO FULL VERSION