HTML matnli maydonlar: text, email, password, tel, url, search va textarea

Qisqacha: input ning type atributi maydonga qanday ma'lumot kirishini aytadi. email va url yuborishdan oldin formatni tekshiradi, password belgilarni yashiradi, tel va search telefonda mos klaviatura chiqaradi. Ko'p qatorli matn uchun esa textarea ishlatiladi. To'g'ri type — bitta atribut, lekin tekshiruv, klaviatura va avtoto'ldirishni bepul beradi.

Bu darsda

• Oltita matnli type ni farqlaysiz va har biriga mos ma'lumotni tanlaysiz.
• email va url qanday tekshirilishini va nimani tekshirmasligini bilasiz.
• textarea ni rows, cols va wrap bilan yoza olasiz va uning tuzoqlarini taniysiz.
• maxlength, placeholder, size va value atributlarini ishlatasiz.
• «Bahor» formasini to'g'ri turdagi maydonlar bilan yangilaysiz.

Oldin bilishingiz kerak: label: har maydonning nomi, Forma qanday ishlaydi.

1. Nega bu kerak?

«Bahor» formasida hozir hamma maydon bir xil: type="text". Telefonda ochib ko'ring. Telefon raqamini yozish uchun harfli klaviatura chiqadi — raqamlarga o'tish uchun qo'shimcha tugma bosasiz. Email yozganda @ belgisini qidirib yurasiz.

Bundan ham yomoni: kimdir email o'rniga alivaliyev deb yozsa, forma buni jimgina yuboradi. Administrator tasdiqlash xatini yubora olmaydi, mehmon esa javob kutib o'tiradi.

Yechim — bitta atribut. type ni to'g'ri tanlasangiz, brauzer o'zi mos klaviatura chiqaradi, formatni tekshiradi va avtoto'ldirishni taklif qiladi. Hech qanday qo'shimcha kod yozmaysiz.

2. type — maydonning "kasbi"

Kiyim do'konini tasavvur qiling: poyabzal bo'limida o'lchov uchun oyoq o'lchagich, ko'ylak bo'limida esa santimetr lenta turadi. Bo'lim nima sotishini bilsa, kerakli asbobni oldindan tayyorlab qo'yadi. type ham brauzerga maydonning "kasbi"ni aytadi:

type yozilmasa — standart qiymat text. Brauzer tanimaydigan qiymat ham text bo'lib qoladi: type="telefon" xato bermaydi, oddiy matn maydoniga aylanadi.

input ning boshqa turlari ham bor: son, sana, rang, belgilash katakchasi, fayl. Ularni Son, sana, vaqt va rang maydonlari va keyingi darslarda o'rganamiz. Bu dars — faqat matn yoziladigan maydonlar haqida.

3. text: oddiy matn

type="text" — bir qatorli, istalgan matn uchun. Ism, familiya, shahar, mashina raqami:

<label for="ism">Ismingiz</label>
<input type="text" id="ism" name="ism" maxlength="50">

Bir qatorli maydonga ko'p qatorli matnni nusxalab qo'ysangiz, brauzer qator uzilishlarini olib tashlaydi — hammasi bitta qatorga aylanadi.

Bu yerda yangi atribut bor — maxlength. Uni va boshqa umumiy atributlarni 10-bo'limda to'liq ko'ramiz. Hozircha: maxlength="50" — "50 belgidan ortiq yozdirma".

4. email: email manzil

<label for="email">Email (ixtiyoriy)</label>
<input type="email" id="email" name="email">

4.1 Nimani tekshiradi

Formani yuborishdan oldin brauzer email shaklini tekshiradi. ali.example.com deb yozib yuborsangiz, forma ketmaydi. Maydon yonida Chrome'ning xabari chiqadi:

Please include an '@' in the email address. 'ali.example.com' is missing an '@'.

