<select>
Misol
To‘rtta variantga ega ochiladigan ro‘yxat yarating:
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
<select> elementi ochiladigan ro‘yxat yaratish uchun ishlatiladi.
<select> elementi ko‘pincha foydalanuvchi kiritgan ma’lumotlarni yig‘ish uchun formada ishlatiladi.
name atributi forma yuborilgandan keyin forma ma’lumotlariga murojaat qilish uchun kerak (agar
name atributini tushirib qoldirsangiz, ochiladigan ro‘yxatdagi hech qanday ma’lumot yuborilmaydi).
id atributi ochiladigan ro‘yxatni yorliq (label) bilan bog‘lash uchun kerak.
<select> elementi ichidagi <option> teglari ochiladigan ro‘yxatdagi mavjud variantlarni belgilaydi.
Maslahat: Qulaylik (accessibility) bo‘yicha eng yaxshi amaliyotlarga rioya qilish uchun har doim <label> tegini qo‘shing!
Brauzerlarda qo‘llab-quvvatlash
| Element | |||||
|---|---|---|---|---|---|
| <select> | Ha | Ha | Ha | Ha | Ha |
Atributlar
| Atribut | Qiymat | Tavsif |
|---|---|---|
| autofocus | autofocus | Sahifa yuklanganda ochiladigan ro‘yxat avtomatik ravishda fokus olishi kerakligini belgilaydi |
| disabled | disabled | Ochiladigan ro‘yxat faolsizlantirilgan bo‘lishi kerakligini belgilaydi |
| form | form_id | Ochiladigan ro‘yxat qaysi formaga tegishli ekanini belgilaydi |
| multiple | multiple | Bir vaqtning o‘zida bir nechta variantni tanlash mumkinligini belgilaydi |
| name | name | Ochiladigan ro‘yxat uchun nomni belgilaydi |
| required | required | Formani yuborishdan oldin foydalanuvchi qiymat tanlashi shartligini belgilaydi |
| size | number | Ochiladigan ro‘yxatdagi ko‘rinadigan variantlar sonini belgilaydi |
Global atributlar
<select> tegi HTML’dagi global atributlarni ham qo‘llab-quvvatlaydi.
Hodisa atributlari
<select> tegi HTML’dagi hodisa atributlarini ham qo‘llab-quvvatlaydi.
Ko‘proq misollar
Misol
<select> ni <optgroup> teglari bilan ishlatish:
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
HTML DOM ma’lumotnomasi: Select obyekti
CSS darsligi: Formalarni bezash
Standart CSS sozlamalari
Yo‘q.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!