HTML checkbox, radio, select va datalist: tanlash maydonlari

Qisqacha: Bir nechta variantdan bittasi kerak bo'lsa — radio tugmalar (bir xil name bilan). Bir nechtasini belgilash mumkin bo'lsa — checkbox. Variantlar ko'p bo'lsa — select ochiluvchi ro'yxati. Tayyor takliflar bor, lekin o'z matnini ham yozish mumkin bo'lsa — datalist. Belgilanmagan checkbox serverga umuman yuborilmaydi — bu eng muhim tuzoq.

Bu darsda

• Checkbox va radio tugmalarni to'g'ri guruhlay olasiz.
• select ga option, optgroup va bo'sh "Tanlang" variantini qo'sha olasiz.
• datalist bilan maydonga takliflar bera olasiz.
• Har bir maydon serverga aynan nima yuborishini ayta olasiz.
• Vaziyatga qarab to'g'ri tanlash maydonini tanlaysiz.

Oldin bilishingiz kerak: Son, sana, vaqt va rang maydonlari, label: har maydonning nomi.

1. Nega bu kerak?

«Bahor» choyxonasida uch xil joy bor: umumiy zal, ayvon va alohida xona. O'tgan darsda formaga sana, vaqt va mehmonlar sonini qo'shdik. Endi mehmon qayerda o'tirishini so'raymiz.

Oddiy matn maydoni qo'ysak, javoblar shunday bo'ladi:

Ali:     ayvonda
Malika:  tashqarida, supada
Jasur:   Ayvon
Nodira:  kabinka

"Tashqarida" — ayvonmi? "Kabinka" — alohida xonami? Administrator yana taxmin qiladi. Dastur esa "ayvonda" va "Ayvon" bir xil ekanini umuman bilmaydi.

Yechim: mehmonga yozdirmaslik, tanlatish. Variantlarni biz beramiz, u faqat bosadi. Serverga esa biz oldindan kelishgan aniq qiymat boradi: ayvon.

2. Checkbox: "ha" yoki "yo'q"

2.1 Bitta checkbox

Checkbox — belgilash katakchasi. Bosilsa ichida belgi paydo bo'ladi, yana bosilsa yo'qoladi. Saylov byulletenidagi katakchani eslang: belgi qo'yasiz yoki qo'ymaysiz.

<input type="checkbox" id="tort" name="tort">
<label for="tort">Tug'ilgan kun torti tayyorlansin</label>

Label katakchadan keyin turibdi — checkbox va radio uchun shunday odat. label darsida ko'rganimizdek, yozuvni bosish ham katakchani belgilaydi. Kichik katakchaga telefonda barmoq bilan tushish qiyin, shuning uchun bu juda muhim.

Endi eng muhim savol: serverga nima boradi?

on qayerdan chiqdi? Checkbox'da value yozilmasa, brauzer on so'zini yuboradi. Belgilanmagan checkbox esa so'rovda umuman bo'lmaydi — na nomi, na qiymati.

Diqqat: Server "tort yo'q" degan xabarni olmaydi. U shunchaki tort degan narsani ko'rmaydi. Server buni "belgilanmagan" deb tushunishi kerak. Bu farqni aniq ko'rsatish usulini Maydon holatlari va yashirin maydonlar darsida o'rganamiz.

2.2 value va checked

on dan ko'ra aniqroq qiymat berish mumkin:

<input type="checkbox" id="xabar" name="xabar"
       value="telegram" checked>
<label for="xabar">Tasdiqni Telegram'da yuboring</label>

• value="telegram" — belgilanganda xabar=telegram yuboriladi.
• checked — sahifa ochilganda katakcha oldindan belgilangan bo'ladi. Bu boolean atribut: qiymati yozilmaydi, borligining o'zi yetarli.

2.3 Bir nechta checkbox — bitta ro'yxat

«Bahor» qo'shimcha xizmatlar taklif qiladi. Mehmon ulardan istalganini — bittasini ham, hammasini ham, hech birini ham tanlashi mumkin:

<p>Qo'shimcha xizmatlar:</p>
<input type="checkbox" id="q-tort" name="qoshimcha" value="tort">
<label for="q-tort">Tort</label>
<input type="checkbox" id="q-stul" name="qoshimcha" value="stulcha">
<label for="q-stul">Bolalar stulchasi</label>
<input type="checkbox" id="q-musiqa" name="qoshimcha" value="musiqa">
<label for="q-musiqa">Jonli musiqa</label>

E'tibor bering:

• Uchalasining name qiymati bir xil: qoshimcha. value esa har xil.
• id lar har xil — har bir label o'z katakchasiga bog'lanishi uchun.

Mehmon tort va stulchani belgiladi. Yuboriladi:

qoshimcha=tort&qoshimcha=stulcha

Bitta nom ikki marta keldi. Server buni ro'yxat sifatida o'qiydi: ["tort", "stulcha"].

Maslahat: Ba'zi eski backend tillar (masalan, PHP) ro'yxatni faqat nom oxirida [] bo'lsa taniydi: name="qoshimcha[]". Aks holda faqat oxirgi qiymatni oladi. Bizning kursdagi Node.js serverlari ikkala shaklni ham tushunadi. Backend bilan qaysi shakl kelishilganini doim so'rang.

Diqqat: Formatlash va validatsiya darsida o'rnatgan html-validate bu kodda xato ko'rsatadi: Duplicate form control name "qoshimcha" — "Forma maydoni nomi takrorlangan". Bu HTML xatosi emas: W3C validatori jim turadi. html-validate shunchaki ehtiyotkor — u nomi takrorlangan checkbox'ni tasodifiy xato deb gumon qiladi. Guruh ataylab qilingan bo'lsa, .htmlvalidate.json dagi rules ga shu qatorni qo'shing:

"form-dup-name": ["error", { "shared": ["radio", "checkbox", "button", "submit"] }]

2.4 Uchinchi holat: "qisman"

Checkbox'ning ko'rinishda uchinchi holati ham bor: chiziqcha bilan "qisman belgilangan" (indeterminate). Masalan, "Hammasini tanlash" katakchasi — ro'yxatning bir qismi belgilanganda. Bu holatni faqat JavaScript o'rnatadi, HTML atributi yo'q. Serverga esa u oddiy belgilanmagan/belgilangan holat sifatida boradi.

Tekshirib ko'ring: Formada <input type="checkbox" name="sms" value="ha"> bor. Mehmon uni belgilamadi. Serverga nima boradi: sms=, sms=yo'q yoki hech narsa?

3. Radio: bir nechtadan faqat bittasi

3.1 Radio guruhi

Radio tugma (radio button) — dumaloq tugmacha. Bir guruhdagi radio tugmalardan faqat bittasi tanlanadi. Nomi eski radiopriyomniklardan kelgan: kanal tugmasini bossangiz, oldingi kanal tugmasi o'zi ko'tarilib chiqardi.

<p>Qayerda o'tirasiz?</p>
<input type="radio" id="joy-zal" name="joy" value="zal" checked>
<label for="joy-zal">Umumiy zal</label>
<input type="radio" id="joy-ayvon" name="joy" value="ayvon">
<label for="joy-ayvon">Ayvon</label>
<input type="radio" id="joy-xona" name="joy" value="xona">
<label for="joy-xona">Alohida xona</label>

Guruhni bir xil name yaratadi. Brauzer name="joy" bo'lgan hamma radio tugmani bitta guruh deb biladi. Ayvon bosilsa, zal o'zi o'chadi.

Mehmon ayvonni tanladi — yuboriladi:

joy=ayvon

Checkbox'dan farqi: bitta nom, har doim ko'pi bilan bitta qiymat.

3.2 Radio'ning to'rt odati