Tarjimasi: "Email manzilga '@' belgisini qo'shing. 'ali.example.com' da '@' yo'q." Brauzer tili o'zbekcha yoki ruscha bo'lsa, xabar ham shu tilda chiqadi.

Brauzer yana bir ishni o'zi qiladi: boshida va oxiridagi bo'sh joylarni olib tashlaydi. Telefonda avtoto'ldirish ko'pincha oxiriga bo'sh joy qo'shib qo'yadi — email maydonida bu muammo emas.

4.2 Nimani tekshirmaydi

Brauzer faqat shaklni tekshiradi: @ bor, undan oldin va keyin kerakli belgilar bor. U quyidagilarni bilmaydi:

• Bunday pochta qutisi haqiqatan mavjudmi? ali@example.com shaklan to'g'ri, lekin bu qutiga xat bormaydi.
• Nuqta bormi? ali@example ham brauzer uchun to'g'ri — standart domen oxiridagi .com ni talab qilmaydi.
• Foydalanuvchi o'z emailini yozdimi yoki birovnikini?

Email haqiqiyligini faqat bitta usul bilan bilish mumkin: unga xat yuborib, tasdiqlash havolasini bostirish. Bu backend ishi.

4.3 multiple

multiple atributi vergul bilan ajratilgan bir nechta emailga ruxsat beradi:

<input type="email" id="mehmonlar" name="mehmonlar" multiple>

ali@example.com, vali@example.com — ikkalasi ham tekshiriladi.

Tekshirib ko'ring: type="email" maydoniga malika@example yozildi. Forma yuboriladimi? Bu email ishlaydimi?

5. password: parol

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

Yozilgan har bir belgi nuqta (•••••) bo'lib ko'rinadi. autocomplete="current-password" — brauzer va parol menejeriga "bu yerga foydalanuvchining mavjud paroli yoziladi" degan ishora. Yangi parol uchun esa new-password yoziladi. Bu atributni autocomplete darsida to'liq o'rganamiz — hozircha parol maydonida uni doim yozing.

Brauzer yana bir nechta narsani o'zi qiladi:

• Maydondan matnni nusxalash (Ctrl + C) va qirqib olish ishlamaydi.
• Parol menejeri (Ish joyini tayyorlash darsida o'rnatgansiz) va brauzer parolni saqlashni taklif qiladi.
• Telefonda avtotuzatish va bosh harfga o'tkazish o'chadi.

"Parolni ko'rsatish" (ko'z belgisi) tugmasi HTML'da yo'q — uni JavaScript bilan yasaysiz. Microsoft Edge esa bunday tugmani o'zi qo'shadi.

Diqqat: password — shifrlash emas. U faqat ekranda yelkangiz ortidan qarab turgan odamdan yashiradi. Forma qanday ishlaydi darsidagi Payload yorlig'ida parol ochiq matn bo'lib turadi. Yo'lda uni faqat HTTPS himoya qiladi (12-bo'lim).

Parol maydoniga kichik maxlength qo'ymang: parol menejeri yaratgan uzun va kuchli parol sig'may qoladi. Parolni minimal uzunlikka tekshirish — Brauzer validatsiyasi darsida.

6. tel: telefon raqami

<label for="telefon">Telefon</label>
<input type="tel" id="telefon" name="telefon"
       placeholder="+998 90 000 00 00">

Telefonda raqamli klaviatura chiqadi — xuddi qo'ng'iroq qilishdagidek, +, * va # bilan. Kompyuterda esa tel oddiy matn maydonidan farq qilmaydi.

Ajablanarli fakt: tel hech narsani tekshirmaydi. salom deb yozsangiz ham forma yuboriladi. Sabab — dunyoda telefon raqami formatlari juda xilma-xil: O'zbekistonda +998 90 000 00 00, boshqa davlatlarda uzunligi ham, yozilishi ham boshqa. Brauzer bitta qoidani hamma uchun qo'ya olmaydi.

Formatni o'zingiz belgilaysiz — pattern atributi bilan. O'zbek raqami uchun namunani keyingi darsda, Mobil klaviatura va kiritish yordamchilari da yozamiz.

7. url: veb-manzil

<label for="sahifa">Instagram sahifangiz</label>
<input type="url" id="sahifa" name="sahifa"
       placeholder="https://instagram.com/sizning_sahifa">

url to'liq manzilni talab qiladi — sxema bilan. instagram.com/sizning_sahifa yuborilmaydi, Chrome shunday deydi:

Please enter a URL.

Tarjimasi: "URL kiriting." Ko'p foydalanuvchi https:// ni yozmaydi va bu xabarni tushunmaydi. Shuning uchun placeholder'da to'liq namunani ko'rsating yoki label'da yozing: "https:// bilan boshlang".

8. search: qidiruv

<input type="search" id="menyu-qidiruv" name="q">

search — qidiruv so'zi uchun matn maydoni. Oddiy text dan farqi kichik, lekin foydali:

• Chrome va Safari'da maydonga yozganda o'ng tomonda × tugmasi chiqadi — bosilsa, matn o'chadi. Chrome'da Esc ham tozalaydi.
• Telefonda klaviaturaning Enter tugmasi o'rnida "Qidirish" yoki lupa belgisi chiqadi.
• Ekran o'quvchi uni "qidiruv maydoni" deb e'lon qiladi.

«Bahor» menyusidagi qidiruv aynan shu turda. Uni search landmarki ichiga joylash — to'liq, to'g'ri qidiruv bloki.

Tekshirib ko'ring: Qaysi type ni tanlaysiz? 1) Mehmonning familiyasi. 2) Choyxona administratorining paroli. 3) Tadbir tashkilotchisining sayti. 4) Menyudan taom izlash. 5) Mehmonning telefoni.

9. textarea: ko'p qatorli matn

9.1 Asosiy yozilishi

input faqat bir qator. Izoh, sharh, xabar uchun esa ko'p qatorli maydon kerak — textarea:

<label for="izoh">Qo'shimcha istaklar</label>
<textarea id="izoh" name="izoh" rows="4" cols="40"></textarea>

input dan uchta farqi bor:

1. textarea — bo'sh element emas. Uning yopuvchi tegi majburiy: </textarea>.
2. Boshlang'ich matn value atributiga emas, teglar orasiga yoziladi.
3. Unda type yo'q.

rows — nechta qator ko'rinishi (standart 2), cols — kengligi, belgilar soni bo'yicha (standart 20). Aniq o'lchamni keyinroq CSS bilan beramiz. Ko'p brauzerda burchagida kichik "tutqich" bor — foydalanuvchi uni tortib, maydonni kattalashtira oladi.

9.2 Ichidagi bo'sh joylar saqlanadi

Teglar orasidagi hamma narsa — bo'sh joylar va qator uzilishlari ham — boshlang'ich matn bo'ladi. Bo'sh joylar darsida ko'rgandek, HTML odatda bo'sh joylarni yig'adi. textarea ichida esa yo'q:

<!-- ❌ Chiroyli tekislangan, lekin maydon bo'sh emas -->
<textarea id="izoh" name="izoh">
</textarea>

Bu maydonda bitta bo'sh qator bor. Foydalanuvchi bosganda kursor ikkinchi qatorga tushadi, placeholder esa ko'rinmaydi — maydon "bo'sh emas". Qoida: <textarea ...></textarea> — orasida hech narsa yo'q, bitta qatorda.

9.3 wrap: qator uzilishlari qanday yuboriladi

Foydalanuvchi uzun gap yozsa, u maydon chetiga yetganda keyingi qatorga o'tadi. Bu ko'rinishdagi uzilish. wrap atributi uning yuborilishini boshqaradi:

wrap="hard" faqat cols bilan ishlaydi. U kam ishlatiladi — qat'iy qator uzunligi kerak bo'lgan eski tizimlar uchun.

Qiziq detal: foydalanuvchi bosgan Enter qaysi tizimda bo'lmasin, yuborishda %0D%0A bo'lib ketadi. Bu — CRLF, Windows uslubidagi qator oxiri. Server buni bilishi kerak.

9.4 textarea va avtomatik yopish tuzog'i

<!-- ❌ textarea o'zini o'zi yopa olmaydi -->
<textarea name="izoh" />
<button type="submit">Yuborish</button>

<textarea /> yozuvi uni yopmaydi. Parser oxiridagi / ni e'tiborsiz qoldiradi va </textarea> ni qidiradi. Topguncha sahifaning qolgan hamma kodi — tugma ham — maydon ichidagi matnga aylanadi. Tugma yo'qoladi, maydonda esa <button type="submit">... yozuvi turadi.

10. Umumiy atributlar

Bu atributlar yuqoridagi turlarning ko'pchiligida va textarea da ishlaydi:

Va yana bittasi — size: maydonning ko'rinadigan kengligi, belgilar hisobida (standart 20). U kiritiladigan matnni cheklamaydi, faqat ko'rinishni o'zgartiradi. Bugun kenglikni CSS bilan berish odatiy — size ni eski kodlarda uchratasiz.

maxlength haqida uchta gap:

• Chegaraga yetganda foydalanuvchi boshqa harf yoza olmaydi. Uzunroq matn nusxalab qo'yilsa, ortig'i kesib tashlanadi.
• Kesilganini foydalanuvchi sezmay qolishi mumkin. Shuning uchun chegarani label yonida ayting: "Qo'shimcha istaklar (200 belgigacha)".
• U faqat brauzerdagi yordam. Server chegarani baribir o'zi tekshiradi (12-bo'lim).

