Zamonaviy HTML forma imkoniyatlari: customizable select, switch va Baseline 2026

Qisqacha: 2025–2026 yillarda brauzerlar formalarga yangi imkoniyatlar qo'shdi: to'liq bezatiladigan select, switch ko'rinishidagi checkbox, matnga qarab o'sadigan maydon (field-sizing) va xatoni vaqtida ko'rsatadigan :user-invalid. Ularni ishlatishdan oldin Baseline holati tekshiriladi. Qoida — progressive enhancement: yangi imkoniyat yo'q brauzerda ham forma oddiy ko'rinishda to'liq ishlashi kerak.

Bu darsda

• Istalgan imkoniyatning Baseline holatini to'rt joyda tekshira olasiz.
• Progressive enhancement tamoyilini forma misolida tushuntirasiz.
• Customizable select'ning HTML qismini yozasiz va eski brauzerda nima bo'lishini bilasiz.
• switch, field-sizing, :user-invalid, requestSubmit() va o'z forma elementlaringiz nima ekanini, qaysi biri qachon kerakligini bilasiz.

Oldin bilishingiz kerak: Veb standartlari va brauzer mosligi, Tanlash maydonlari, Qulay va accessible forma, Forma xavfsizligi va spamdan himoya.

1. Nega bu kerak?

O'tgan ikki darsda «Bahor» formasini qulay va xavfsiz qildik. Endi dizayner Malika yangi maket olib keldi. Unda vaqt tanlash ro'yxati chiroyli: har vaqt yonida "6 ta stol bo'sh" degan kulrang yozuv bor, ochiladigan menyu esa choyxona ranglarida.

15 yildan ko'proq vaqt davomida bu deyarli imkonsiz edi. select ni brauzer o'zi chizardi va uning ochiladigan qismiga tegib bo'lmasdi. Dasturchilar div va JavaScript bilan "soxta select" yasardi. Natijada klaviatura ishlamasdi, ekran o'quvchi uni tanimasdi, telefonda noqulay bo'lardi.

2025–2026 yillarda brauzerlar buni hal qila boshladi. Lekin har bir yangilik bilan bitta savol keladi: bu mehmonlarimizning brauzerida ishlaydimi? Bu darsda shu savolga javob berishni va yangi imkoniyatlarni xavfsiz qo'llashni o'rganamiz.

2. Baseline: "hamma joyda ishlaydimi?"

2.1 Qisqa eslatma

Veb standartlari darsida Baseline bilan tanishgan edik. Bu — imkoniyat to'rtta asosiy brauzerda (Chrome, Edge, Firefox, Safari — kompyuter va telefonda) ishlashini ko'rsatadigan belgi.

"Newly" va "widely" orasidagi 30 oy — odamlar brauzerini yangilashi uchun vaqt. Hamma ham telefonini har oy yangilamaydi.

2.2 Qayerda tekshiriladi

1. MDN — har bir teg yoki xususiyatning sahifasi tepasida Baseline bloki turadi: unda "Widely available", "Newly available" yoki "Limited availability" deb yozilgan.
2. caniuse.com — imkoniyat nomini yozasiz, brauzerlar va versiyalar jadvali chiqadi.
3. Web Features Explorer (web-platform-dx.github.io/web-features-explorer) — Baseline'ning rasmiy ro'yxati, qachon "newly" va qachon "widely" bo'lgani sanasi bilan.
4. VS Code — HTML atributi yoki CSS xususiyati ustiga sichqonchani olib borsangiz, oynachada Baseline holati ko'rinadi.

Bo'sh joyni to'ldiring: imkoniyat "newly available" bo'lganidan necha oy keyin "widely available" bo'ladi?

Tekshirib ko'ring: Imkoniyat Chrome, Edge va Safari'da bor, Firefox'da yo'q. U qaysi Baseline holatida?

3. Progressive enhancement

3.1 G'oya

Progressive enhancement (bosqichma-bosqich boyitish) — avval hamma brauzerda ishlaydigan asosni quramiz, keyin yangi imkoniyatlarni qo'llaydigan brauzerlar uchun ustiga qo'shamiz.

Ko'p qavatli uyni tasavvur qiling. Zinapoya har bir binoda bor — u asos. Lift esa qulaylik: bor joyda odam tezroq chiqadi, yo'q joyda baribir zinapoyadan chiqadi. Hech kim liftsiz binoda "qavatga chiqib bo'lmaydi" deb qolmaydi.

Formada zinapoya — oddiy HTML: label, input, select, required, button. Lift — chiroyli select, o'sadigan maydon, silliq xato ko'rsatish.

3.2 Nega formalarda bu oson

Brauzer tanimagan atributni jimgina e'tiborsiz qoldiradi. Tanimagan CSS xususiyatini ham. Brauzer HTML'ni qanday tahlil qiladi darsida ko'rgandik: brauzer xato chiqarib to'xtamaydi, u davom etadi. Shuning uchun yangi atributni qo'shish ko'pincha xavfsiz. Eski brauzer uni ko'rmaydi va forma odatdagidek ishlayveradi.

Qoida: yangi imkoniyat yo'q brauzerda forma yuborilishi, tekshirilishi va o'qilishi buzilmasin. Faqat ko'rinish oddiyroq bo'lishi mumkin.

4. 2026-yil sentabr holati: jadval

Bu darsdagi imkoniyatlar va ularning holati (dars yozilgan paytdagi — o'zingiz qayta tekshiring):

Customizable select Chrome va Edge'da 135-versiyadan (2025-yil aprel), Safari'da 27-versiyadan (2026-yil sentabr) bor. Firefox'da hali yo'q. switch esa hozircha faqat Safari'da (17.4 dan).

"Nima kerak" ustuniga qarang. Faqat HTML bilan yoziladiganlarini bugun to'liq yozamiz. CSS va JS talab qiladiganlarini qisqa tanishtiramiz — "keyinroq" belgisi bilan va to'liq o'rganiladigan dars havolasi bilan.

5. Customizable select

5.1 Eski select ning cheklovi

Tanlash maydonlari darsida select va option ni o'rgandik. Uning ikki katta cheklovi bor edi:

• option ichiga faqat oddiy matn yozish mumkin edi. Boshqa teglarni parser olib tashlardi.
• Ochiladigan ro'yxatni brauzer va operatsion tizim chizardi — CSS unga yetib bormasdi.

5.2 Yangi HTML

Endi select ichida ikkita yangi narsa bor:

<label for="vaqt">Vaqt</label>
<select id="vaqt" name="vaqt" required>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="">Vaqtni tanlang</option>
  <option value="12:00">
    12:00 <span class="bosh-stol">6 ta stol bo'sh</span>
  </option>
  <option value="18:00">
    18:00 <span class="bosh-stol">2 ta stol bo'sh</span>
  </option>
</select>

Qatorma-qator:

• button — select ning birinchi bolasi. Bu yopiq holatda ko'rinadigan tugma. Endi uni o'zingiz yozasiz va ichini bezay olasiz.
• selectedcontent — yangi element. Brauzer unga tanlangan option ichidagi hamma narsaning nusxasini o'zi qo'yadi. Siz uni faqat joylashtirasiz.
• option ichida span — endi option ichida matndan tashqari element bo'la oladi: span, img, ikonka.
• value, name, required — o'zgarmadi. Server avvalgidek vaqt=18:00 ni oladi.

Eng muhimi: bu hali ham haqiqiy select. Klaviatura, ekran o'quvchi, telefon va label — hammasi o'z-o'zidan ishlaydi. Soxta div versiyada bularning har birini qo'lda yozish kerak edi.

5.3 CSS qismi — keyinroq

Yangi rejimni CSS'dagi bitta qoida yoqadi:

select,
::picker(select) {
  appearance: base-select;
}

Hozir bu kodni tushunish shart emas. Bilishingiz kifoya: appearance: base-select brauzerga "bu select ni menga ber, men o'zim bezayman" deydi. ::picker(select) — ochiladigan ro'yxat. Shundan keyin tugma, strelka va tanlov belgisi ham CSS bilan bezaladi. Buni Forma elementlarini zamonaviy stillash darsida to'liq qilamiz.

5.4 Eski brauzerda nima bo'ladi

Firefox'da yoki eski Chrome'da:

• button va selectedcontent e'tiborsiz qoldiriladi.
• span lar bezaksiz qoladi, lekin ichidagi matn ko'rinadi: ro'yxatda "12:00 6 ta stol bo'sh" chiqadi.
• Tanlash, yuborish va required tekshiruvi — odatdagidek ishlaydi.

Ya'ni mehmon oddiy select ko'radi va bronni baribir qiladi. Aynan shu progressive enhancement: yangi brauzerda — chiroyli, eskisida — oddiy, lekin ishlaydi.

Diqqat: option ichidagi qo'shimcha matn eski brauzerda ham ko'rinishini unutmang. Unga faqat ma'noli matn yozing. Masalan, bezak uchun "•••" qo'ysangiz, Firefox'da ro'yxat g'alati ko'rinadi.

Tekshirib ko'ring: Customizable select'ga o'tganda serverdagi kodni o'zgartirish kerakmi?

6. switch: checkbox — o'chirgich ko'rinishida

Telefon sozlamalaridagi "yoqish/o'chirish" tugmasini bilasiz. HTML'da uning uchun checkbox'ga switch atributi qo'shiladi:

<input id="qorongi" name="qorongi" type="checkbox" switch>
<label for="qorongi">Qorong'i rejim</label>

• Safari (17.4 dan) uni o'chirgich qilib chizadi, ekran o'quvchi esa "switch" (o'chirgich) deb e'lon qiladi.
• Boshqa brauzerlar atributni tanimaydi va oddiy checkbox ko'rsatadi. Forma baribir to'g'ri ishlaydi — progressive enhancement.

switch standartga hali to'liq kiritilmagan. Boshqa brauzerlar uni qo'shish-qo'shmasligini muhokama qilyapti.

Qachon switch, qachon checkbox? Qoida bor:

Shuning uchun «Bahor» bron formasida SMS eslatma uchun oddiy checkbox to'g'ri. switch esa sayt sozlamalari sahifasiga mos.

Maslahat: Hamma brauzerda o'chirgich ko'rinishi kerak bo'lsa, bugun ko'p loyihalar checkbox'ni CSS bilan bezaydi va role="switch" qo'shadi. Buni Forma komponentlari darsida qilamiz.

7. CSS bilan keladigan ikki yangilik (keyinroq)

7.1 field-sizing: o'sadigan maydon

«Bahor» formasidagi izoh maydonini eslang: rows="3". Mehmon uzun matn yozsa, uch qatordan keyin ichki aylantirish (scroll) paydo bo'ladi — telefonda noqulay. Yangi CSS xususiyati maydonni matnga qarab o'stiradi:

textarea {
  field-sizing: content;
}

Bu xususiyat 2026-yil iyunida Newly available bo'ldi: Chrome 123, Safari 26.2 va Firefox 152 da bor. Eski brauzerda esa rows="3" dagi oddiy maydon qoladi — hech narsa buzilmaydi. Forma elementlarini zamonaviy stillash darsida qo'llaymiz.

7.2 :user-invalid: xato vaqtida

Qulay va accessible forma darsida qoida qo'ygan edik: xato faqat odam maydon bilan ishlab bo'lgandan keyin ko'rinsin. CSS'dagi eski :invalid bu qoidani buzardi. U bo'sh required maydonni sahifa ochilishi bilan "xato" deb belgilardi — mehmon hali hech narsa yozmasdan qizil ramkani ko'rardi.

:user-invalid esa faqat odam maydonni o'zgartirib, undan chiqqandan keyin yoki yuborishga uringandan keyin ishlaydi:

input:user-invalid {
  outline: 2px solid crimson;
}

2026-yil mayidan Widely available — bemalol ishlatsa bo'ladi. Holat pseudo-klasslari darsida to'liq o'rganamiz. Faqat rangning o'zi yetmasligini unutmang: xato matni baribir kerak.

8. JavaScript bilan keladigan ikki yangilik (keyinroq)

Bu ikkisini faqat tanib qo'yish uchun ko'rsatamiz. JavaScript'ni 08-qismdan boshlaymiz — hozir kodni tushunish shart emas.

8.1 requestSubmit(): to'g'ri yuborish

Ba'zan formani tugma bosilmasdan, JavaScript orqali yuborish kerak bo'ladi. Buning ikki usuli bor:

const forma = document.querySelector("form");
forma.requestSubmit(); // avval tekshiradi, keyin yuboradi
forma.submit();        // tekshirmasdan yuboradi

Eski submit() required va pattern ni chetlab o'tadi — xuddi validatsiyasiz forma. requestSubmit() esa tugma bosilgandek ishlaydi: avval tekshiradi. Hamma brauzerda allaqachon bor. FormData darsida ishlatamiz.

8.2 O'z forma elementlaringiz

HTML'ga o'z tegingizni qo'shish mumkin — masalan, yulduzchali baho <yulduz-baho>. Nomida albatta chiziqcha bo'ladi. Oddiy o'z tegi formada ishtirok etmaydi: uning qiymati yuborilmaydi. Formaga bog'langan maxsus element (form-associated custom element) esa haqiqiy input kabi ishlaydi:

• qiymati forma bilan birga yuboriladi (baho=4);
• required bilan tekshiriladi;
• label ga bog'lanadi, disabled va forma tozalanishini tushunadi.

2025-yil sentabridan Widely available. Lekin elementning xatti-harakati to'liq JavaScript'da yoziladi. JavaScript yuklanmasa, element hech narsa qilmaydi. Shuning uchun uning ichiga oddiy HTML zaxirasini qo'yish kerak. Web Components'ga kirish va Web Components darslarida quramiz.

Tekshirib ko'ring: Nega requestSubmit() xavfsizroq, deymiz — axir o'tgan darsda "brauzer tekshiruvi himoya emas" degan edik-ku?

9. «Bahor» formasi: 2026-yil versiyasi

O'tgan ikki darsdagi formada faqat vaqt maydoni o'zgaradi. Qolgan hamma narsa — label, yo'riqnoma, himoya — joyida qoladi:

<div>
  <label for="vaqt">Vaqt</label>
  <span id="vaqt-yordam">
    Bo'sh stollar soni har vaqt yonida ko'rsatilgan.
  </span>
  <select id="vaqt" name="vaqt" required
          aria-describedby="vaqt-yordam">
    <button>
      <selectedcontent></selectedcontent>
    </button>
    <option value="">Vaqtni tanlang</option>
    <option value="12:00">
      12:00 <span class="bosh-stol">— 6 ta stol bo'sh</span>
    </option>
    <option value="15:00">
      15:00 <span class="bosh-stol">— 4 ta stol bo'sh</span>
    </option>
    <option value="18:00">
      18:00 <span class="bosh-stol">— 2 ta stol bo'sh</span>
    </option>
    <option value="20:00" disabled>
      20:00 <span class="bosh-stol">— joy yo'q</span>
    </option>
  </select>
</div>

Nimalar o'zgardi:

• button + selectedcontent — yangi brauzerda tanlangan vaqt tugmada ko'rinadi, CSS bilan bezaladi.
• "— 6 ta stol bo'sh" — chiziqcha bilan yozildi, eski brauzerda ham "12:00 — 6 ta stol bo'sh" deb chiroyli o'qiladi.
• disabled option — band vaqtni tanlab bo'lmaydi. Buni Tanlash maydonlari darsida ko'rgan edik.
• Yo'riqnoma aria-describedby bilan ulandi — o'tgan darsdagi usul.

Keyinroq CSS qismida bu formaga appearance: base-select, field-sizing va :user-invalid ni qo'shamiz. HTML esa allaqachon tayyor — CSS unga faqat ko'rinish beradi.

10. Ko'p uchraydigan xatolar

10.1 "Mening Chrome'imda ishladi — demak, hammada ishlaydi"

Dasturchilar ko'pincha eng yangi Chrome'dan foydalanadi. Mehmonlar esa — eski Android, iPhone'dagi Safari, Firefox. Tuzatish: har yangi imkoniyatni MDN yoki caniuse'da tekshiring. Formani kamida ikki xil brauzerda ochib ko'ring.

10.2 Muhim ish yangi imkoniyatga bog'langan

Masalan, bo'sh stollar sonini faqat option dagi bezakli ikonka ko'rsatadi, matnsiz. Eski brauzerda ikonka yo'qoladi — ma'lumot ham yo'qoladi. Tuzatish: har bir muhim ma'lumot oddiy matn bo'lib ham mavjud bo'lsin.

10.3 selectedcontent noto'g'ri joyda

<!-- ❌ button yo'q -->
<select id="vaqt" name="vaqt">
  <selectedcontent></selectedcontent>
  <option value="12:00">12:00</option>
</select>

Brauzer xato bermaydi — selectedcontent shunchaki ishlamaydi va siz rejalashtirgan tugma paydo bo'lmaydi. html-validate esa ushlaydi:

<selectedcontent> element requires a "select > button" ancestor

Tarjimasi: "selectedcontent elementining ajdodlari orasida select > button bo'lishi kerak" — ya'ni u select ning bevosita bolasi bo'lgan button ichida turadi. Tuzatish: avval button, uning ichida selectedcontent.

10.4 Yana "soxta select"

2026-yilda ham ko'p darslarda div va JavaScript bilan dropdown yasash o'rgatiladi. Oddiy tanlov uchun endi bu kerak emas. Native select klaviatura, ekran o'quvchi va telefonni bepul beradi. Customizable select esa dizaynerni ham xursand qiladi.

10.5 "Newly" ni "widely" deb o'ylash

Newly available imkoniyat faqat eng yangi brauzerlarda bor. Uni zaxirasiz ishlatsangiz, brauzerini yangilamagan mehmonlar chetda qoladi. Tuzatish: newly va limited uchun eski brauzerda nima bo'lishini oldindan tekshiring.

11. Mashqlar

1-mashq (oson): Holatni aniqlang

Bu darsdagi jadvaldan foydalanib, har bir imkoniyat uchun yozing: bugun zaxirasiz ishlatsa bo'ladimi?

1. :user-invalid
2. switch
3. field-sizing: content
4. requestSubmit()

2-mashq (o'rta): Menyu buyurtmasi uchun select

Choyxonaning onlayn buyurtma sahifasida taom tanlanadi. Customizable select yozing: tugma va selectedcontent bilan, uchta taom — osh, lag'mon, somsa. Har bir option da taom nomi va span ichida narxi bo'lsin (35 000, 28 000 va 8 000 so'm). Maydon majburiy va label li bo'lsin.

Eslatma: required bilan birinchi option bo'sh qiymatli bo'lishi kerak — Tanlash maydonlari darsidagi qoida.

<label for="taom">Taom</label>
<select id="taom" name="taom" required>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="">Taomni tanlang</option>
  <option value="osh">
    Osh <span class="narx">— 35 000 so'm</span>
  </option>
  <option value="lagmon">
    Lag'mon <span class="narx">— 28 000 so'm</span>
  </option>
  <option value="somsa">
    Somsa <span class="narx">— 8 000 so'm</span>
  </option>
</select>

3-mashq (qiyin): Sozlamalar sahifasi

Choyxona mijozlari uchun "Sozlamalar" sahifasi yasang:

1. "Aksiyalar haqida SMS" — darhol kuchga kiradigan o'chirgich (switch).
2. "Sayt tili" — customizable select: O'zbekcha, Русский, English.
3. "Saqlash" tugmasi.

Keyin jadval tuzing: Chrome, Safari 27 va Firefox'da har bir element qanday ko'rinadi?

Eslatma: tilni tanlash option larida lang atributini qo'shing — Ko'p tilli matn darsida ko'rgandik.

<form action="https://example.com/sozlamalar" method="post">
  <div>
    <input id="sms" name="sms" type="checkbox" switch>
    <label for="sms">Aksiyalar haqida SMS</label>
  </div>
  <div>
    <label for="til">Sayt tili</label>
    <select id="til" name="til">
      <button>
        <selectedcontent></selectedcontent>
      </button>
      <option value="uz" lang="uz">O'zbekcha</option>
      <option value="ru" lang="ru">Русский</option>
      <option value="en" lang="en">English</option>
    </select>
  </div>
  <button type="submit">Saqlash</button>
</form>

12. Real ishda

• Brauzer siyosati. Kompaniyalarda "qaysi brauzerlarni qo'llaymiz?" degan yozma qoida bo'ladi. Ko'pincha Baseline widely available yoki "oxirgi 2 versiya". Keyinroq bu qoida loyiha sozlamalarida ham yoziladi (browserslist darsida).
• Dizayn tizimlari. Ko'p loyihalarda select uchun katta JavaScript kutubxonalari ishlatilgan. Customizable select hamma brauzerga yetib borgach, jamoalar native select ga qaytmoqda: kod kamayadi, accessibility bepul keladi.
• Yangiliklarni kuzatish. web.dev saytida har oy "New to the web platform" maqolasi chiqadi — qaysi imkoniyat Baseline bo'lgani yoziladi. Frontend dasturchilar uni kuzatib boradi.
• Intervyuda so'raladi: "Progressive enhancement nima?" va "Yangi CSS/HTML imkoniyatini ishlatish mumkinligini qanday bilasiz?". Javob: Baseline, caniuse va eski brauzerdagi zaxira.

Xulosa

• Yangi imkoniyatdan oldin Baseline holatini tekshiring: MDN, caniuse, Web Features Explorer yoki VS Code.
• Progressive enhancement: asos — hamma joyda ishlaydigan oddiy HTML, yangilik — ustidagi qo'shimcha.
• Customizable select: select ichida button + selectedcontent, option ichida boy kontent; CSS'da appearance: base-select. Hozircha Firefox'da yo'q, lekin u yerda oddiy select ishlayveradi.
• switch — darhol kuchga kiradigan sozlama uchun; hozircha faqat Safari'da.
• field-sizing, :user-invalid — CSS qismida; requestSubmit() va o'z forma elementlari — JS qismida.
• Formalar moduli tugadi: endi to'liq, qulay, xavfsiz va zamonaviy forma yoza olasiz.

Keyingi dars: details va summary: JS'siz akkordeon — interaktiv elementlar moduli boshlanadi: bosilganda ochiladigan bloklarni JavaScript'siz yasaymiz.

Manbalar

• MDN: "Customizable select elements", "field-sizing", ":user-invalid", "requestSubmit()" — developer.mozilla.org
• Chrome for Developers: "The select element can now be customized with CSS" — developer.chrome.com
• WebKit: "WebKit Features for Safari 27.0" — webkit.org
• web.dev: "New to the web platform in June 2026" va Baseline — web.dev
• Web Features Explorer — web-platform-dx.github.io/web-features-explorer