Bienvenue à ce nouveau tuto 🙂 . Dans cette partie , nous allons apprendre comment ajouter des listes déroulantes dans un formulaire HTML.
accès rapide
La démo
mettre ici la vidéo de la démonstration
Syntaxe
Le tag HTML <select> est utilisé pour définir une liste déroulante qui apparaît lorsque l’utilisateur clique sur l’élément de formulaire et permet à l’utilisateur de sélectionner l’une des options.
Pour déterminer les différents choix , nous pouvons utiliser la balise <option> qui sera intégrée au <select>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ma page web</title>
</head>
<body>
<h1>development web</h1>
<form>
<select>
<option value="books">Livres</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>
Les divers attributs de la liste
Nous pouvons ajouter divers attributs pour la liste à savoir :
- <OPTION> pour introduire chaque option de la liste.
- <OPTION SELECTED> pour sélectionner une option par défaut .
- <SELECT MULTIPLE> cet attribut autorise de sélectionner plusieurs options dans la liste.
- SIZE= … : pour préciser le nombre de lignes visibles. S’il y a plus d’options, la liste pourra être parcourue à l’aide d’une barre de défilement.
Option groupe <optgroupe>
Pour combiner plusieurs options dans un groupe, nous pouvons utiliser la balise <optgroup>.
Le contenu du tag <optgroup> va donner un titre qui sera affiché en gras.
<form>
<label for="pays">Dans quel pays habitez-vous ?</label><br />
<select name="pays" id="pays">
<optgroup label="Europe">
<option value="france">France</option>
<option value="espagne">Espagne</option>
</optgroup>
<optgroup label="Amérique">
<option value="canada">Canada</option>
<option value="etats-unis">Etats-unis</option>
</optgroup>
<optgroup label="Asie">
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</optgroup>
</select>
</form>
Dans cette partie , nous avons appris comment ajouter des listes déroulantes dans un formulaire HTML.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons commencer insérer un groupement de champs dans un formulaire HTML.