Input turlari — checkbox, radio, range, color, file, hidden

~20 daq · HTML · Formalar

Muammodan boshlaylik

Buyurtma formasi. Foydalanuvchidan so'raladi:

• Yetkazib berish usuli — bittasini tanlash: kuryer, pochta yoki o'zi olib ketish
• Qo'shimchalar — istalgancha: sovg'a qadog'i, sug'urta, tez yetkazish
• Shartlarga rozilik — ha yoki yo'q
• Chek rasmi — fayl

Bularni matnli maydonlar bilan qilsangiz, foydalanuvchi "kuryer", "Kuryer", "kurer" deb har xil yozadi. Tanlov uchun maxsus maydonlar bor.

checkbox — ha yoki yo'q, ko'p tanlov

<label>
  <input type="checkbox" name="rozilik" required>
  Foydalanish shartlariga roziman
</label>

Bitta checkbox — ha/yo'q savoli. Belgilangan bo'lsa yuboriladi, belgilanmagan bo'lsa — umuman yuborilmaydi.

rozilik=on        ← belgilangan (value yozilmasa — "on")
(hech narsa)      ← belgilanmagan

Bir nechta tanlov

<fieldset>
  <legend>Qo'shimchalar</legend>
  <label><input type="checkbox" name="qoshimcha" value="qadoq"> Sovg'a qadog'i</label>
  <label><input type="checkbox" name="qoshimcha" value="sugurta" checked> Sug'urta</label>
  <label><input type="checkbox" name="qoshimcha" value="tez"> Tez yetkazish</label>
</fieldset>

qoshimcha=sugurta&qoshimcha=tez

• Bir xil name, har xil value
• checked — boshlang'ich holatda belgilangan
• JavaScript da: new FormData(form).getAll('qoshimcha') → ['sugurta', 'tez']

[!TIP] Checkbox ni <label> ichiga o'rang yoki for bilan bog'lang. Shunda faqat kichik kvadratchani emas, matnni bosish ham ishlaydi — telefonda barmoq bilan mitti kvadratchaga tegish qiyin.

radio — bittasini tanlash

<fieldset>
  <legend>Yetkazib berish</legend>
  <label><input type="radio" name="yetkazish" value="kuryer" checked> Kuryer</label>
  <label><input type="radio" name="yetkazish" value="pochta"> Pochta</label>
  <label><input type="radio" name="yetkazish" value="ozi"> O'zim olib ketaman</label>
</fieldset>

• Bir xil name — bitta guruh; guruhda faqat bittasi tanlanadi
• Boshqasini tanlash avvalgisini avtomatik bekor qiladi
• Klaviatura: guruhga Tab bilan kiriladi, ichida strelkalar bilan harakat
• <fieldset> + <legend> — ekran o'quvchi "Yetkazib berish, guruh, Kuryer, radio tugma, 3 tadan 1" deydi

yetkazish=kuryer

checkbox yoki radio?

[!WARNING] Radio guruhda name ni bir xil yozishni unutsangiz — har biri alohida guruh bo'lib qoladi va foydalanuvchi hammasini birdaniga tanlay oladi. Shuningdek, bitta radio tugmani qo'ymang — uni bekor qilib bo'lmaydi; ha/yo'q uchun checkbox ishlating.

Variantlar ko'p bo'lsa (5–7 dan ortiq) — radio o'rniga <select> qulayroq (18-dars).

range — slayder

<label for="byudjet">Byudjet: <output id="natija">5 000 000</output> so'm</label>
<input id="byudjet" name="byudjet" type="range" min="1000000" max="20000000" step="500000" value="5000000">

byudjet.addEventListener('input', () => {
  natija.textContent = Number(byudjet.value).toLocaleString('ru-RU');
});

• Aniq qiymat muhim bo'lmaganda: ovoz balandligi, yorqinlik, taxminiy narx oralig'i
• Standart holatda qiymat ko'rinmaydi — <output> bilan ko'rsating
• Aniq son kerak bo'lsa (yosh, miqdor) — type="number" qulayroq

