Input turlari — text, email, password, number, tel, url, date

~20 daq · HTML · Formalar

Muammodan boshlaylik

Ro'yxatdan o'tish formasida hamma maydon bir xil:

<input name="email">
<input name="parol">
<input name="yosh">
<input name="telefon">
<input name="tugilgan">

Telefonda foydalanuvchi:

• Email yozayotganda @ belgisini klaviaturaning ichki sahifasidan qidiradi
• Parol yozayotganda — u ekranda ochiq ko'rinadi
• Yoshni yozish uchun harfli klaviaturadan raqamlarga o'tadi
• Tug'ilgan sanani 07.11.2000, 2000-11-07 yoki 7 noyabr deb — har xil formatda yozadi

Bitta atribut — type — bularning hammasini hal qiladi.

text — oddiy matn

<label for="ism">Ism</label>
<input id="ism" name="ism" type="text" autocomplete="name">

Standart tur — type yozilmasa ham text. Bir qatorli matn: ism, shahar, sarlavha.

Foydali atributlar:

email

<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email">

• Telefonda klaviaturada @ va . tugmalari ko'rinadi
• Yuborishda brauzer formatni tekshiradi: ali@ yoki ali.mail.uz — xato (19-dars)
• multiple — vergul bilan bir nechta email

[!INFO] Brauzer faqat formatni tekshiradi (nimadir@nimadir), email haqiqatan mavjudligini emas. a@b ham "to'g'ri" hisoblanadi. Haqiqiy tekshiruv — serverda va tasdiqlash xati orqali.

password

<label for="parol">Parol</label>
<input id="parol" name="parol" type="password" autocomplete="current-password" minlength="8">

• Belgilar nuqtalar bilan yashiriladi
• Parol menejerlari (brauzer, 1Password, Bitwarden) shu maydonni taniydi
• autocomplete="current-password" — kirish formasi; "new-password" — ro'yxatdan o'tish (brauzer kuchli parol taklif qiladi)

Parolni ko'rsatish tugmasi

<input id="parol" name="parol" type="password">
<button type="button" id="korsat">Ko'rsatish</button>

korsat.addEventListener('click', () => {
  const ochiq = parol.type === 'text';
  parol.type = ochiq ? 'password' : 'text';
  korsat.textContent = ochiq ? "Ko'rsatish" : 'Yashirish';
});

type="button" ni unutmang — aks holda tugma formani yuboradi (15-dars).

[!WARNING] type="password" faqat ekrandan yashiradi — ma'lumotni himoya qilmaydi. Forma method="post" va HTTPS orqali yuborilishi shart (15-dars).

number

<label for="yosh">Yoshingiz</label>
<input id="yosh" name="yosh" type="number" min="7" max="100" step="1">

• Telefonda raqamli klaviatura
• Kompyuterda yuqori-pastga strelkalar; ↑ ↓ tugmalari bilan o'zgartirish
• min, max — chegaralar; step — qadam (0.01 — tiyinlar, any — istalgan)

number qachon kerak emas

type="number" — hisoblanadigan sonlar uchun: miqdor, yosh, narx, reyting. Raqamlardan iborat, lekin son bo'lmagan narsalar uchun emas:

<!-- ❌ -->
<input type="number" name="karta">     <!-- boshidagi 0 lar yo'qoladi, strelkalar ma'nosiz -->
<input type="number" name="pochta_indeks">

<!-- ✅ raqamli klaviatura, lekin matn -->
<input type="text" name="karta" inputmode="numeric" autocomplete="cc-number">
<input type="text" name="sms_kod" inputmode="numeric" autocomplete="one-time-code" maxlength="6">

Karta raqami, SMS kod, pasport seriyasi bilan qo'shib hisoblanmaydi. Ular uchun inputmode="numeric" — raqamli klaviatura beradi, lekin number ning muammolarisiz (sichqoncha g'ildiragi bilan tasodifan o'zgarish, boshidagi nollar yo'qolishi).

tel

<label for="tel">Telefon raqam</label>
<input id="tel" name="tel" type="tel" autocomplete="tel" placeholder="+998 90 123 45 67">

• Telefonda raqamli telefon klaviaturasi (+, *, # bilan)
• Brauzer formatni tekshirmaydi — davlatlarda format har xil. Tekshirish kerak bo'lsa — pattern (19-dars)

url

<label for="sayt">Veb-sayt</label>
<input id="sayt" name="sayt" type="url" placeholder="https://example.uz">

• Klaviaturada /, . va .com tugmalari
• Tekshiruv: https:// yoki boshqa protokol bilan boshlanishi kerak — devdocs.uz deb yozilsa xato

search

<form action="/qidiruv" role="search">
  <label for="q" class="sr-only">Qidirish</label>
  <input id="q" name="q" type="search" placeholder="Darslardan qidirish...">
</form>

• Ba'zi brauzerlarda ✕ tozalash tugmasi
• Telefonda Enter tugmasi "Qidirish" ga aylanadi
• role="search" (yoki yangi <search> tegi) — ekran o'quvchilarga "qidiruv hududi" deydi

Sana va vaqt turlari

<label for="tugilgan">Tug'ilgan sana</label>
<input id="tugilgan" name="tugilgan" type="date" min="1920-01-01" max="2020-12-31">

Brauzer taqvim oynasini ko'rsatadi — foydalanuvchi formatni o'ylamaydi.

[!INFO] Ekranda sana foydalanuvchining tiliga qarab ko'rinadi (07.11.2026 yoki 11/07/2026), lekin serverga har doim YYYY-MM-DD formatida ketadi. Server uchun bu juda qulay — format bitta.

min va max ham shu formatda: min="2026-11-07" — o'tgan sanalarni tanlab bo'lmaydi (masalan, bron qilish uchun).

Turlar va telefon klaviaturasi

Nima uchun shunday?

Nima uchun shuncha tur — hammasi baribir matn maydoni, tekshiruvni JavaScript bilan yozsa bo'lmaydimi?

Chunki type faqat tekshiruv emas — u brauzerga maydonning ma'nosini aytadi (9-dars — semantika formalarda ham ishlaydi). Shu ma'no orqali brauzer telefonda to'g'ri klaviaturani ochadi, parol menejeri parolni taklif qiladi, avtoto'ldirish emailni qo'yadi, ekran o'quvchi "email maydoni" deydi, taqvim sanani tanlashni osonlashtiradi. Bularning hech birini JavaScript bilan qilib bo'lmaydi — ular operatsion tizim va brauzerning ichki qismlari. Bitta type="email" — bu bir nechta bepul yaxshilanish.

Xulosa

Eslab qoling:

• type — maydonning ma'nosi: to'g'ri klaviatura, tekshiruv, avtoto'ldirish
• email — @ klaviatura va format tekshiruvi; password — yashirish (himoya — HTTPS)
• number — faqat hisoblanadigan sonlar; karta, kod uchun inputmode="numeric"
• tel — telefon klaviaturasi, formatni tekshirmaydi; url — https:// bilan
• date, time, datetime-local — taqvim; qiymat doim YYYY-MM-DD
• autocomplete — email, tel, current-password, new-password, one-time-code
• readonly — yuboriladi; disabled — yuborilmaydi

Keyingi dars

17-dars: Input turlari — checkbox, radio, range, color, file, hidden