HTML input turlari: son, sana, vaqt va rang maydonlari

Qisqacha: Son uchun type="number", sana uchun type="date", vaqt uchun type="time" yozsangiz, brauzer tayyor tanlagich chiqaradi va qiymatni bitta standart formatda yuboradi: 4, 2026-10-05, 19:30. min, max va step ruxsat etilgan chegarani belgilaydi. Ekranda sana har kimga o'z tilida ko'rinadi, lekin serverga doim YYYY-MM-DD ko'rinishida boradi. Vaqt zonasi esa umuman yuborilmaydi — buni unutmang.

Bu darsda

• number va range maydonlariga min, max va step bera olasiz.
• date, time, datetime-local, month va week maydonlarini ishlata olasiz.
• Ekrandagi sana bilan serverga ketadigan qiymat farqini tushuntira olasiz.
• Vaqt zonasi tuzog'ini oldindan bilasiz.
• color maydoni qanday qiymat berishini bilasiz.

Oldin bilishingiz kerak: Matnli maydonlar, Mobil klaviatura va kiritish yordamchilari, Iqtibos, qisqartma, vaqt va ma'lumot.

1. Nega bu kerak?

«Bahor» choyxonasining bron/index.html sahifasida joy band qilish formasi bor. O'tgan darslarda unga ism, telefon, email va izoh maydonlarini qo'shdik. "Necha kishi" esa hali oddiy matn maydoni. Endi eng muhimi qoldi: mehmon qachon keladi va necha kishi bo'ladi?

Buni oddiy matn maydoni bilan so'rasak nima bo'ladi? Uch mehmon uch xil yozadi:

Ali:     5-oktabr, kechqurun
Malika:  05.10.26 soat 7 da
Jasur:   dushanba 19:30, to'rtta odam

Choyxona administratori har birini o'qib, o'ylab chiqishi kerak. "Soat 7" — ertalabmi, kechmi? "05.10" — 5-oktabrmi yoki 10-may? Dastur esa bunday matnni umuman tushunmaydi.

Bugun brauzerga maxsus maydonlar beramiz. U foydalanuvchiga kalendar va soat tanlagichini chiqaradi. Serverga esa hamma uchun bir xil, aniq formatdagi qiymat yuboradi.

2. Son maydoni: type="number"

2.1 Mehmonlar soni

<label for="odam">Necha kishi bo'lasiz?</label>
<input type="number" id="odam" name="odam" value="2">

Brauzer nima beradi:

• Kompyuterda maydon o'ng tomonida kichik yuqori-past strelkalar paydo bo'ladi.
• Klaviaturadagi ↑ va ↓ tugmalari sonni bittaga oshiradi yoki kamaytiradi.
• Telefonda raqamli klaviatura ochiladi — o'tgan darsda buni ko'rgan edik.
• Ko'p brauzerlarda harf yozib bo'lmaydi (bitta istisno bor — uni pastroqda ko'ramiz).

value="2" — boshlang'ich qiymat. Ko'p mehmon ikki kishi bo'lib keladi, shuning uchun uni oldindan qo'yib qo'ydik.

2.2 Chegara: min va max

Choyxonaning eng katta stoli 20 kishilik. 0 kishi uchun joy band qilish esa ma'nosiz. Chegarani qo'yamiz:

<input type="number" id="odam" name="odam"
       value="2" min="1" max="20">

• min — eng kichik ruxsat etilgan qiymat.
• max — eng kattasi.

Strelkalar endi 1 dan pastga va 20 dan yuqoriga chiqmaydi. Foydalanuvchi qo'lda 30 yozsa-chi? Forma yuborilmaydi. Brauzer maydon yonida xabar ko'rsatadi. Inglizcha brauzerda u shunday:

Value must be less than or equal to 20.

Tarjimasi: "Qiymat 20 dan kichik yoki unga teng bo'lishi kerak." Xabar matni brauzer tiliga bog'liq: ruscha brauzerda u ruscha chiqadi. Bu tekshiruv qanday ishlashini Brauzer validatsiyasi darsida to'liq ko'ramiz.

2.3 Qadam: step

step — qiymat qanday "qadam" bilan o'zgarishi. Standart qadam — 1. Ya'ni number maydoni sukut bo'yicha faqat butun sonlarni qabul qiladi.

Mehmon 2.5 yozsa, brauzer formani yubormaydi:

Please enter a valid value. The two nearest valid values are 2 and 3.

"To'g'ri qiymat kiriting. Eng yaqin to'g'ri qiymatlar — 2 va 3." Mehmonlar soni uchun bu aynan kerakli xatti-harakat.

Kasr son kerak bo'lsa-chi? Masalan, «Bahor» ulgurji go'sht sotadi va kilogramm yarimtalab tortiladi:

<label for="vazn">Necha kilogramm?</label>
<input type="number" id="vazn" name="vazn"
       min="0.5" max="50" step="0.5">

Endi 0.5, 1, 1.5, 2 kabi qiymatlar to'g'ri, 1.3 esa xato.

Istalgan kasr kerak bo'lsa — step="any". Unda brauzer qadamni umuman tekshirmaydi.

Maslahat: Qadam min dan boshlab sanaladi. min="1" step="2" bo'lsa, to'g'ri qiymatlar 1, 3, 5 bo'ladi — 2 va 4 emas. min bo'lmasa, sanoq value atributidan yoki 0 dan boshlanadi.

Qiymat har doim nuqta bilan yuboriladi: 2.5. Foydalanuvchi tilida vergul bilan ko'rinsa ham (2,5), serverga 2.5 boradi.

2.4 number ning ikki g'alati odati

1. e harfi yoziladi. 1e3 — bu "1 ning orqasida uchta nol", ya'ni 1000. Matematikada shunday yozuv bor, shuning uchun brauzer e ga ruxsat beradi. Foydalanuvchi uni tasodifan yozsa, qiymat kutilmagan bo'ladi.
2. Sichqoncha g'ildiragi. Ba'zi brauzerlarda maydon fokusda turganda sahifani g'ildirak bilan aylantirsangiz, sahifa emas, son o'zgaradi. Foydalanuvchi 4 yozgan edi, sezmay 1 ga tushirib yuboradi.

Shuning uchun number faqat haqiqiy miqdor uchun: dona, kishi, kilogramm. Telefon raqami, karta raqami yoki SMS kod uchun emas — ular son emas, raqamlardan iborat matn. O'tgan darsda ular uchun inputmode ni o'rgangan edik.

Tekshirib ko'ring: <input type="number" min="0" max="100" step="10"> — foydalanuvchi 35 yozsa, forma yuboriladimi?

3. Slayder: type="range"

Ba'zan aniq son emas, taxminiy daraja kerak. Masalan, taom qanchalik achchiq bo'lsin:

<label for="achchiq">Achchiqlik darajasi</label>
<input type="range" id="achchiq" name="achchiq"
       min="0" max="5" value="2">

Ekranda sudraladigan chiziq — slayder (slider) chiqadi. Foydalanuvchi uni barmog'i bilan suradi. Radiodagi ovoz balandligi tutqichini eslang: aniq raqamni bilmaysiz, lekin "ozroq baland" qila olasiz.

range ning uch xususiyati:

• min sukut bo'yicha 0, max — 100.
• value yozilmasa, slayder o'rtada turadi. min="0" max="100" da qiymat 50 bo'ladi.
• Qiymat ekranda ko'rinmaydi. Foydalanuvchi "hozir nechada turibman?" deb bilmaydi.

Oxirgisi — jiddiy kamchilik. Qiymatni ko'rsatish uchun output elementi kerak. Uni Guruhlash va natija elementlari darsida ko'ramiz. Hozircha qoida: aniq son muhim bo'lsa — number, taxminiy daraja yetarli bo'lsa — range.

4. Sana va vaqt maydonlari

4.1 Sana: type="date"

<label for="sana">Qaysi kuni kelasiz?</label>
<input type="date" id="sana" name="sana">

Maydon bosilganda kalendar ochiladi. Telefonda — telefonning o'z kalendar g'ildiragi. Foydalanuvchi kunni barmog'i bilan tanlaydi, hech narsa yozmaydi.

Endi eng muhim tushuncha. Ekranda sana foydalanuvchining tiliga qarab ko'rinadi. Serverga esa doim bir xil formatda boradi:

Ikkinchi va uchinchi qatorga qarang: 10/05 va 05/10. Bir xil kun, lekin ekranda teskari tartib. Agar server ekrandagi matnni olganida, 5-oktabrni 10-may deb tushunishi mumkin edi. Brauzer bu chalkashlikni yo'qotadi: yuboriladigan qiymat hamisha 2026-10-05.

Bu format ISO 8601 deb ataladi — sanalar uchun xalqaro standart. Katta birlikdan kichigiga: yil, oy, kun. Iqtibos, qisqartma, vaqt va ma'lumot darsida time elementining datetime atributida aynan shu formatni yozgan edik.

value, min va max ham shu formatda yoziladi:

<input type="date" id="sana" name="sana"
       value="2026-10-05" min="2026-10-01" max="2026-12-31">

Kalendarda 1-oktabrdan oldingi va 31-dekabrdan keyingi kunlar kulrang bo'lib qoladi — ularni tanlab bo'lmaydi.

Diqqat: HTML "bugun" degan so'zni bilmaydi. min="bugun" yozib bo'lmaydi — faqat aniq sana. O'tib ketgan kunlarni yopish uchun min ni har kuni yangilash kerak. Buni server sahifani yaratayotganda yoki JavaScript qiladi — kursning keyingi qismlarida.

4.2 Vaqt: type="time"

<label for="vaqt">Soat nechada?</label>
<input type="time" id="vaqt" name="vaqt"
       min="10:00" max="22:00">

Qiymat — 24 soatlik HH:MM formatida: 19:30. Amerikalik foydalanuvchi ekranda 7:30 PM ko'rishi mumkin, lekin serverga baribir 19:30 boradi.

min="10:00" max="22:00" — stol band qilinadigan soatlar (choyxona 7:00 da ochiladi, lekin bron 10:00 dan 22:00 gacha qabul qilinadi). Undan tashqari soat tanlansa, forma yuborilmaydi.

Endi step. Choyxona stollarni har 15 daqiqada band qiladi deylik. Bu yerda eng ko'p uchraydigan tuzoq bor: time da step soniyada o'lchanadi, daqiqada emas.

<input type="time" id="vaqt" name="vaqt"
       min="10:00" max="22:00" step="900">

900 soniya = 15 daqiqa. Endi 19:00, 19:15, 19:30 to'g'ri, 19:10 esa xato:

Please enter a valid value. The two nearest valid values are 19:00 and 19:15.

step="15" yozsangiz, qadam 15 soniya bo'lib qoladi va brauzer soniyalarni ham so'ray boshlaydi.

Bo'sh joyni to'ldiring: 30 daqiqalik qadam uchun step qiymati:

4.3 Sana va vaqt birga: type="datetime-local"

<label for="payt">Kelish sanasi va vaqti</label>
<input type="datetime-local" id="payt" name="payt">

Qiymat — sana va vaqt, o'rtasida T harfi bilan: 2026-10-05T19:30. T — inglizcha "time" so'zining birinchi harfi, ISO 8601 da sana va vaqtni shunday ajratadi.

Nomidagi "local" so'ziga e'tibor bering — "mahalliy". Bu maydon vaqt zonasini bilmaydi va yubormaydi. Bu nimaga olib kelishini "Vaqt zonasi tuzog'i" bo'limida ko'ramiz.

«Bahor» formasida biz date va time ni alohida ishlatamiz. Sababi: ikki kichik tanlagich telefonda bitta katta tanlagichdan qulayroq. Har bir maydonga alohida chegara ham qo'yish mumkin: sanaga — kunlar, vaqtga — ish soatlari.

4.4 Oy va hafta: month va week

month — kun kerak bo'lmaganda. Masalan, «Bahor» saytidagi "Tadbirlar arxivi": "2026-yil oktabr oyidagi tadbirlarni ko'rsat".

week — yilning nechanchi haftasi. 2026-W41 — 2026-yilning 41-haftasi (5–11-oktabr). Hafta raqami ham ISO 8601 bo'yicha, haftalar dushanbadan boshlanadi. Oshxona xodimlarining navbatchilik jadvali kabi ichki tizimlarda uchraydi.

Diqqat: month va week ni hamma brauzer bir xil qo'llamaydi. Ba'zi kompyuter brauzerlarida (masalan, Firefox'da) ular kalendarsiz oddiy matn maydoni bo'lib qoladi. Muhim formada ishlatishdan oldin caniuse.com saytida tekshiring. date, time va datetime-local esa barcha zamonaviy brauzerlarda ishlaydi.

4.5 Formatlar bitta jadvalda

Tekshirib ko'ring: Toshkentdagi foydalanuvchi kalendardan 2027-yil 8-martni tanladi. Uning ekranida 08.03.2027 ko'rinyapti. Serverga qanday qiymat boradi?

5. Vaqt zonasi tuzog'i

5.1 Muammo

Vaqt zonasi (time zone) — dunyoning bir qismida qabul qilingan soat. Toshkent vaqti butun dunyo hisobidagi asosiy vaqtdan (UTC) 5 soat oldinda: UTC+5. Germaniyada esa kuzda UTC+2 bo'ladi.

Mehmon 19:30 ni tanladi. U Toshkent vaqtidagi 19:30 ni nazarda tutyapti. Lekin brauzer faqat 2026-10-05T19:30 ni yuboradi. "Toshkent vaqti" degan belgi yo'q.

Endi «Bahor» sayti Germaniyadagi arzon serverda turibdi deylik. Server qatorni o'qiydi va o'z soatiga qarab tushunadi:

Administrator ro'yxatda "22:30" ni ko'radi. Mehmon esa 19:30 da keladi va stol band emas. Kod hech qanday xato bermadi — shuning uchun bu tuzoq xavfli.

5.2 Qanday himoyalanamiz

HTML darajasida qila oladigan narsa — muammoni bilish. Yechimni server tomonda qilamiz:

• Qoida: date, time va datetime-local qiymati — "devordagi soat". Unda zona yo'q.
• «Bahor» — bitta shahardagi choyxona. Demak, server har bir kelgan vaqtni Toshkent vaqti deb o'qishi kerak. Vaqt zonalari bazasida uning nomi — Asia/Tashkent.
• Foydalanuvchilar turli shaharlarda bo'lgan ilovalarda (masalan, onlayn uchrashuvlar) brauzer foydalanuvchining zonasini alohida yuboradi. Buni JavaScript bilan qilamiz — Date va vaqt zonalari darsida.

Hozircha shuni eslab qoling: sana-vaqt maydonidan kelgan qiymat qaysi zonaga tegishli ekanini doim o'zingiz hal qilasiz.

Tekshirib ko'ring: Nega date maydoni (faqat sana, vaqtsiz) ham ba'zan bir kunga siljib qoladi? Ishora: kun yarim tunda boshlanadi.

6. Rang maydoni: type="color"

«Bahor» tug'ilgan kunlarni ham o'tkazadi. Stol havo sharlar bilan bezatiladi — mehmon sharlarning rangini o'zi tanlasin:

<label for="shar">Sharlar rangi</label>
<input type="color" id="shar" name="shar" value="#1e7a4c">

Ekranda rangli kvadrat chiqadi. Bosilganda rang tanlash oynasi ochiladi.

Qiymat — rangning hex kodi: # belgisi va 6 ta o'n oltilik raqam. O'n oltilik sanoq sistemasi darsida bu yozuvni ko'rgan edik: 1e — qizil, 7a — yashil, 4c — ko'k ulushi.

• value yozilmasa, rang qora: #000000.
• Qiymat doim kichik harflarda qaytadi. value="#1E7A4C" yozsangiz ham, serverga #1e7a4c boradi.
• Yangi brauzerlar value="green" kabi CSS rang nomlarini ham tushunib, #008000 ga aylantiradi. Lekin eng ishonchlisi — to'liq hex kod.

Ranglar va hex kodlar haqida CSS qismida, Ranglar 1: nomli, hex, rgb, hsl darsida batafsil gaplashamiz.

7. Yaroqsiz qiymat va notanish type

7.1 Brauzer yaroqsiz value ni o'chiradi

Noto'g'ri:

<input type="date" name="sana" value="05.10.2026">

05.10.2026 — ISO format emas. Brauzer uni tushunmaydi va jimgina bo'sh qiymat qo'yadi. Maydon bo'sh ko'rinadi, forma esa sana= ni (qiymatsiz) yuboradi. Mavjud bo'lmagan sana ham shunday: 2026-02-30 — bo'sh.

number da ham xuddi shunday: value="1,5" yoki value="abc" — bo'sh. Kasr faqat nuqta bilan: value="1.5".

Bunday xatoni ko'z bilan topish qiyin — brauzer hech qanday xabar chiqarmaydi. Formatlash va validatsiya darsida ko'rgan W3C validatori (Nu HTML Checker) esa uni ushlaydi:

Error: Bad value “05.10.2026” for attribute “value” on element “input”: The literal did not satisfy the date format.

Tarjimasi: "input elementidagi value atributi uchun '05.10.2026' — yaroqsiz qiymat: yozuv sana formatiga mos kelmadi." Diqqat: html-validate bu xatoni ko'rmaydi — sana va son qiymatlarini faqat W3C validatori tekshiradi.

7.2 Notanish type — oddiy matn maydoni

Brauzer type qiymatini tanimasa, maydonni oddiy text deb ko'rsatadi. Masalan, type="sana" (o'zbekcha yozib yuborilgan) yoki juda eski brauzerdagi type="date". Forma buzilmaydi — faqat kalendar chiqmaydi. Shuning uchun yangi turlarni qo'rqmay ishlatish mumkin: eng yomon holatda ular matn maydoniga aylanadi.

8. «Bahor»: formaga sana, vaqt va mehmonlar sonini qo'shamiz

Natijani manzil qatorida ko'rish uchun formani hozircha method="get" bilan yuboramiz. Haqiqiy saytda band qilish POST bilan yuboriladi — Forma qanday ishlaydi darsida sababini ko'rgan edik. button dagi type="submit" nima ekanini esa Tugmalar va yuborish darsida ko'ramiz.

Kod qisqa bo'lishi uchun email va izoh maydonlarini, telefondagi pattern ni bu yerga yozmadik — ular formangizda o'tgan darsdagidek qoladi.

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Joy band qilish — «Bahor» choyxonasi</title>
</head>
<body>
  <main>
    <h1>Joy band qilish</h1>
    <form action="https://example.com/bron" method="get">
      <p>
        <label for="ism">Ismingiz</label>
        <input type="text" id="ism" name="ism">
      </p>
      <p>
        <label for="telefon">Telefon</label>
        <input type="tel" id="telefon" name="telefon">
      </p>
      <p>
        <label for="sana">Sana</label>
        <input type="date" id="sana" name="sana"
               min="2026-10-01" max="2026-12-31">
      </p>
      <p>
        <label for="vaqt">Vaqt (10:00–22:00)</label>
        <input type="time" id="vaqt" name="vaqt"
               min="10:00" max="22:00" step="900">
      </p>
      <p>
        <label for="odam">Necha kishi?</label>
        <input type="number" id="odam" name="odam"
               value="2" min="1" max="20">
      </p>
      <button type="submit">Band qilish</button>
    </form>
  </main>
</body>
</html>

Qatorma-qator yangiliklar:

• type="date" va min/max — faqat oktabr–dekabr kunlarini tanlash mumkin.
• type="time" va step="900" — bron soatlari ichida, har 15 daqiqada.
• type="number" va min/max — 1 dan 20 kishigacha, faqat butun son.
• Vaqt yorlig'ida ish soatlari yozilgan. Foydalanuvchi chegarani xato xabaridan emas, oldindan bilsin.

Ali formani to'ldirib yubordi. Manzil qatorida:

https://example.com/bron?ism=Ali&telefon=%2B998900000000&sana=2026-10-05&vaqt=19%3A30&odam=4

%3A — ikki nuqta (:), %2B esa + belgisi. URL anatomiyasi darsida ko'rganimizdek, URL'da maxsus belgilar shunday kodlanadi. Server ularni avtomatik ravishda qaytadan 19:30 va +998... ga aylantiradi.

9. Hujumchi nigohi

min="1" max="20" — brauzer uchun ko'rsatma. Hujumchi uchun esa hech narsa emas.

Hujum. Hujumchi formani to'ldirmaydi. U manzil qatoriga to'g'ridan-to'g'ri yozadi:

https://example.com/bron?ism=Test&sana=2020-01-01&vaqt=03:00&odam=500

Brauzer tekshiruvi umuman ishlamadi — forma yo'q, faqat so'rov bor. Server hech narsani tekshirmasa, bazaga 2020-yilga, tungi soat 3 ga, 500 kishilik "band qilish" yoziladi. Hujumchi buni skript bilan minglab marta takrorlasa, ro'yxat axlatga to'ladi va haqiqiy mehmonlar joy topolmaydi.

Himoya. HTML'dagi chegaralar — foydalanuvchiga qulaylik: xatoni darhol ko'rsatadi. Xavfsizlik esa faqat serverda:

• Server odam 1 dan 20 gacha butun son ekanini qayta tekshiradi.
• sana haqiqiy sana ekanini, o'tmishda emasligini tekshiradi.
• vaqt ish soatlari ichida ekanini tekshiradi.

Qoida: brauzer tekshiruvi — foydalanuvchi uchun, server tekshiruvi — xavfsizlik uchun. Ikkalasi ham kerak. Spam va bot himoyasini Forma xavfsizligi darsida ko'ramiz.

10. Ko'p uchraydigan xatolar

10.1 value mahalliy formatda yozilgan

value="05.10.2026" → maydon bo'sh. Tuzatish: value="2026-10-05". min va max ham faqat ISO formatda.

10.2 time uchun step daqiqada yozilgan

step="15" — 15 daqiqa emas, 15 soniya. Tanlagichda soniyalar paydo bo'ladi. Tuzatish: step="900" (15 × 60).

10.3 Butun son kutilgan joyda kasr kerak bo'ldi

Narx maydoni type="number", foydalanuvchi 12500.50 yozdi — forma yuborilmadi: "The two nearest valid values are 12500 and 12501". Tuzatish: step="0.01" yoki step="any".

10.4 Telefon raqami uchun type="number"

Boshidagi + va nol yo'qoladi, e yozish mumkin, g'ildirak raqamni o'zgartiradi. Tuzatish: type="tel" — Matnli maydonlar darsida o'tganmiz.

10.5 datetime-local qiymatini zonasiz saqlash

Server qiymatni o'z vaqt zonasida o'qiydi — band qilish soatlab siljiydi. Tuzatish: server qaysi zona ekanini aniq bilishi kerak (Asia/Tashkent).

11. Mashqlar

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

Har bir savol uchun input ning type qiymatini yozing:

1. Tug'ilgan kuningiz qachon?
2. Nechta osh olasiz?
3. Taksi soat nechada kelsin?
4. Karta amal qilish oyi va yili (masalan, "2028-yil mart").
5. Stol dasturxoni rangini tanlang.

2-mashq (o'rta): Bo'sh joylarni to'ldiring

«Bahor» ertalabki nonushta uchun alohida forma yaratdi. Nonushta soat 7:00 dan 10:00 gacha, har 30 daqiqada. Mehmonlar 1 dan 8 kishigacha.

<input type="time" name="vaqt" min="07:00" max="10:00" step="...">
<input type="number" name="odam" min="..." max="...">

• step qiymati:
• odam uchun min:
• odam uchun max:
• Mehmon 08:30 ni tanladi. Serverga boradigan qiymat:

<label for="vaqt">Vaqt</label>
<input type="time" id="vaqt" name="vaqt"
       min="07:00" max="10:00" step="1800">
<label for="odam">Necha kishi?</label>
<input type="number" id="odam" name="odam" min="1" max="8">

3-mashq (qiyin): Tadbir buyurtmasi formasi

«Bahor» tug'ilgan kun va to'y oldi tadbirlarini qabul qiladi. tadbir/index.html sahifasi uchun forma yozing. Oldingi darslardagi label va for/id bog'lashni unutmang (label: har maydonning nomi).

• Tadbir sanasi: kamida 2026-yil 15-oktabrdan, 2027-yil oxirigacha.
• Boshlanish vaqti: 12:00 dan 20:00 gacha, har soatda.
• Mehmonlar: 10 dan 150 gacha, faqat o'nlik sonlar (10, 20, 30...).
• Bezak rangi: standart qiymati oq.

<form action="https://example.com/tadbir" method="get">
  <p>
    <label for="sana">Tadbir sanasi</label>
    <input type="date" id="sana" name="sana"
           min="2026-10-15" max="2027-12-31">
  </p>
  <p>
    <label for="vaqt">Boshlanish vaqti (12:00–20:00)</label>
    <input type="time" id="vaqt" name="vaqt"
           min="12:00" max="20:00" step="3600">
  </p>
  <p>
    <label for="odam">Mehmonlar soni (10–150)</label>
    <input type="number" id="odam" name="odam"
           min="10" max="150" step="10" value="50">
  </p>
  <p>
    <label for="rang">Bezak rangi</label>
    <input type="color" id="rang" name="rang" value="#ffffff">
  </p>
  <button type="submit">Yuborish</button>
</form>

12. Real ishda

• Bron qilish tizimlari — restoranlar, klinikalar, sartaroshxonalar, avtobus chiptalari. Ularning hammasida sana, vaqt va odam soni bor. Vaqt zonasi xatosi — ular ichida eng qimmatiga tushadiganlardan biri.
• Dizayn tizimlari. Katta kompaniyalar ba'zan brauzer kalendarini o'zlarining chiroyli kalendar komponenti bilan almashtiradi (React'da, kursda alohida o'rganamiz). Lekin telefonda ko'pincha baribir native date qoldiriladi — u tez va qulay.
• Backend dasturchi kelgan 2026-10-05 va 19:30 ni bazaga yozishdan oldin tekshiradi va zonani biriktiradi. Kursning backend qismida buni o'zingiz qilasiz.
• Intervyuda so'rashadi: "Nega sana maydonidan kelgan qiymatni serverda qayta tekshirish kerak?" va "datetime-local qanday muammo keltirib chiqaradi?" Bu darsdan keyin ikkalasiga ham javob bera olasiz.

Xulosa

• number — miqdor uchun; min, max chegara beradi, step esa qadam (standart 1, kasr uchun 0.5, 0.01 yoki any).
• range — taxminiy daraja uchun; qiymati ekranda ko'rinmaydi.
• date, time, datetime-local, month, week — ekranda foydalanuvchi tilida, serverga esa ISO formatida: 2026-10-05, 19:30, 2026-10-05T19:30.
• time da step soniyada: 15 daqiqa = 900.
• Sana-vaqt maydonlari vaqt zonasini yubormaydi — zonani server aniq bilishi kerak.
• color — kichik harfli hex kod, standart #000000.
• HTML'dagi chegaralar — qulaylik; xavfsizlik uchun server baribir tekshiradi.

Keyingi dars: Tanlash maydonlari: checkbox, radio, select, datalist — mehmonga tayyor variantlardan tanlash imkonini beramiz: joy turi, qo'shimcha xizmatlar va taomlar.

Manbalar

• MDN: <input type="number">, <input type="date">, <input type="time">, <input type="datetime-local">, <input type="color"> — developer.mozilla.org
• MDN: "Date and time formats used in HTML" — developer.mozilla.org
• WHATWG HTML: "The input element" — html.spec.whatwg.org