Sélectionnez la balise en HTML-tutoriel HTML-php.cn

La balise Select en HTML active une fonctionnalité de sélection dans la liste des options, comme un menu déroulant ou un menu à sélection multiple. Il s'agit d'une balise qui peut être utilisée sous la forme du code HTML utilisé pour créer et implémenter une page Web. La syntaxe est la suivante : , où chaque élément de la liste sera entouré de la balise d'option et permettra la fonction de sélection de l'utilisateur. Pour faciliter d'autres méthodes de sélection telles que le groupe opt et la sélection multiple, l'option La balise peut être utilisée à l'intérieur de la balise tag, respectivement.

Syntaxe de la balise Select en HTML

La balise Select peut utiliser étiquette.

La syntaxe de cette balise est la suivante :

<select>
<option> Value  </option>
<option> Value  </option>
</select>

Copier après la connexion

La syntaxe ci-dessus une balise dans la liste de sélection est également possible. Cette syntaxe est la même que la syntaxe La balise consiste à créer un groupe d’options dans la liste. Cela créera plusieurs options en tant que groupe et l'en-tête du groupe sera affiché en gras.

La syntaxe est la suivante :

<select >
<optgroup label  = "labelname">
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<optgroup>
</select>

Copier après la connexion

taille : La syntaxe ci-dessus peut également définir la taille afin qu'elle n'affiche que les tailles définies

option uniquement, c'est comme :

<select value="" size="4">
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

Copier après la connexion

remplissage automatique : balise de sélection également utilisée pour remplir automatiquement les valeurs du champ comme suit :

<select >
<option value=" " autocomplete="off"> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

Copier après la connexion

autofocus : nous pouvons nous concentrer sur une option spécifique de la liste à la fois comme suit. On ne peut utiliser qu'un seul autofocus sur une seule page.

<select autofocus>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

Copier après la connexion

lien : La balise Select est utilisée pour ouvrir le lien du formulaire via l'option spécifiée, telle que définie dans la syntaxe suivante :

<form action="" id="name">
</form>
<Select name="" form="Id_name">
<option value=" "> Content Name </option>
</select>

Copier après la connexion

obligatoire : Cette option dans la balise select définit une option obligatoire dans la liste définie avant la soumission effective du formulaire.

<select name="value" required>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

Copier après la connexion

espace réservé : Comme nous le savons, si nous utilisons une étiquette de sélection, il considérera la première option comme option par défaut, mais si nous voulons afficher une option par défaut, nous pouvons définir le mot-clé sélectionné à l'option spécifique comme suit :

<select name="value" >
<option value=" "> Content Name </option>
<option value=" " selected> Content Name </option>
</select>

Copier après la connexion

désactivé : une autre astuce utile dans la balise de sélection pour afficher l'option au format désactivé comme suit :

L'utilisation de celui-ci peut afficher l'option, mais aucune action n'est possible.

<select name="value" >
<option value=" " disabled> Content Name </option>
<option value=" "> Content Name </option>
</select>

Copier après la connexion

Exemples de balise Select en HTML

Voici les exemples suivants mentionnés ci-dessous.

Exemple n°1

Dans cet exemple, nous allons afficher une simple balise de sélection sous forme de liste de sélection, de groupe opt et pour sélectionner plusieurs options à la fois, comme indiqué ci-dessous :

Code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div-container {
display: table;
width: 100%;
}
.block {
display: table-cell;
padding: 10px;
}
</style>
</head>
<body>
<div class="div-container">
<div class="block">
<h4>Simple Select tag </h4>
<select name="Web Languages">
<option> HTML 5  </option>
<option> CSS 3</option>
<option> Bootstrap  </option>
<option>Angular </option>
<option> React JS </option>
<option> Vue JS</option>
<option>Python  </option>
<option>PHP</option>
</select> <br>
</div>
<div class="block" >
<h4>Optgroup Select tag </h4>
<select>
<optgroup label="2 wheeler">
<option value="Honda">Shine</option>
<option value="Suzuki">Access</option>
</optgroup>
<optgroup label="4 wheeler">
<option value="m">Mercedes</option>
<option value="o">Audi</option>
</optgroup>
</select>
</div>
<div class="block" >
<h4>Multiple Selection in Select tag </h4>
<select multiple>
<option> Green  </option>
<option> Orange</option>
<option> Blue </option>
<option>Red </option>
<option> Yellow </option>
</select>
</div>
</div>
</body>
</html>

Copier après la connexion

Sortie :

Sélectionnez la balise en HTML

Exemple n°2

Cet exemple définit comment ouvrir à partir du lien via