Mokymasis HTML 32 dalies: „Tag Select“ ir „Optgroup“ naudojimas HTML formose

Ar mokate sudaryti meniu?išskleidžiamasis HTML formos? Išskleidžiamasis formos blankas sukuriamas naudojant žymas <select> ir <option>. Anksčiau aiškinau ankstesniame straipsnyje, kad formuojant formas yra naudojamos kelios žymės, įskaitant žymą <form>, žymą <input>, <textarea> ir <select> žymą.

Ankstesniame vadove mes diskutavomeapie <form> žymų, <input> ir <textarea> žymų naudojimą. Na, šiame vadove aptariama žyma <select> kartu su žyme <option>, kelių atributų ir optgroup etiketės <select> žymoje bei pasirinktas atributas <option> žymoje. Norėdami gauti daugiau informacijos apie šias žymas ir atributus, pažiūrėkime į žemiau pateiktą mokymo programą:

Žyma <select> ir <option>

Ši žyma naudojama sudaryti meniu arbapasirinkimų sąrašas. Galite nurodyti rodomų pasirinkimų skaičių naudodami dydžio atributą. Naudodami šią žymą, vartotojai gali pasirinkti vieną iš kelių pateiktų parinkčių.

<select> žymos pasirinkimaiparašyta žyme <option>. <option> žyma yra žyma, kurioje yra pasirinkimų sąrašas elementų pavidalu, kuriuos pasirinks vartotojas. Ši žyma prasideda atidarymo žyma <option> ir baigiasi uždarymo žyma </option>. Žemiau pateiktas žymos <rinkimas> rašymo ir naudojimo HTML pavyzdys:

<!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>

Atlikus aukščiau pateiktą kodą naršyklėje, jis pasirodys taip, kaip parodyta žemiau:

HTML formos žymėjimas <select> ir <option>

Parinkties elemento vertės atributas tampa verte, kuri bus išsiųsta į serverį, kai spustelėsite mygtuką „Pateikti“.

Keli <select> žymos atributai

Šis požymis naudojamas tam nustatytivartotojai gali pasirinkti daugiau nei vieną pasirinkimą iš kelių pateiktų. Šis atributas yra naudojamas <select> žymoje. Naudoti kelis atributus bus lengviau, jei pridėsite dydžio atributą. Norėdami pasirinkti galimus elementus, spustelėkite elementus, laikydami paspaudę „Ctrl“ mygtuką. Toliau pateiktas kelių atributų rašymo ir naudojimo HTML pavyzdžiai:

<!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>

Atlikus aukščiau pateiktą kodą naršyklėje, jis pasirodys taip, kaip parodyta žemiau:

Keli <select> žymos atributai HTML formoje

Atributas, pasirinktas žyme <option>

Šis atributas yra naudojamas žyme <option>, taigi ir žyma<opcija>, kuriam pasirinktas atributas, kaip pažymėtą elementą rodys žymės pasirinkimą (numatytasis pasirinkimas). Trumpai tariant, pasirinktas atributas yra naudojamas elementui, kuris pirmiausia pasirinktas, kai puslapis įkeliamas, nustatyti. Toliau pateiktas kodo rašymo ir pasirinktų atributų naudojimo HTML pavyzdžiai:

<!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>

Atlikus aukščiau pateiktą kodą naršyklėje, jis pasirodys taip, kaip parodyta žemiau:

„Optgroup“ žymos ir etikečių atributai

Ši <outgroup> žyma naudojama grupavimuikai kurie pasirinkimai ar elementai (<option> elementai) pasirinkimų sąraše. Elementas <optgroup> yra elemento <select> viduje, o <option> elementas yra elemento <optgroup>. Šios etiketės viduje yra etikečių atributai, kuriuos galite naudoti žymėdami kiekvieną grupę konkrečiu pavadinimu (grupės pavadinimas), kur šio etiketės atributo reikšmės yra tekstas.

Šis pavyzdys yra žymos <optgroup> ir etiketės atributo HTML rašymas ir naudojimas HTML formatu:

<!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>

Kai vykdomas HTML kodas, jis atrodo naršyklėje taip: