fieldset va legend, output, progress, meter: forma guruhlari va natija elementlari

Qisqacha: fieldset bog'liq maydonlarni bitta guruhga yig'adi, legend esa guruhga nom beradi. Ekran o'quvchi bu nomni guruhdagi maydonlar bilan birga o'qiydi, shuning uchun radio tugmalar guruhi doim fieldset ichida bo'lgani ma'qul. Natija ko'rsatish uchun uchta element bor: output — hisob natijasi, progress — jarayon qancha bajarilgani, meter — ma'lum oraliqdagi o'lchov.

Bu darsda

• fieldset va legend bilan forma maydonlarini nomli guruhlarga ajrata olasiz.
• Radio va checkbox guruhlarini ekran o'quvchi uchun to'g'ri belgilaysiz.
• fieldset disabled bilan butun guruhni birdaniga o'chirasiz va uning bitta istisnosini bilasiz.
• output nima uchun kerakligini va nega uning qiymati serverga yuborilmasligini tushunasiz.
• progress va meter farqini aytib, meter ga to'g'ri chegaralar bera olasiz.

Oldin bilishingiz kerak: Tanlash maydonlari: checkbox, radio, select, datalist, Maydon holatlari va yashirin maydonlar, label: har maydonning nomi.

1. Nega bu kerak?

«Bahor» choyxonasining bron formasi o'sib, o'nga yaqin maydonga yetdi. Endi ikki muammo paydo bo'ldi.

Birinchisi — ko'zi ojiz mijoz. U formani ekran o'quvchi bilan to'ldiradi va Tab bilan radio tugmaga o'tadi. Ekran o'quvchi shunday deydi: "Ayvon, radio tugma, 3 tadan 2-si". Qanday savolga javob berayotganini u eshitmaydi. Savol — "Qaysi joyni tanlaysiz?" — oddiy p ichida yozilgan. Ekran o'quvchi uni radio tugmalar bilan bog'lamaydi.

Ikkinchisi — uzun forma. Hamma maydon bir ro'yxatda turibdi: ism, telefon, sana, vaqt, joy, qo'shimchalar... Qaysi maydonlar bir mavzuga tegishli ekani ko'rinmaydi.

Qog'oz anketani eslang. Unda maydonlar ramkali bo'limlarga ajratilgan: "1. Shaxsiy ma'lumotlar", "2. Bron tafsilotlari". Bo'lim nomi ramkaning chizig'i ustiga yozilgan. HTML'da aynan shunday element bor: ramka — fieldset, uning nomi — legend.

2. fieldset va legend

2.1 Birinchi guruh

Maydonlar guruhi (fieldset) — bir mavzuga tegishli forma maydonlarini o'rab turadigan element. Guruh nomi (legend) — shu guruhning sarlavhasi.

<form method="get">
  <fieldset>
    <legend>Siz haqingizda</legend>
    <label for="ism">Ismingiz</label>
    <input type="text" id="ism" name="ism">
    <label for="telefon">Telefon</label>
    <input type="tel" id="telefon" name="telefon">
  </fieldset>

  <fieldset>
    <legend>Bron tafsilotlari</legend>
    <label for="sana">Sana</label>
    <input type="date" id="sana" name="sana">
    <label for="odam">Necha kishi</label>
    <input type="number" id="odam" name="odam" min="1">
  </fieldset>

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

Brauzer har bir fieldset atrofiga ingichka ramka chizadi. legend esa ramkaning yuqori chizig'i ustida turadi:

┌─ Siz haqingizda ──────────────────┐
│ Ismingiz [          ]             │
│ Telefon  [          ]             │
└───────────────────────────────────┘
┌─ Bron tafsilotlari ───────────────┐
│ Sana [        ]  Necha kishi [  ] │
└───────────────────────────────────┘

Ramka yoqmasa, uni keyinroq CSS bilan o'zgartirasiz yoki olib tashlaysiz. Guruhning ma'nosi esa saqlanib qoladi — biz aynan ma'no uchun fieldset qo'yamiz.

Ikki qat'iy qoida bor:

• legend — fieldset ning birinchi bolasi. Undan oldin hech qanday element turmaydi.
• Bitta fieldset da bitta legend bo'ladi.

2.2 Radio guruhi — fieldset ning asosiy ishi

Eng muhim holat — radio tugmalar. Ularning har biri o'z label iga ega: "Umumiy zal", "Ayvon". Lekin savolning o'zi ham nom talab qiladi. Uni legend beradi.

Oldin — savol oddiy paragrafda:

<p>Qaysi joyni tanlaysiz?</p>
<label>
  <input type="radio" name="joy" value="zal" checked> Umumiy zal
</label>
<label>
  <input type="radio" name="joy" value="ayvon"> Ayvon
</label>

Keyin — savol legend da:

<fieldset>
  <legend>Qaysi joyni tanlaysiz?</legend>
  <label>
    <input type="radio" name="joy" value="zal" checked>
    Umumiy zal
  </label>
  <label>
    <input type="radio" name="joy" value="ayvon"> Ayvon
  </label>
</fieldset>

Ekranda farq deyarli yo'q. Ekran o'quvchi esa endi taxminan shunday deydi: "Qaysi joyni tanlaysiz?, guruh. Umumiy zal, radio tugma, tanlangan, 2 tadan 1-si". Mijoz savolni ham, javobni ham eshitadi.

Checkbox guruhi ham xuddi shunday:

<fieldset>
  <legend>Qo'shimcha xizmatlar</legend>
  <label>
    <input type="checkbox" name="qoshimcha" value="tort"> Tort
  </label>
  <label>
    <input type="checkbox" name="qoshimcha" value="gul">
    Gullar
  </label>
</fieldset>

Bitta yolg'iz checkbox ("Shartlarga roziman") uchun fieldset kerak emas — uning label i yetarli.

2.3 Yaxshi legend qanday bo'ladi

Ekran o'quvchi legend ni guruhdagi har bir maydonda qayta o'qishi mumkin. Shuning uchun:

• legend qisqa bo'lsin: "Qaysi joyni tanlaysiz?" — yaxshi. Uch qatorli tushuntirish — yomon.
• Qo'shimcha tushuntirishni legend dan keyin oddiy p da yozing.
• fieldset ni ichma-ich qo'yish mumkin, lekin ikki qavatdan oshirmang. Aks holda ekran o'quvchi har maydonda uzun "yo'l"ni o'qiydi.

fieldset — faqat forma maydonlari uchun. Sahifaning oddiy bo'limlarini guruhlash uchun landmarklar darsidagi section bor. fieldset ning o'zi serverga hech narsa yubormaydi — uning ichidagi maydonlar odatdagidek yuboriladi.

Tekshirib ko'ring: Nega radio tugmalar guruhiga fieldset kerak, oddiy matn maydoniga esa kerak emas?

3. fieldset disabled: butun guruhni o'chirish

O'tgan darsda disabled ni ko'rdik: maydon o'chadi va serverga yuborilmaydi. fieldset ga disabled qo'ysangiz, uning ichidagi hamma maydon va tugma birdaniga o'chadi:

<fieldset disabled>
  <legend>Uyga yetkazib berish</legend>
  <label for="manzil">Manzil</label>
  <input type="text" id="manzil" name="manzil">
  <label for="vaqt">Qachon</label>
  <input type="time" id="vaqt" name="vaqt">
</fieldset>

manzil ham, vaqt ham kulrang bo'ladi va yuborilmaydi. Har biriga alohida disabled yozish shart emas.

3.1 Istisno: legend ichidagi maydon

Bitta qiziq qoida bor: fieldset ning birinchi legend i ichidagi maydonlar o'chmaydi.

<fieldset disabled>
  <legend>
    <label>
      <input type="checkbox" name="yetkazish">
      Uyga yetkazib berish kerak
    </label>
  </legend>
  <label for="manzil">Manzil</label>
  <input type="text" id="manzil" name="manzil">
</fieldset>

Checkbox ishlab turadi, manzil esa o'chgan. Bu qoida ataylab qilingan: "kerak" belgisi qo'yilganda guruhni yoqish mumkin bo'lsin. Yoqishning o'zini JavaScript bajaradi — uni keyingi qismlarda o'rganamiz. Hozir faqat bilib qo'ying: bunday naqshni real saytlarda ko'rasiz.

Tekshirib ko'ring: Yuqoridagi formada mijoz checkbox'ni belgilab, formani yubordi. URL'da manzil bo'ladimi?

4. output: hisob natijasi

4.1 Nima uchun kerak

Choyxona egasi tadbirlar uchun oldindan to'lov qoidasini o'zgartirdi (Fayl yuklash darsida u 100 000 so'm edi): endi har bir mehmon uchun 20 000 so'm. Mijoz "Necha kishi" maydoniga son yozishi bilan umumiy summani ko'rishi kerak.

Natijani span ga ham yozish mumkin edi. Lekin HTML'da buning uchun maxsus element bor. Natija elementi (output) — bir yoki bir nechta maydondan hisoblangan qiymatni ko'rsatadi.

<form method="get"
      oninput="jami.value = odam.valueAsNumber * 20000">
  <label for="odam">Necha kishi</label>
  <input type="number" id="odam" name="odam"
         min="1" value="2">

  <p>
    Oldindan to'lov:
    <output name="jami" for="odam">40000</output> so'm
  </p>

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

Mijoz 2 ni 5 ga o'zgartirsa, natija darhol 100000 bo'ladi.

Birinchi qatordagi oninput="..." — bu JavaScript: "maydon o'zgarganda summani qayta hisobla". Uni hozir tushunish shart emas, JavaScript'ni keyingi qismlarda o'rganamiz. HTML qismidan bizga uch narsa kerak:

• for="odam" — natija qaysi maydonlardan hisoblanganini aytadi. Bir nechta bo'lsa, id lar bo'sh joy bilan yoziladi: for="odam joy".
• name="jami" — natijaga nom beradi, JavaScript uni shu nom bilan topadi.
• Teg ichidagi 40000 — sahifa ochilgandagi boshlang'ich natija.

4.2 output nega span dan yaxshi

• Ma'no. Kodni o'qigan odam darhol tushunadi: bu — hisob natijasi.
• Bog'lanish. for natijani manba maydonlar bilan bog'laydi.
• Ovozli e'lon. Ko'p brauzerlarda output o'zgarganda ekran o'quvchi yangi qiymatni o'zi o'qib beradi. Ko'zi ojiz mijoz summa o'zgarganini eshitadi.

4.3 output serverga yuborilmaydi

output da name bor, lekin uning qiymati forma bilan yuborilmaydi. Yuqoridagi formadan keyin URL faqat shunday bo'ladi:

bron/?odam=5

Bu to'g'ri qaror. O'tgan darsdagi qoidani eslang: summani server o'zi hisoblaydi. output — faqat mijozga ko'rsatish uchun.

5. progress: jarayon qancha bajarildi

5.1 Aniq jarayon

Bron uch qadamdan iborat bo'lsin: sana tanlash, joy tanlash, tasdiqlash. Mijoz qayerda ekanini ko'rsin.

Jarayon chizig'i (progress) — ish qancha bajarilganini ko'rsatadi:

<label for="qadam">Bron: 3 qadamdan 2-si</label>
<progress id="qadam" max="3" value="2">3 dan 2</progress>

• max — umumiy hajm. Yozilmasa, 1 hisoblanadi.
• value — qancha bajarildi: 0 dan max gacha.
• Teg ichidagi matn — progress ni chiza olmaydigan juda eski dasturlar uchun zaxira.

Brauzer chiziqni uchdan ikki qismigacha to'ldiradi. progress ga ham label bog'lang — ekran o'quvchi chiziq nimani ko'rsatayotganini aytishi uchun.

5.2 Noaniq holat

Ba'zan qancha qolganini bilmaymiz. Masalan, server bronni tekshiryapti va qachon javob berishi noma'lum. Unda value yozilmaydi:

<label for="tekshir">Bron tekshirilmoqda</label>
<progress id="tekshir"></progress>

Bu — noaniq holat (indeterminate). Brauzer to'ldirilgan chiziq o'rniga u yoqdan-bu yoqqa yuradigan animatsiya ko'rsatadi: "ish ketyapti, lekin qancha qolganini bilmaymiz".

value ni yozgan zahoti chiziq aniq holatga o'tadi. Real saytda value ni JavaScript yangilab turadi. Masalan, fayl yuklanayotganda — buni Fayl yuklash maydoni darsidan keyin JavaScript qismida qilamiz.

6. meter: oraliqdagi o'lchov

6.1 meter nimani ko'rsatadi

O'lchagich (meter) — chegarasi ma'lum bo'lgan qiymatni ko'rsatadi. U jarayon emas, balki holat: yoqilg'i darajasi, disk bandligi, reyting.

Choyxona sahifasida "Bugun kechqurun bo'sh stollar" ko'rsatkichi bo'lsin. Zalda jami 40 ta stol bor:

<label for="bosh">Bugun kechqurun bo'sh stollar: 32 / 40</label>
<meter id="bosh" min="0" max="40" value="32">40 dan 32</meter>

• min va max — oraliq chegaralari. Yozilmasa, 0 va 1.
• value — joriy qiymat. U oraliqdan chiqsa, brauzer uni chegaraga "qisib" qo'yadi.

6.2 low, high va optimum: rang nimaga bog'liq

meter ning eng qiziq tomoni — u qiymatning yaxshi yoki yomon ekanini ham ko'rsata oladi. Buning uchun uch atribut bor:

• low — "kam" chegarasi. Undan past qiymat — past oraliqda.
• high — "ko'p" chegarasi. Undan yuqori qiymat — yuqori oraliqda.
• optimum — eng yaxshi qiymat. U qaysi oraliqqa tushsa, o'sha oraliq "yaxshi" hisoblanadi.

Bo'sh stollar uchun "ko'p — yaxshi". Shuning uchun optimum ni yuqoriga qo'yamiz:

<meter min="0" max="40" low="10" high="25" optimum="40"
       value="32">40 dan 32</meter>

Oraliqlar shunday bo'ldi: 0–10 — past, 10–25 — o'rta, 25–40 — yuqori. optimum="40" yuqori oraliqda. Chrome'da natija:

Endi teskari holat. "Zal bandligi, %" uchun kam — yaxshi, chunki mijozga joy topiladi. optimum ni pastga qo'yamiz:

<meter min="0" max="100" low="60" high="90" optimum="10"
       value="95">95%</meter>

95% — yuqori oraliq, optimum dan eng uzoq joy. Brauzer uni qizil qiladi.

Qoidani eslab qolish oson: optimum joylashgan oraliq — yashil, qo'shnisi — sariq, eng uzoqdagisi — qizil. Aniq ranglar brauzerga qarab farq qilishi mumkin, CSS bilan ularni o'zgartirasiz.

6.3 progress yoki meter?

Bu ikkisini adashtirish oson — ikkalasi ham chiziq chizadi.

Chegarasi noma'lum son uchun ikkalasi ham to'g'ri kelmaydi. Masalan, "bugun 128 ta mijoz keldi" — bu oddiy matn. Maksimum yo'q, demak meter chizib bo'lmaydi.

Tekshirib ko'ring: "Telefon batareyasi 15%" — progress mi yoki meter? optimum qayerda bo'ladi?

7. Ko'p uchraydigan xatolar

7.1 Radio guruhi fieldset siz

Savol p yoki h3 da, radio tugmalar esa alohida. Ko'z bilan qaraganda hammasi joyida, ekran o'quvchi esa savolni o'qimaydi. Tuzatish: guruhni fieldset ga o'rang va savolni legend ga ko'chiring.

html-validate legend siz fieldset ni ham ushlaydi:

error  <fieldset> must have a <legend> as the first child  wcag/h71

Tarjimasi: "fieldset ning birinchi bolasi legend bo'lishi kerak".

7.2 legend birinchi bola emas

error  Element <legend> must be used before <p> in this context

Tarjimasi: "Bu joyda legend p dan oldin turishi kerak". Siz legend dan oldin boshqa element qo'ygansiz. Bunday legend guruh nomi bo'lib ishlamasligi mumkin. Tuzatish: legend ni fieldset ning boshiga ko'chiring.

7.3 output qiymatini serverdan kutish

Dasturchi serverda jami ni qidiradi, u esa kelmaydi. Tuzatish: output yuborilmaydi — summani server o'zi hisoblaydi. Hisob natijasi serverga baribir kerak bo'lsa, u hidden maydonga yoziladi. Lekin server unga ishonmaydi, faqat o'z hisobi bilan solishtiradi.

7.4 progress va meter ni almashtirish

Disk bandligini progress bilan ko'rsatish — xato: bu jarayon emas. Tuzatish: "progress yoki meter?" jadvalini eslang: "qancha bajarildi?" — progress, "qancha bor?" — meter.

7.5 Nomsiz progress va meter

Ekranda chiziq bor, lekin nimani ko'rsatishi yozilmagan. Ekran o'quvchi faqat "60%" deydi — nimaning 60 foizi? Tuzatish: label bilan bog'lang yoki yoniga aniq matn yozing.

8. Mashqlar

1-mashq (oson): To'g'ri elementni tanlang

Har bir vazifa uchun elementni yozing:

1. Radio tugmalar guruhining savoli:
2. "Rasm yuklanmoqda: 70%":
3. "Mehmonlar reytingi: 5 dan 4,6":
4. Ikki maydondan hisoblangan umumiy narx:

2-mashq (o'rta): «Bahor» formasini guruhlang

Bron formangizni uchta fieldset ga ajrating:

1. "Siz haqingizda" — ism va telefon.
2. "Qaysi joyni tanlaysiz?" — Umumiy zal, Ayvon, Alohida xona radio tugmalari. Alohida xona o'tgan darsdagidek o'chirilgan.
3. "Qo'shimcha xizmatlar" — Tort va Gullar checkbox'lari (name="qoshimcha", Tanlash maydonlari darsidagidek).

Formani html-validate bilan tekshiring — 0 xato bo'lishi kerak (takroriy qoshimcha nomi uchun o'sha darsdagi form-dup-name sozlamasi bilan).

<form method="get">
  <fieldset>
    <legend>Siz haqingizda</legend>
    <label for="ism">Ismingiz</label>
    <input type="text" id="ism" name="ism">
    <label for="telefon">Telefon</label>
    <input type="tel" id="telefon" name="telefon">
  </fieldset>

  <fieldset>
    <legend>Qaysi joyni tanlaysiz?</legend>
    <label>
      <input type="radio" name="joy" value="zal" checked>
      Umumiy zal
    </label>
    <label>
      <input type="radio" name="joy" value="ayvon"> Ayvon
    </label>
    <label>
      <input type="radio" name="joy" value="xona" disabled>
      Alohida xona (bu hafta ta'mirda)
    </label>
  </fieldset>

  <fieldset>
    <legend>Qo'shimcha xizmatlar</legend>
    <label>
      <input type="checkbox" name="qoshimcha" value="tort"> Tort
    </label>
    <label>
      <input type="checkbox" name="qoshimcha" value="gul">
      Gullar
    </label>
  </fieldset>

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

3-mashq (qiyin): Bron sahifasi ko'rsatkichlari

Bron sahifasining yuqorisiga ikkita ko'rsatkich qo'shing:

1. Bron qadami: "3 qadamdan 1-si".
2. "Bugun kechqurun bo'sh stollar": jami 40 ta. 25 tadan ko'p — yaxshi, 10 tadan kam — yomon.

Keyin savolga javob bering: bo'sh stollar soni 35, 15 va 4 bo'lganda meter qanday rangda bo'ladi?

<label for="qadam">Bron: 3 qadamdan 1-si</label>
<progress id="qadam" max="3" value="1">3 dan 1</progress>

<label for="bosh">Bugun kechqurun bo'sh stollar</label>
<meter id="bosh" min="0" max="40" low="10" high="25"
       optimum="40" value="35">40 dan 35</meter>

9. Real ishda

• Onlayn do'konlarda buyurtma. Uzum Market yoki taksi ilovasida "Manzil → To'lov → Tasdiqlash" qadamlari — progress g'oyasi. To'lov formasidagi "Yetkazib berish manzili" va "To'lov usuli" bloklari — fieldset.
• Parol kuchi. Ro'yxatdan o'tishda "kuchsiz — o'rta — kuchli" chizig'i ko'pincha meter bilan qilinadi. Qiymatni JavaScript hisoblaydi.
• Admin panellar. Server diski, ombordagi mahsulot qoldig'i, oylik reja bajarilishi — meter.
• UI kutubxonalar. Keyinroq ko'radigan tayyor komponent to'plamlari chiroyli "RadioGroup" yoki "ProgressBar" beradi. Yaxshilari ichida aynan fieldset, legend va progress ni ishlatadi. Yomonlari div ishlatadi va ekran o'quvchini "ko'r" qoldiradi.
• Accessibility tekshiruvi. Audit vositalari birinchi bo'lib legend siz radio guruhlarini topadi. Bu — eng ko'p uchraydigan forma xatolaridan biri.

Xulosa

• fieldset — bog'liq maydonlar guruhi, legend — uning nomi va birinchi bolasi.
• Radio va checkbox guruhlari fieldset + legend ichida bo'lsin — ekran o'quvchi savolni ham o'qiydi.
• fieldset disabled ichidagi hamma maydonni o'chiradi; faqat birinchi legend ichidagilari ishlab turadi.
• output — hisob natijasi; for manba maydonlarni ko'rsatadi; qiymati serverga yuborilmaydi.
• progress — jarayon (value siz — noaniq holat); meter — chegarali holat.
• meter da optimum joylashgan oraliq — yashil, qo'shnisi — sariq, eng uzoqdagisi — qizil.

Keyingi dars: Brauzer validatsiyasi — required, pattern, min va max bilan brauzer formani yuborishdan oldin o'zi tekshiradi.

Manbalar

• MDN: <fieldset>, <legend>, <output>, <progress>, <meter> — developer.mozilla.org
• WHATWG HTML: "The fieldset element", "The meter element" — html.spec.whatwg.org
• W3C WAI: "Grouping Controls" (forms tutorial) — w3.org/WAI