color — rang tanlash

<label for="rang">Mavzu rangi</label>
<input id="rang" name="rang" type="color" value="#10b981">

• Operatsion tizimning rang tanlash oynasi ochiladi
• Qiymat doim #rrggbb formatida (#10b981)
• value faqat shu formatda: red yoki #fff ishlamaydi

file — fayl yuklash

<form action="/yuklash" method="post" enctype="multipart/form-data">
  <label for="chek">Chek rasmi</label>
  <input id="chek" name="chek" type="file" accept="image/*">
  <button>Yuborish</button>
</form>

Fayl yuborish uchun formada ikkita shart:

1. method="post" — GET fayl yubora olmaydi
2. enctype="multipart/form-data" — busiz faqat fayl nomi ketadi, mazmuni emas

Atributlar:

chek.addEventListener('change', () => {
  const fayl = chek.files[0];
  console.log(fayl.name, fayl.size, fayl.type);  // "chek.jpg" 245760 "image/jpeg"
});

[!WARNING] accept — faqat qulaylik: fayl tanlash oynasida mos fayllarni ko'rsatadi, lekin foydalanuvchi "Barcha fayllar" ni tanlab istalgan faylni yuklay oladi. Fayl turi va hajmini serverda albatta tekshiring — aks holda saytga zararli fayl yuklanishi mumkin.

hidden — yashirin maydon

<form action="/izoh" method="post">
  <input type="hidden" name="dars_id" value="17">
  <input type="hidden" name="csrf_token" value="a8f3k2...">
  <label for="izoh">Izoh</label>
  <textarea id="izoh" name="izoh"></textarea>
  <button>Yuborish</button>
</form>

• Sahifada ko'rinmaydi, lekin forma bilan birga yuboriladi
• Foydalanuvchi kiritmaydigan, lekin server bilishi kerak bo'lgan ma'lumot: qaysi dars, qaysi mahsulot, CSRF himoya tokeni

[!WARNING] "Yashirin" — faqat ko'rinishda. DevTools da har kim qiymatni o'zgartira oladi. <input type="hidden" name="narx" value="100000"> dagi narxga ishonmang — server narxni o'z bazasidan olsin. Hidden maydon — faqat foydalanuvchi o'zgartirsa ham zarar bo'lmaydigan ma'lumot uchun.

Boshqa turlar — qisqacha

Nima uchun shunday?

Nima uchun checkbox belgilanmaganda hech narsa yuborilmaydi — rozilik=off yuborsa mantiqiyroq emasmi?

Bu 1990-yillardagi qaror va u orqaga moslik uchun saqlanib qolgan. O'sha paytdagi g'oya: forma faqat tanlangan narsalarni yuboradi — xuddi qog'oz anketada faqat belgilangan katakchalar hisoblanganidek. Amalda bu shuni anglatadiki, server "maydon kelmadi" ni "yo'q" deb tushunishi kerak. Ko'p frameworklar bu uchun hiyla ishlatadi: checkbox dan oldin bir xil nomli <input type="hidden" name="rozilik" value="0"> qo'yiladi — belgilanmasa hidden qiymat ketadi, belgilansa — checkbox qiymati. Bu qoidani bilish forma ma'lumotlari bilan ishlaganda ko'p vaqtni tejaydi.

Xulosa

Eslab qoling:

• checkbox — ha/yo'q yoki ko'p tanlov; belgilanmasa yuborilmaydi; getAll()
• radio — bir xil name li guruhdan bittasi; fieldset + legend bilan
• range — taxminiy qiymat; <output> bilan ko'rsating
• color — #rrggbb
• file — method="post" + enctype="multipart/form-data"; accept faqat qulaylik, server tekshiradi
• hidden — ko'rinmaydi, lekin o'zgartirilishi mumkin — ishonmang
• Har doim <label> — matnni bosish ham ishlasin

Keyingi dars

18-dars: Select, Textarea, Button — ishlatish va farqlari