Vidéo: HTML5 / CSS3 - 17 - Listes en HTML5 2025
La liste déroulante est un outil de sélection favori des développeurs Web HTML5 et CSS3. La liste déroulante a quelques éléments très utiles qui en font un énorme plébiscite:
-
Cela économise de l'espace sur l'écran. Seule la sélection actuelle est affichée. Lorsque l'utilisateur clique sur la liste, une série de choix déroulent puis disparaissent à nouveau une fois la sélection effectuée.
-
Limite l'entrée. Les seules choses que l'utilisateur peut choisir sont des choses que vous avez mises dans la liste. Cela rend beaucoup plus facile de gérer les entrées potentielles car vous n'avez pas à vous soucier des erreurs de frappe.
-
La valeur peut être différente de ce que voit l'utilisateur. Cela semble être un avantage étrange, mais il s'avère parfois très utile.
Le code de cette liste déroulante simple est le suivant:
basicSelect. htmlQuelle est ta couleur préférée? Rouge Vert Bleu Cyan Magenta Jaune Noir Blanc
L'objet est un peu différent de certains autres éléments d'entrée auxquels vous êtes habitué, comme
-
. Ces balises indiquent la liste entière.
-
Theobject a un attribut. Bien que l'objet comporte de nombreuses autres balises, généralement seul l'objet lui-même possède un attribut.
-
Il contient une série de paires. Chaque sélection individuelle est logée dans un ensemble.
-
Eachtag est associé à une valeur. La valeur est utilisée par le code. La valeur n'est pas nécessairement ce que l'utilisateur voit.
-
Le contenu est visible par l'utilisateur. Le contenu est ce que l'utilisateur voit réellement.
Les boîtes de sélection ne nécessitent pas le comportement du menu déroulant. Si vous le souhaitez, vous pouvez spécifier le nombre de lignes à afficher avec l'attribut. Dans ce cas, le nombre de lignes que vous spécifiez sera toujours visible sur l'écran.