placeholder — namuna, nom emas (o'tgan dars).

Boshqa atributlar ham bor, ularni o'z darslarida o'rganamiz: pattern — keyingi darsda; required va minlength — Brauzer validatsiyasi; readonly va disabled — Maydon holatlari; autocomplete — autocomplete.

Tekshirib ko'ring: <input type="text" name="shahar" size="10" maxlength="5"> maydoniga Toshkent yozmoqchisiz. Nima bo'ladi?

11. «Bahor»: to'g'ri turdagi forma

Joy band qilish formasini yangilaymiz. Telefon — tel, ixtiyoriy email — email, qo'shimcha istaklar — textarea:

<form method="post">
  <div>
    <label for="ism">Ismingiz</label>
    <input type="text" id="ism" name="ism" maxlength="50">
  </div>
  <div>
    <label for="telefon">Telefon</label>
    <input type="tel" id="telefon" name="telefon"
           placeholder="+998 90 000 00 00">
  </div>
  <div>
    <label for="email">Email (ixtiyoriy, tasdiq xati uchun)</label>
    <input type="email" id="email" name="email">
  </div>
  <div>
    <label for="odam">Necha kishi</label>
    <input type="text" id="odam" name="odam">
  </div>
  <div>
    <label for="izoh">Qo'shimcha istaklar (200 belgigacha)</label>
    <textarea id="izoh" name="izoh" rows="3"
              maxlength="200"></textarea>
  </div>
  <button type="submit">Joy band qilish</button>
</form>

"Necha kishi" hali ham text — son maydonini Son, sana, vaqt va rang maydonlari darsida ko'ramiz.

Telefoningizda sinab ko'ring: har maydonga bosganda klaviatura o'zgaradimi? Kompyuterdagi sahifani telefonda qanday ochishni keyingi darsda ko'rsatamiz.

12. Hujumchi nigohi

type, maxlength va brauzer tekshiruvi — foydalanuvchi uchun qulaylik. Hujumchi uchun esa ular to'siq emas:

• Tekshiruvni chetlab o'tish. DevTools'da type="email" ni type="text" ga o'zgartirib, istalgan matnni yuborish mumkin. curl bilan esa forma umuman kerak emas: curl -d "email=salom&izoh=...". Server har bir maydonni o'zi tekshiradi.
• Katta matn. maxlength="200" bo'lsa ham, curl 10 megabaytli izoh yuborishi mumkin. Serverda uzunlik chegarasi bo'lmasa, bunday so'rovlar bazani to'ldirib, saytni sekinlashtiradi.
• Xavfli URL. type="url" shaklni tekshiradi, lekin xavfsizlikni emas. javascript:alert(1) — brauzer uchun to'g'ri URL. Bu manzilni keyin saytda havola sifatida ko'rsatsangiz, bosgan odamning brauzerida hujumchining kodi ishlaydi. Server faqat https:// bilan boshlanadigan manzillarni qabul qilishi kerak — HTML darajasidagi xavfsizlik darsida.
• Ochiq parol. type="password" Network'da ochiq ko'rinadi. HTTPS'siz sayt parolni yo'ldagi har kimga "ko'rsatadi" — Wi-Fi egasiga ham.

13. Ko'p uchraydigan xatolar

13.1 textarea ga value yozish

<!-- ❌ value e'tiborsiz qoldiriladi -->
<textarea name="izoh" value="Deraza yonida"></textarea>

Maydon bo'sh chiqadi. Tuzatish: matnni teglar orasiga yozing: <textarea name="izoh">Deraza yonida</textarea>.

13.2 Xato yozilgan type

type="phone", type="mail", type="telefon" — brauzer ularni tanimaydi va jimgina text qiladi. Klaviatura ham, tekshiruv ham yo'q. Tuzatish: faqat standart nomlar: tel, email. Validator noto'g'ri qiymatni ko'rsatadi.

13.3 Telefon uchun type="number"

Raqam kiritiladi-ku, deb telefon uchun son maydonini tanlash — juda keng tarqalgan xato. Nega bu yomon ekanini keyingi darsda batafsil ko'ramiz. Hozircha qoida: telefon — tel.

13.4 url da https:// siz namuna

Label yoki placeholder'da instagram.com/sizning_sahifa ko'rsatilgan, maydon esa https:// talab qiladi. Foydalanuvchi namunaga qarab yozadi va "Please enter a URL" xatosini oladi. Tuzatish: namuna maydon talabiga mos bo'lsin.

13.5 textarea ichida bo'sh joy va yopilmagan teg

9.2 va 9.4-bo'limlarda ko'rdik: teglar orasidagi bo'sh joy — boshlang'ich matn, <textarea /> esa sahifani "yutib yuboradi". Tuzatish: <textarea ...></textarea> doim bir qatorda va yopuvchi teg bilan.

14. Mashqlar

1-mashq (oson): Turini tanlang

Har bir maydon uchun type ni yozing (yoki textarea deb yozing):

1. Mehmonning Telegram'dagi ismi.
2. Choyxonaga ish so'rab kelgan odamning rezyumesi haqida qisqa matn (bir necha paragraf).
3. Yetkazib berish kuryerining telefoni.
4. Hamkor kompaniyaning sayti.
5. Buxgalteriya xodimining emaili.

2-mashq (o'rta): Xatolarni toping

Bu formada 4 ta xato bor. Toping va tuzating:

<form method="post">
  <label for="login">Login</label>
  <input type="text" id="login" name="login">
  <label for="parol">Parol</label>
  <input type="pasword" id="parol" name="parol" maxlength="6">
  <label for="izoh">Izoh</label>
  <textarea id="izoh" name="izoh" value="Yo'q" />
  <button type="submit">Kirish</button>
</form>

<form method="post">
  <label for="login">Login</label>
  <input type="text" id="login" name="login">
  <label for="parol">Parol</label>
  <input type="password" id="parol" name="parol"
         autocomplete="current-password">
  <label for="izoh">Izoh</label>
  <textarea id="izoh" name="izoh">Yo'q</textarea>
  <button type="submit">Kirish</button>
</form>

3-mashq (qiyin): Tadbir tashkilotchilari uchun ariza

«Bahor» to'y va yubileylar uchun zal ijaraga beradi. tadbirlar/ariza.html sahifasiga forma yozing:

• Tashkilotchining ismi (ko'pi bilan 60 belgi).
• Telefon (namuna bilan).
• Email.
• Kompaniya sayti yoki Instagram sahifasi (ixtiyoriy).
• Tadbir haqida (5 qator ko'rinsin, ko'pi bilan 500 belgi).

Har maydonga label, POST metodi. Keyin Network panelida yuborib, Payload'ni tekshiring: textarea dagi qator uzilishi qanday ko'rinadi?

<form method="post">
  <div>
    <label for="tashkilotchi">Ismingiz</label>
    <input type="text" id="tashkilotchi" name="ism"
           maxlength="60">
  </div>
  <div>
    <label for="ariza-telefon">Telefon</label>
    <input type="tel" id="ariza-telefon" name="telefon"
           placeholder="+998 90 000 00 00">
  </div>
  <div>
    <label for="ariza-email">Email</label>
    <input type="email" id="ariza-email" name="email">
  </div>
  <div>
    <label for="ariza-sayt">Sayt yoki Instagram (ixtiyoriy)</label>
    <input type="url" id="ariza-sayt" name="sayt"
           placeholder="https://example.com">
  </div>
  <div>
    <label for="tadbir">Tadbir haqida (500 belgigacha)</label>
    <textarea id="tadbir" name="tadbir" rows="5"
              maxlength="500"></textarea>
  </div>
  <button type="submit">Ariza yuborish</button>
</form>

15. Real ishda

• Konversiya. Onlayn do'konlarda to'g'ri type va klaviatura formani to'ldirish vaqtini sezilarli qisqartiradi. Har bir ortiqcha tugma bosish — mijozning bir qismi formani tashlab ketishi.
• Frontend va backend kelishuvi. maxlength="200" HTML'da bo'lsa, serverda ham 200 bo'lishi kerak. Keyinroq bitta sxema ikkala tomonda ishlatiladigan vositalarni o'rganasiz (masalan, Zod).
• Code review'da eng ko'p yoziladigan izohlardan biri: "Telefon uchun type="number" emas, tel". Keyingi darsda sababini ko'rasiz.
• Intervyuda: "input type="email" emailni to'liq tekshiradimi?" Javob: yo'q, faqat shaklni; haqiqiylik — tasdiqlash xati bilan, xavfsizlik — serverda.

Xulosa

• type maydonning "kasbi": klaviatura, tekshiruv va avtoto'ldirishni belgilaydi; noma'lum qiymat — text.
• email va url faqat shaklni tekshiradi; url sxemani (https://) talab qiladi.
• password faqat ekranda yashiradi — shifrlamaydi; tel hech narsani tekshirmaydi.
• search tozalash tugmasi va "Qidirish" klaviaturasini beradi.
• textarea — yopuvchi tegi majburiy, boshlang'ich matn teglar orasida, bo'sh joylar saqlanadi.
• maxlength, placeholder, size — yordam; asl tekshiruv doim serverda.

Keyingi dars: Mobil klaviatura va kiritish yordamchilari — inputmode, enterkeyhint va pattern bilan telefonda formani ikki barobar tez to'ldiriladigan qilamiz va o'zbek telefon raqamini tekshiramiz.

Manbalar

• MDN: "<input>: The Input (Form Input) element" (type bo'limlari) va "<textarea>" — developer.mozilla.org
• WHATWG HTML: "The input element" va "The textarea element" — html.spec.whatwg.org