Învățarea HTML Partea 32: Utilizarea selectării etichetelor și a grupului de opțiuni pe formularele HTML

Știi să faci un meniudropdown pe formular HTML? Un meniu derulant din formular este creat folosind o combinație de etichete <select> și <option>. Anterior, am explicat în articolul precedent că există mai multe etichete utilizate pentru a construi o formă, inclusiv eticheta <form>, eticheta <input>, tagul <textarea> și eticheta <select>.

În tutorialul anterior am discutatdespre utilizarea tagurilor <form>, tag-urilor <input> și <textarea>. În acest tutorial, în acest tutorial se discută eticheta <select> împreună cu eticheta <option>, multiple etichete cu atribut și optgroup pe eticheta <select> și atributul selectat de pe eticheta <option>. Pentru mai multe detalii despre aceste etichete și atribute, să ne uităm la tutorialul de mai jos:

Eticheta <select> și eticheta <option>

Această etichetă este folosită pentru a crea meniuri saulista alegerilor. Puteți specifica numărul de opțiuni de afișat folosind atributul size. Utilizând această etichetă, utilizatorii pot alege una dintre mai multe opțiuni oferite.

Alegerile pentru eticheta <select>scris în eticheta <option>. Eticheta <option> este o etichetă care conține o listă de opțiuni sub formă de elemente care vor fi selectate de utilizator. Această etichetă începe cu eticheta de deschidere <option> și se termină cu o etichetă de închidere </option>. Mai jos este un exemplu de scriere și folosire a etichetă <select> în HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Select pada form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
Pilih Bulan Lahir Anda :
<select name="bulanlahir">
<option value="Januari">Januari</option>
<option value="Februari">Februari</option>
<option value="Maret">Maret</option>
<option value="April">April</option>
<option value="Mei">Mei</option>
</select><br><br>
<input type="submit">
</form>
</body>
</html>

După executarea codului de mai sus în browser, acesta va apărea după cum se arată mai jos:

Eticheta <select> și eticheta <option> din formularul HTML

Atributul valoare din elementul opțiune devine valoarea care va fi trimisă serverului atunci când faceți clic pe butonul de trimitere.

Multe atribute ale etichetei <select>

Acest atribut este utilizat pentru a determina astautilizatorii pot selecta mai multe opțiuni dintre mai multe opțiuni oferite. Acest atribut este utilizat în eticheta <select>. Utilizarea mai multor atribute va fi mai ușoară dacă adăugați atributul size. Pentru a selecta elementele disponibile, faceți clic pe elemente în timp ce țineți tasta ctrl. În continuare, vă prezentăm un exemplu de scriere și utilizare a mai multor atribute în HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Multiple</title>
</head>
<body>
<form action="proses_input.php" method="get">
Pilih Buah Kesukaan Anda :<br>
<select name="namabuah" multiple>
<option value="Apel">Apel</option>
<option value="Manggis">Manggis</option>
<option value="Jeruk">Jeruk</option>
<option value="Nanas">Nanas</option>
<option value="Melon">Melon</option>
</select><br><br>
<input type="submit">
</form>
</body>
</html>

După executarea codului de mai sus în browser, acesta va apărea după cum se arată mai jos:

Mai multe atribute ale etichetei <select> în forma HTML

Atributul selectat în eticheta <opțiune>

Acest atribut este utilizat în eticheta <opțiune>, astfel încât eticheta<option> care are atributul selectat va afișa selecția de etichete ca element selectat (selecție implicită). Pe scurt, atributul selectat este utilizat pentru a determina elementul selectat mai întâi la încărcarea paginii. În continuare, vă prezentăm un exemplu de scriere a codului și de utilizare a atributelor selectate în HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Selected</title>
</head>
<body>
<form action="proses_input.php" method="get">
Pilih Hewan Kesukaan Anda :<br>
<select name="namahewan">
<option value="Kucing">Kucing</option>
<option value="Ular">Ular</option>
<option value="Bebek" selected>Bebek</option>
<option value="Kambing">Kambing</option>
<option value="Kelinci">Kelinci</option>
</select><br><br>
<input type="submit">
</form>
</body>
</html>

După executarea codului de mai sus în browser, acesta va apărea după cum se arată mai jos:

Optgroup etichete și atribute etichetă

Această etichetă <outgroup> este utilizată pentru grupareunele alegeri sau elemente (elemente <option>) din lista de selecție. Elementul <optgroup> se află în interiorul elementului <select>, iar elementul <option> este localizat în interiorul elementului <optgroup>. În interiorul acestei etichete există atribute de etichetă pe care le puteți utiliza pentru a eticheta fiecare grup cu un nume specific (denumirea grupului), unde valorile acestui atribut de etichetă sunt text.

Următorul este un exemplu de scriere și utilizare a atributului <optgroup> și etichetă în HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Optgroup</title>
</head>
<body>
<form action="proses_input.php" method="get">
Pilih Kelas Anda :
<select>
<optgroup label="Sekolah Menengah Pertama">
<option>Kelas VII</option>
<option>Kelas VIII</option>
<option>Kelas IX</option>
</optgroup>
<optgroup label="Sekolah Menengah Atas">
<option>Kelas X</option>
<option>Kelas XI</option>
<option>Kelas XII</option>
</optgroup>
</select><br><br>
<input type="submit">
</form>
</body>
</html>

Când codul HTML este executat, acesta arată într-un browser astfel: