Le ' La balise ' est utilisée pour définir une option qu'un utilisateur peut choisir dans un menu déroulant ou dans les listes de sélection des formulaires Web. Le ' ” permet aux développeurs de créer un ensemble d'options parmi lesquelles l'utilisateur peut choisir n'importe quelle option. Il est utilisé dans diverses applications telles que les sondages, les sites d'achat en ligne, les formulaires d'inscription, etc.
Cet article illustre la balise d'option en HTML avec des exemples pratiques :
- Qu'est-ce que la balise option et comment l'utiliser en HTML ?
- Création d'une liste déroulante
- Création d'une liste de saisie semi-automatique
Qu'est-ce que la balise option et comment l'utiliser en HTML ?
La balise d'option peut être utilisée avec le '
Exemple 1 : Création d'une liste déroulante
Le ' La balise ' est utilisée avec le '
< h2 > Langages de programmation h2 >
< étiqueter pour = 'arme prog' > Sélectionnez une arme de programmation : étiqueter >
< sélectionner identifiant = 'listes de programmes' >
< option valeur = '' > Choisir une option option >
< option valeur = 'c++' > C++ option >
< option valeur = '.filet' > Point net option >
< option valeur = 'nodejs' > Noeud js option >
sélectionner >
Dans l'extrait de code ci-dessus :
- Premièrement la ' <étiquette> ” tag est utilisé pour afficher les données et il est attribué avec le “
” tag en utilisant son “ pour ' attribut. - Après cela, le «
” est utilisé pour créer un environnement pour la liste déroulante. - Ensuite, le « La balise ' est utilisée pour créer des éléments de liste à placer en tant qu'éléments de liste déroulante.
Après avoir configuré la structure de la liste déroulante, appliquons maintenant un style de base :
étiqueter {bloc de visualisation;
marge inférieure : 5px ;
}
sélectionner {
rembourrage : 5px ;
rayon de bordure : 5 px ;
largeur : 200 pixels ;
}
L'explication des propriétés CSS est décrite ci-dessous :
- Tout d'abord, sélectionnez le ' étiqueter ” puis définissez les valeurs de “block” et “5px” au CSS “ afficher ' et ' marge inférieure ' propriétés.
- Ensuite, le « sélectionner ” est sélectionné et fournit les valeurs de “5px”, “5px” et “200px” au CSS “ rembourrage ”, “ rayon de bordure ' et ' largeur ” propriétés, respectivement. Ces propriétés sont utilisées pour améliorer la visibilité de l'utilisateur.
Après l'exécution des extraits de code ci-dessus, la page Web ressemble à ceci :
La sortie ci-dessus montre que la liste déroulante a été créée à l'aide du ' ” tag avec le “
Exemple 2 : création d'une liste de saisie semi-automatique
Le ' La balise ' est utilisée avec le '
< saisir taper = 'texte' identifiant = 'outils de programmation' liste = 'outils' >
< liste de données identifiant = 'outils' >
< option valeur = 'C++' >
< option valeur = 'Assemblée' >
< option valeur = '.Filet' >
< option valeur = 'PHP' >
< option valeur = 'Rubis' >
< option valeur = 'Rapide' >
< option valeur = 'Noeud js' >
< option valeur = 'Réagir' >
< option valeur = 'Mongo' >
< option valeur = 'Java' >
< option valeur = 'Python' >
liste de données >
Dans l'extrait de code ci-dessus :
- Tout d'abord, ajoutez le ' <étiquette> ” qui affiche le texte avec l'élément HTML.
- Ensuite, utilisez le '
” tag qui est rempli manuellement par l'utilisateur ou peut être rempli automatiquement par les options disponibles dans la liste de saisie semi-automatique. - Après cela, utilisez le '
” tag et définissez son “ identifiant ” valeur de l'attribut égale à la valeur de l'attribut “ liste ' attribut du ' ' étiqueter. - Ensuite, utilisez le ' » à l'intérieur de la balise «
Après l'exécution de l'extrait de code ci-dessus, la page Web apparaît comme ceci :
La sortie montre que la liste de saisie semi-automatique est créée en utilisant le ' ” tag avec la combinaison de “
Conclusion
Le ' ” permet au développeur de créer des options pour la liste d'options, à partir de laquelle l'utilisateur peut choisir n'importe quelle option. Cette balise '