Maison > Article > interface Web > Balise d'option en HTML
Balise d'option en HTML
- WBOYoriginal
- 2024-09-04 16:24:571080parcourir
La balise Option est l'élément le plus utile du HTML, qui est utilisé dans la liste déroulante pour sélectionner les préférences utilisateur spécifiques dans la liste de sélection. À la fois, un utilisateur peut sélectionner une ou plusieurs options dans la liste donnée. C'est le principal avantage des balises d'option en HTML.
Syntaxe avec exemple
Voici la syntaxe qui nous aide à déterminer où exactement la balise d'option sera définie dans notre page Web ou HTML.
Syntaxe :
<select> <option value=""> option1 </option> <option value=""> option2 </option> <option value=""> option3 </option> <option value=""> option4 </option> </select>
Comme indiqué ci-dessus, est une balise utilisée pour créer une liste de données.
Avec l'aide de CSS, nous pouvons donner des effets à notre liste de sélection, capables de définir des positions comme relatives, absolues, etc., capables de définir la largeur et d'exécuter de nombreuses autres fonctions. La position de la liste déroulante est définie en deux valeurs, la position relative qui est utilisée pour afficher le contenu de la liste exactement juste en dessous du bouton de sélection de la liste. A l'aide de la position : absolue ;
Exemple :
Cela limitera l'utilisateur à sélectionner une seule option dans la liste de sélection.
<select name="State"> <option value="MH">Maharashtra</option> <option value="GJ"> Gujarat </option> <option value="MP"> Madhya Pradesh </option> <option value="RJ">Rajasthan </option> <option value="AP">Andhra Pradesh </option> </select>
De même, comme nous le savons tous, nous pouvons également sélectionner plusieurs options selon notre choix dans la liste de sélection.
Syntaxe :
<select multiple> <option value=""> option1 </option> <option value=""> option2 </option> <option value=""> option3 </option> <option value=""> option4 </option> </select>
Un exemple pour la même syntaxe est le suivant :
<select name="laptops" multiple> <option value="hp">HP</option> <option value="dell">Dell</option> <option value="lv">Lenovo</option> <option value="sony">Sony </option> </select>
Attributs de la balise option en HTML
- désactivé : Cet attribut est utilisé en définissant la valeur booléenne sous la forme vrai et faux. S'il est défini sur true, alors l'option de la liste sera désactivée ; sinon, c'est faux.
- label : Supposons que nous voulions donner du texte comme étiquette, alors c'est possible dans la balise d'option. Il considérera comme une valeur à cet élément.
- sélectionné : Dans la conception de la page Web, il arrive parfois que nous souhaitions afficher l'option comme déjà sélectionnée dans la vue d'affichage. Ainsi, en définissant les attributs sélectionnés sur les options, on peut afficher les options sélectionnées dans la liste. On ne peut afficher qu'un seul élément sélectionné dans la liste.
- valeur : on peut également définir la valeur de l'option dans la liste de sélection.
Exemples de Option Balise en HTML
Vous trouverez ci-dessous les différents exemples de balises Option en HTML :
Exemple n°1
Ceci est un exemple simple de liste de sélection incluant
Code :
<!DOCTYPE html> <html> <head> <title>Option tag in HTML</title> </head> <body> <h4>List of IIT colleges in INDIA</h4> <form> <select name = "dropdown"> <option value = "im" >IIT Madras</option> <option value = "id" >IIT Delhi</option> <option value = "ib" >IIT Bombay </option> <option value = "ikh" >IIT Kharagpur</option> <option value = "ikn">IIT Kanpur</option> <option value = "ir" >IIT Roorkee</option> <option value = "ig" >IIT Guwahati</option> <option value = "ih">IIT Hyderabad </option> <option value = "ii">IIT Indore</option> <option value = "ib">IIT Bhubaneswar</option> <option value = "it" >IIT Tirupati</option> <option value = "ib">IIT Bhilai</option> <option value = "ig">IIT Goa</option> <option value = "ij" >IIT Jammu</option> <option value = "idb">IIT Dhanbad </option> <option value = "ip">IIT Palakkad</option> <option value = "idhe">IIT Dharwad, Est</option> </select> </form> </body> </html>
Sortie :
Exemple n°2
Exemple d'affichage de
Code :
<!DOCTYPE html> <html> <head> <title>Option tag in HTML</title> </head> <body> <h4>Select your favourite Bakery product from the list</h4> <form> <select name = "dropdown"> <optgroup label="Cakes"> <option value = "BS" >Butterscotch Cake</option> <option value = "DC" >Dark Chocolate Cake</option> <option value = "FC" >Fruit Cake</option> <option value = "RC" >Rasmali Cake</option> </optgroup> <option value = "cc">Cupcakes</option> <option value = "vp" required>Veg Puff</option> <option value = "ap" disabled>Anda Puff</option> <option value = "cb">Crunchy Biscuits </option> <option value = "cob">Chocolate Biscuits</option> <option value = "clc">Choco Lava Cake</option> <option value = "wb" >White Bread</option> <option value = "bb">Brown Bread</option> <option value = "mf" selected>Muffin</option> <option value = "br" >Bread Roll</option> <option value = "bw">Brownie </option> <option value = "ps">Pastry</option> <option value = "vgs">Veg Grill Sandwich</option> </select> </form> </body> </html>
Sortie :
Exemple #3
Dans cet exemple, nous allons sélectionner plusieurs options dans la liste de données.
Code :
<!DOCTYPE html>
<html>
<body>
<h2>Top IT training Institutes in Pune </h2>
<form id="multidd">
<select id="multiselectopt">
<option> ABCIS Learning </option>
<option> MindScripts Technologies </option>
<option> Sysap technologies </option>
<option> IclassPune</option>
<option> IIHT</option>
<option> Magneto Academy </option>
<option> Certification Guru </option>
<option> I Cert Global </option>
<option> Technogeeks </option>
</select>
<input type="button" onclick="multipleFunc()" value="Select multiple options">
</form>
<p>Multiple options can be selected here. Press ctrl key and select multiple option from the list.</p>
<script>
function multipleFunc() {
document.getElementById("multiselectopt").multiple = true;
}
</script>
</body>
</html>
Sortie :
Conclusion
D'après toutes les informations ci-dessus, nous avons appris que l'option
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!