1. Hech biri tanlanmasa — hech narsa yuborilmaydi. Xuddi checkbox kabi. Shuning uchun ko'pincha bitta variantni checked bilan oldindan tanlab qo'yamiz.
2. Tanlovni bekor qilib bo'lmaydi. Radio tugmani qayta bosish uni o'chirmaydi. Faqat boshqasini tanlash mumkin. "Hech biri" varianti kerak bo'lsa — uni alohida radio qilib qo'shing: "Farqi yo'q".
3. Klaviatura. Tab guruhga bir marta kiradi — tanlangan tugmaga. Guruh ichida esa ↑ ↓ (yoki ← →) strelkalari bilan yuriladi va tanlanadi.
4. Guruh savoli. "Qayerda o'tirasiz?" savolini hozir p bilan yozdik. Ekran o'quvchi uni radio tugmalarga bog'lay olmaydi. To'g'ri usul — fieldset va legend. Ularni Guruhlash va natija elementlari darsida qo'shamiz.

Tekshirib ko'ring: Dasturchi uchta radio tugmaga name="zal", name="ayvon", name="xona" deb yozdi. Nima bo'ladi?

4. Ochiluvchi ro'yxat: select

4.1 Asosiy tuzilma

Variantlar 5–6 tadan ko'p bo'lsa, radio tugmalar ekranni to'ldirib yuboradi. Unda ochiluvchi ro'yxat (dropdown) qulayroq: yopiq turganda bitta qator joy oladi.

<label for="tadbir">Tadbir turi</label>
<select id="tadbir" name="tadbir">
  <option value="oddiy">Oddiy tushlik yoki kechki ovqat</option>
  <option value="tugilgan-kun">Tug'ilgan kun</option>
  <option value="ish">Ish uchrashuvi</option>
  <option value="fotiha">Fotiha to'yi</option>
</select>

• select — ro'yxatning o'zi. name va id unga yoziladi.
• option — bitta variant.
• value — serverga boradigan qiymat. option ichidagi matn esa — foydalanuvchi ko'radigan yozuv.

Mehmon "Tug'ilgan kun" ni tanladi → tadbir=tugilgan-kun.

Nega matn va qiymat alohida? Ertaga "Tug'ilgan kun" yozuvini "Tug'ilgan kun bazmi" ga o'zgartirsangiz, server buni sezmaydi — qiymat baribir tugilgan-kun. Saytni ruschaga tarjima qilsangiz ham shunday.

Diqqat: value yozilmasa, option ning matni yuboriladi. <option>Osh</option> → taom=Osh. Ishlaydi, lekin yozuvni o'zgartirishingiz bilan server buziladi. Har doim value yozing.

4.2 Birinchi variant — jimgina tanlangan

select ning eng ayyor tuzog'i: sukut bo'yicha birinchi option tanlangan bo'ladi. Yuqoridagi formada mehmon ro'yxatni ochmasa ham, serverga tadbir=oddiy boradi. Mehmon aslida tanlamadi — lekin server "oddiy tushlik" deb biladi.

Boshqa variantni oldindan tanlash uchun — selected:

<option value="tugilgan-kun" selected>Tug'ilgan kun</option>

4.3 "Tanlang..." varianti

Mehmon ongli ravishda tanlashi kerak bo'lsa, birinchi qatorga bo'sh variant qo'yamiz:

<label for="tadbir">Tadbir turi</label>
<select id="tadbir" name="tadbir">
  <option value="">— Tanlang —</option>
  <option value="oddiy">Oddiy tushlik yoki kechki ovqat</option>
  <option value="tugilgan-kun">Tug'ilgan kun</option>
</select>

Endi mehmon tanlamasa, tadbir= (bo'sh qiymat) boradi. Server "tanlanmagan" ekanini aniq biladi. Keyinroq bu maydonga required qo'shamiz — shunda brauzer tanlanmagan ro'yxat bilan formani umuman yubormaydi. Buni Brauzer validatsiyasi darsida ko'ramiz.

4.4 O'chirilgan variant: disabled

<option value="ayvon" disabled>Ayvon (qishda yopiq)</option>

Variant ro'yxatda ko'rinadi, lekin kulrang va tanlab bo'lmaydi. Foydalanuvchi "ayvon bor, faqat hozir yopiq" ekanini biladi. Butunlay olib tashlaganda u "ayvon umuman yo'q ekan" deb o'ylardi.

4.5 Guruhlar: optgroup

Uzun ro'yxatni mavzular bo'yicha bo'lish mumkin. Mehmon oldindan bitta taom buyurtma qilib qo'ysin — kelganda tayyor tursin:

<label for="taom">Oldindan tayyorlansin</label>
<select id="taom" name="taom">
  <option value="">— Kerak emas —</option>
  <optgroup label="Issiq taomlar">
    <option value="osh">Osh</option>
    <option value="lagmon">Lag'mon</option>
  </optgroup>
  <optgroup label="Shashliklar">
    <option value="jigar">Jigar kabob</option>
    <option value="qiyma">Qiyma kabob</option>
  </optgroup>
</select>

optgroup ning label i ro'yxatda qalin sarlavha bo'lib chiqadi. Uni tanlab bo'lmaydi va u serverga yuborilmaydi — faqat ko'rinish uchun.

4.6 Bir nechta tanlov: multiple va size

<label for="ichimlik">Ichimliklar</label>
<select id="ichimlik" name="ichimlik" multiple size="4">
  <option value="kok-choy">Ko'k choy</option>
  <option value="qora-choy">Qora choy</option>
  <option value="kompot">Kompot</option>
  <option value="ayron">Ayron</option>
</select>

• multiple — bir nechta variantni tanlash mumkin. Ro'yxat ochiluvchi emas, doim ochiq quti bo'ladi.
• size="4" — qutida bir vaqtda nechta qator ko'rinsin.

Ko'k choy va kompot tanlansa: ichimlik=kok-choy&ichimlik=kompot — checkbox'lar guruhi kabi.

Lekin kompyuterda bir nechtasini tanlash uchun Ctrl ni bosib turish kerak (macOS'da Cmd). Ko'p foydalanuvchi buni bilmaydi: ikkinchi variantni bosadi — birinchisi o'chib ketadi. Shuning uchun multiple kam ishlatiladi. Bir nechta tanlov uchun checkbox'lar deyarli har doim yaxshiroq.

Tekshirib ko'ring: Quyidagi ro'yxat bor. Mehmon uni ochmadi ham. Serverga nima boradi?

<select name="shahar"><option value="tosh">Toshkent</option><option value="sam">Samarqand</option></select>

5. Takliflar ro'yxati: datalist

Ba'zan tayyor variantlar bor, lekin mehmon boshqa javob ham yozishi mumkin. Masalan: "Biz haqimizda qayerdan eshitdingiz?" Ko'pchilik Instagram yoki Telegram deydi. Lekin kimdir "qo'shnim aytdi" deb yozishi mumkin.

<label for="manba">Biz haqimizda qayerdan eshitdingiz?</label>
<input type="text" id="manba" name="manba" list="manbalar">
<datalist id="manbalar">
  <option value="Instagram"></option>
  <option value="Telegram"></option>
  <option value="Do'stlar tavsiyasi"></option>
  <option value="Yandex Xaritalar"></option>
</datalist>

Qanday bog'landi:

• datalist ning id si — manbalar.
• input ning list atributi — shu id: list="manbalar". Xuddi label ning for i kabi bog'lanish.

Mehmon maydonga "Tel" deb yozsa, ostida "Telegram" taklifi chiqadi — bossa, to'ldiriladi. Lekin u "Qo'shnim aytdi" deb yozsa ham, forma buni qabul qiladi:

manba=Qo%27shnim+aytdi

%27 — apostrof, + — bo'sh joy. URL kodlashni o'tgan darsda ham ko'rgan edik.

select bilan farqi:

datalist takliflarining ko'rinishi brauzerga qarab farq qiladi va ularni CSS bilan bezab bo'lmaydi. Qat'iy tanlov kerak bo'lsa — hech qachon datalist emas, select yoki radio.

Maslahat: datalist faqat matn uchun emas. type="number", type="time" yoki type="color" maydonlariga ham takliflar berish mumkin. Masalan, time maydoniga eng ko'p band qilinadigan soatlarni (12:00, 19:00) taklif qilish.

6. Qaysi birini tanlash kerak?

Nega radio kam variantda yaxshiroq? Hamma variant bir qarashda ko'rinadi — mehmon ro'yxatni ochmasdan taqqoslaydi. select esa bitta qo'shimcha bosish talab qiladi va variantlarni yashiradi.

Bo'sh joyni to'ldiring: "Ha/yo'q" savoliga ikkita radio emas, bitta ko'pincha yetarli.

7. «Bahor»: joy turi va qo'shimchalar

Formamizga yangi maydonlarni qo'shamiz. Oldingi maydonlar (ism, telefon, email, sana, vaqt, necha kishi, izoh) o'zgarmadi — joy tejash uchun ularni ... bilan qisqartirdik.

<form action="https://example.com/bron" method="get">
  <!-- ... ism, telefon, email, sana, vaqt, odam, izoh ... -->

  <p>Qayerda o'tirasiz?</p>
  <p>
    <input type="radio" id="joy-zal" name="joy" value="zal"
           checked>
    <label for="joy-zal">Umumiy zal</label>
    <input type="radio" id="joy-ayvon" name="joy" value="ayvon">
    <label for="joy-ayvon">Ayvon</label>
    <input type="radio" id="joy-xona" name="joy" value="xona">
    <label for="joy-xona">Alohida xona</label>
  </p>

  <p>
    <label for="tadbir">Tadbir turi</label>
    <select id="tadbir" name="tadbir">
      <option value="">— Tanlang —</option>
      <option value="oddiy">Oddiy tushlik yoki kechki ovqat</option>
      <option value="tugilgan-kun">Tug'ilgan kun</option>
      <option value="ish">Ish uchrashuvi</option>
    </select>
  </p>

  <p>Qo'shimcha xizmatlar:</p>
  <p>
    <input type="checkbox" id="q-tort" name="qoshimcha"
           value="tort">
    <label for="q-tort">Tort</label>
    <input type="checkbox" id="q-stul" name="qoshimcha"
           value="stulcha">
    <label for="q-stul">Bolalar stulchasi</label>
  </p>

  <p>
    <label for="manba">Biz haqimizda qayerdan eshitdingiz?</label>
    <input type="text" id="manba" name="manba" list="manbalar">
    <datalist id="manbalar">
      <option value="Instagram"></option>
      <option value="Telegram"></option>
    </datalist>
  </p>

  <button type="submit">Band qilish</button>
</form>

Malika ayvonni, tug'ilgan kunni, tort va stulchani tanladi, manbaga "Instagram" yozdi. So'rovning yangi qismi:

joy=ayvon&tadbir=tugilgan-kun&qoshimcha=tort&qoshimcha=stulcha&manba=Instagram

8. Hujumchi nigohi

Tanlash maydonlari "xavfsiz" tuyuladi: mehmon faqat biz bergan variantlardan tanlaydi-ku. Aslida unday emas.

Hujum 1: variantni o'zgartirish. DevTools ning Elements panelida istalgan option ning value sini o'zgartirish mumkin. Masalan, value="zal" ni value="vip-bepul" ga. Yoki URL'ga qo'lda joy=vip-bepul yozish. Server bu so'rovni oddiy tanlovdan farqlay olmaydi.

Hujum 2: narx qiymatda. Ba'zi boshlovchilar narxni to'g'ridan-to'g'ri value ga yozadi:

Noto'g'ri:

<label for="taom">Taom</label>
<select id="taom" name="narx">
  <option value="35000">Osh — 35 000 so'm</option>
</select>

Hujumchi value ni 1 ga o'zgartiradi — va oshni 1 so'mga "sotib oladi".

Himoya:

• value ga faqat nima tanlanganini yozing (osh), narxni emas. Narxni server o'z bazasidan oladi.
• Server kelgan har bir qiymatni ruxsat etilganlar ro'yxati bilan solishtiradi: joy faqat zal, ayvon yoki xona bo'lishi mumkin. Boshqa har qanday qiymat — rad.
• datalist maydoni oddiy matn: unga istalgan narsa yozilishi mumkin. Server uni ism kabi tekshiradi — uzunligi va belgilari bilan.

Qoida: formadagi variantlar — foydalanuvchi uchun qulaylik. Server esa "brauzerdan kelgan hamma narsa — begona odamning so'zi" deb ishlaydi.

9. Ko'p uchraydigan xatolar

9.1 Radio tugmalar turli name bilan

Uchala variantni ham tanlash mumkin bo'lib qoladi va ularni o'chirib bo'lmaydi. Tuzatish: guruhdagi hamma radio'ga bir xil name.

9.2 Checkbox'lar bir xil id bilan

name ni bir xil qilaman deb id ni ham ko'chirib qo'yish. Natija: har qanday label bosilganda faqat birinchi katakcha belgilanadi. id sahifada takrorlanmasligi kerak. Tuzatish: name — bir xil, id — har xil (q-tort, q-stul).

9.3 select da "Tanlang" varianti yo'q

Mehmon ro'yxatga tegmaydi, server esa birinchi variantni oladi. Statistikada "hamma oddiy tushlikka keladi" degan noto'g'ri xulosa chiqadi. Tuzatish: birinchi qatorga <option value="">— Tanlang —</option>.

9.4 value siz option

Yozuv matni yuboriladi va uni o'zgartirishingiz bilan server buziladi. Tuzatish: har bir option ga barqaror value.

9.5 Belgilanmagan checkbox'ni server kutadi

Server tort qiymatini o'qishga harakat qiladi va uni topmay xato beradi. Tuzatish: server kodida "yo'q bo'lsa — belgilanmagan" deb hisoblash (yoki yashirin maydon usuli).

9.6 datalist bilan qat'iy tanlov

"Faqat Toshkent, Samarqand yoki Buxoro" kerak edi, lekin datalist ishlatildi. Mehmon "Tashkent" deb yozdi — forma qabul qildi. Tuzatish: qat'iy ro'yxat uchun select.

10. Mashqlar

1-mashq (oson): Qaysi maydon?

Har bir savol uchun tanlash maydonini ayting: checkbox, checkbox'lar guruhi, radio, select yoki datalist.

1. "Shaxsiy ma'lumotlarimni qayta ishlashga roziman."
2. To'lov usuli: naqd, karta, Click, Payme.
3. O'zbekistonning 14 ta hududidan birini tanlang.
4. Pitsaga qo'shimchalar: pishloq, qo'ziqorin, zaytun, qalampir.
5. Kasbingiz (eng ko'p uchraydiganlari taklif qilinadi, lekin o'zingiz yozishingiz mumkin).

2-mashq (o'rta): Nima yuboriladi?

<form action="https://example.com/buyurtma">
  <input type="checkbox" id="non" name="non" checked>
  <label for="non">Non</label>
  <input type="checkbox" id="salat" name="salat" value="ha">
  <label for="salat">Salat</label>
  <input type="radio" id="t-naqd" name="tolov" value="naqd">
  <label for="t-naqd">Naqd</label>
  <input type="radio" id="t-karta" name="tolov" value="karta">
  <label for="t-karta">Karta</label>
  <label for="choy">Choy</label>
  <select id="choy" name="choy">
    <option>Ko'k</option>
    <option value="qora">Qora</option>
  </select>
  <button type="submit">Yuborish</button>
</form>

Mehmon hech narsaga tegmay, darhol "Yuborish" ni bosdi. So'rovdagi qismlarni to'ldiring:

• non qiymati:
• Salat so'rovda bormi (ha/yo'q):
• To'lov so'rovda bormi (ha/yo'q):
• choy qiymati:

3-mashq (qiyin): Taksi chaqirish formasi

Taksi xizmati uchun forma yozing:

• Tarif (radio): Ekonom, Komfort, Biznes. Ekonom oldindan tanlangan.
• Qo'shimchalar (checkbox'lar): bolalar o'rindig'i, yuk uchun joy, konditsioner.
• To'lov usuli (select): naqd, karta, Click, Payme — "Tanlang" varianti bilan. Payme vaqtincha ishlamayapti.
• Manzil (datalist bilan matn): "Chorsu bozori", "Toshkent xalqaro aeroporti", "Shimoliy vokzal" takliflari.

Har bir maydonga label, har bir variantga barqaror value bering.

<form action="https://example.com/taksi" method="get">
  <p>Tarif:</p>
  <p>
    <input type="radio" id="t-ekonom" name="tarif" value="ekonom"
           checked>
    <label for="t-ekonom">Ekonom</label>
    <input type="radio" id="t-komfort" name="tarif"
           value="komfort">
    <label for="t-komfort">Komfort</label>
    <input type="radio" id="t-biznes" name="tarif" value="biznes">
    <label for="t-biznes">Biznes</label>
  </p>
  <p>Qo'shimchalar:</p>
  <p>
    <input type="checkbox" id="q-bola" name="qoshimcha"
           value="bola-orindigi">
    <label for="q-bola">Bolalar o'rindig'i</label>
    <input type="checkbox" id="q-yuk" name="qoshimcha" value="yuk">
    <label for="q-yuk">Yuk uchun joy</label>
    <input type="checkbox" id="q-kond" name="qoshimcha"
           value="konditsioner">
    <label for="q-kond">Konditsioner</label>
  </p>
  <p>
    <label for="tolov">To'lov usuli</label>
    <select id="tolov" name="tolov">
      <option value="">— Tanlang —</option>
      <option value="naqd">Naqd</option>
      <option value="karta">Karta</option>
      <option value="click">Click</option>
      <option value="payme" disabled>Payme (vaqtincha yo'q)</option>
    </select>
  </p>
  <p>
    <label for="manzil">Qayerga boramiz?</label>
    <input type="text" id="manzil" name="manzil" list="joylar">
    <datalist id="joylar">
      <option value="Chorsu bozori"></option>
      <option value="Toshkent xalqaro aeroporti"></option>
      <option value="Shimoliy vokzal"></option>
    </datalist>
  </p>
  <button type="submit">Taksi chaqirish</button>
</form>

11. Real ishda

• Filtrlar. Uzum Market yoki OLX'dagi chap panel — checkbox'lar (brendlar), radio (saralash) va select (shahar). Har bir onlayn do'konda bor.
• Dizayn tizimlari. Brauzerning standart katakchasi va ro'yxati har joyda har xil ko'rinadi. Kompaniyalar ularni CSS bilan bezaydi. Oddiy holatda accent-color bitta qator bilan rangini o'zgartiradi — Forma elementlarini zamonaviy stillash darsida. select ni to'liq bezash imkoniyati esa yaqinda paydo bo'ldi — Zamonaviy forma imkoniyatlari darsida.
• Backend bilan kelishuv. Frontend va backend dasturchilar value ro'yxatini birga belgilaydi: zal, ayvon, xona. Bu ro'yxat ko'pincha API hujjatida yoziladi va o'zgartirilmaydi.
• Intervyuda: "Radio va checkbox farqi?", "Belgilanmagan checkbox nima yuboradi?" — ko'p beriladigan savollar.

Xulosa

• Checkbox — "ha/yo'q" yoki bir nechta tanlov; belgilanmagani umuman yuborilmaydi, value siz belgilangani esa on yuboradi.
• Radio guruhini bir xil name yaratadi; faqat bitta tanlanadi va uni bekor qilib bo'lmaydi.
• select da birinchi variant jimgina tanlanadi — ongli tanlov uchun <option value="">— Tanlang —</option> qo'ying.
• option ga har doim barqaror value yozing; optgroup — guruhlash, disabled — ko'rinadi, lekin tanlanmaydi.
• multiple noqulay — bir nechta tanlov uchun checkbox'lar yaxshiroq.
• datalist — faqat takliflar; erkin javob ham qabul qilinadi.
• Brauzerdagi variantlar — qulaylik; server har bir qiymatni ruxsat etilganlar ro'yxati bilan tekshiradi.

Keyingi dars: Tugmalar va yuborish — forma ichidagi button nega o'zicha formani yuboradi va bitta formada bir nechta tugmani qanday ishlatish kerak.

Manbalar

• MDN: <input type="checkbox">, <input type="radio">, <select>, <optgroup>, <datalist> — developer.mozilla.org
• WHATWG HTML: "Form submission" (qaysi maydonlar yuboriladi) — html.spec.whatwg.org