HTML

Formalar

Formalar — foydalanuvchidan ma'lumot olishning asosiy usuli. Ro'yxatdan o'tish, tizimga kirish, qidiruv, izoh qoldirish — bularning barchasi formalar orqali amalga oshadi. Ushbu darsda formani qanday qurish, turli maydonlar (input) yaratish va ularni tekshirish (validatsiya)ni o'rganamiz.

form tegi

Barcha kiritish maydonlari <form> tegi ichiga joylashadi. Bu teg — foydalanuvchi to'ldiradigan ma'lumotlarni birlashtiruvchi "idish". Uning ikkita muhim atributi bor:

action — forma yuborilganda ma'lumotlar qayerga jo'natilishini bildiradi (server manzili);
method — ma'lumot qanday yuborilishini bildiradi: GET yoki POST.

<form action="/royxatdan-otish" method="POST">
  <!-- Bu yerga maydonlar joylashadi -->
</form>

GET — ma'lumotni URL manzili orqali yuboradi (masalan, qidiruv uchun, ma'lumot maxfiy bo'lmaganda). POST — ma'lumotni yashirin (URL'da ko'rinmasdan) yuboradi. Parol yoki shaxsiy ma'lumot uchun har doim POST ishlatiladi.

input tegi va uning turlari

<input> — formaning eng ko'p ishlatiladigan tegi. Bu bitta teg type atributiga qarab butunlay boshqacha maydonga aylanadi. input — bo'sh teg (yopuvchisi yo'q).

Matn maydoni: text

Eng oddiy tur — oddiy matn kiritish maydoni:

<input type="text" name="ism" placeholder="Ismingizni kiriting">

type="text" — maydon turi (oddiy matn);
name — maydon nomi (serverga yuborilganda shu nom bilan boradi, majburiy);
placeholder — maydon bo'sh turganda ko'rinadigan namuna matn ("maslahat").

Parol: password

Parol maydoni — kiritilgan belgilar nuqta yoki yulduzcha bilan yashiriladi:

<input type="password" name="parol" placeholder="Parolingiz">

Elektron pochta: email

Bu tur brauzerga "bu maydon email bo'lishi kerak" deb aytadi. Brauzer avtomatik ravishda @ belgisi borligini tekshiradi:

<input type="email" name="email" placeholder="pochta@example.com">

Raqam: number

Faqat raqam kiritish uchun. Ko'pincha eng kichik va eng katta qiymat ham belgilanadi:

<input type="number" name="yosh" min="18" max="100">

min — eng kichik ruxsat etilgan qiymat, max — eng katta qiymat.

Sana: date

Sana tanlash uchun. Brauzer avtomatik ravishda kalendar ko'rsatadi:

<input type="date" name="tugilgan-sana">

Belgilash katakchasi: checkbox

checkbox — foydalanuvchi bir yoki bir nechta variantni belgilashi mumkin bo'lgan katakcha:

<input type="checkbox" name="qoidalar" id="qoidalar">
<label for="qoidalar">Men qoidalarga roziman</label>

Yakka tanlov: radio

radio — bir nechta variantdan faqat bittasini tanlash uchun. Bir guruhga tegishli radiolar bir xil name ga ega bo'lishi kerak:

<input type="radio" name="jins" id="erkak" value="erkak">
<label for="erkak">Erkak</label>
<input type="radio" name="jins" id="ayol" value="ayol">
<label for="ayol">Ayol</label>

Radiolar bir xil name ga ega bo'lganda, ular bitta guruh hisoblanadi — foydalanuvchi ulardan faqat bittasini tanlay oladi. Agar name har xil bo'lsa, har biri alohida tanlanadi va bu xato bo'ladi.

label tegi

<label> — kiritish maydoniga izoh (yorliq) qo'shadi. Bu shunchaki matn emas: label maydonga bog'lanadi va uni bosganda maydon avtomatik faollashadi. Bu ayniqsa checkbox va radiolar uchun qulay.

Bog'lash ikki xil usulda bo'ladi. Birinchi usul — labelning for atributini inputning id atributiga tenglashtirish:

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

Ikkinchi usul — inputni labelning ichiga joylash:

<label>
  Ismingiz:
  <input type="text" name="ism">
</label>

Har bir kiritish maydoniga label qo'shishni odat qiling. Bu foydalanish qulayligi (a11y) uchun juda muhim — ekran o'quvchi dasturlar maydonning nima uchun ekanini aynan label orqali biladi. Bosish sohasi ham kengayadi, bu telefonlarda qulay.

Ochiluvchi ro'yxat: select va option

<select> — bosilganda ochiladigan variantlar ro'yxati (dropdown). Har bir variant <option> tegi bilan yoziladi:

<label for="shahar">Shahringiz:</label>
<select name="shahar" id="shahar">
  <option value="toshkent">Toshkent</option>
  <option value="samarqand">Samarqand</option>
  <option value="buxoro">Buxoro</option>
</select>

Har bir <option>ning value atributi — serverga yuboriladigan qiymat, teglar orasidagi matn esa — foydalanuvchi ko'radigan yozuv. Boshlang'ich (namuna) variant qo'shish uchun birinchi optionni disabled selected qilib qo'yish mumkin:

<select name="shahar">
  <option value="" disabled selected>Shaharni tanlang</option>
  <option value="toshkent">Toshkent</option>
  <option value="samarqand">Samarqand</option>
</select>

Katta matn maydoni: textarea

<input type="text"> bitta qatorli. Agar foydalanuvchi uzun matn (izoh, xabar) yozishi kerak bo'lsa, <textarea> ishlatiladi. Bu — juft teg:

<label for="izoh">Izohingiz:</label>
<textarea id="izoh" name="izoh" rows="5" cols="30" placeholder="Fikringizni yozing..."></textarea>

rows — ko'rinadigan qatorlar soni (balandlik), cols — ko'rinadigan ustunlar soni (kenglik).

textareada boshlang'ich matn value atributida emas, balki ochuvchi va yopuvchi teg orasida yoziladi. Shu sababli ochuvchi va yopuvchi teg orasiga ortiqcha bo'shliq qo'ymang — u ham matn hisoblanadi.

Tugmalar: button

Formani yuborish uchun tugma kerak. Uni ikki xil usulda yasash mumkin:

<button type="submit">Yuborish</button>
<input type="submit" value="Yuborish">

<button> tegining type atributi uch xil bo'ladi:

type="submit" — formani yuboradi (standart qiymat);
type="reset" — barcha maydonlarni tozalaydi (boshlang'ich holatga qaytaradi);
type="button" — hech narsa qilmaydi (JavaScript bilan boshqariladigan oddiy tugma).

<button> ni afzal ko'ring, chunki uning ichiga matn, rasm yoki boshqa teglarni joylash mumkin. <input type="submit"> esa faqat oddiy matn qabul qiladi.

Validatsiya atributlari

HTML formani o'zi tekshira oladi — foydalanuvchi noto'g'ri ma'lumot kiritsa yoki majburiy maydonni bo'sh qoldirsa, forma yuborilmaydi. Buning uchun maxsus atributlar bor:

required — maydonni to'ldirish majburiy. Bo'sh bo'lsa forma yuborilmaydi;
minlength / maxlength — eng kam / eng ko'p belgilar soni;
min / max — raqam va sana uchun eng kichik / eng katta qiymat;
pattern — matn ma'lum bir namunaga (regexp shabloniga) mos kelishi kerak.

<form action="/kirish" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="parol">Parol:</label>
  <input type="password" id="parol" name="parol" required minlength="8">

  <button type="submit">Kirish</button>
</form>

Bu misolda: email maydoni to'ldirilishi shart va @ belgisi bo'lishi kerak; parol maydoni to'ldirilishi shart va kamida 8 ta belgidan iborat bo'lishi kerak. Bu shartlar bajarilmasa, brauzer ogohlantirish ko'rsatadi va formani yubormaydi.

HTML validatsiyasi — birinchi himoya qatlami, lekin u yetarli emas! Tajribali foydalanuvchi uni chetlab o'tishi mumkin. Shuning uchun serverda ham ma'lumotni albatta qayta tekshirish shart. HTML validatsiyasi — bu qulaylik, xavfsizlik emas.

To'liq forma misoli

Barcha o'rganilganlarni birlashtirgan ro'yxatdan o'tish formasi:

<form action="/royxat" method="POST">
  <h2>Ro'yxatdan o'tish</h2>

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

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

  <label for="yosh">Yosh:</label>
  <input type="number" id="yosh" name="yosh" min="18" max="100">

  <label for="shahar">Shahar:</label>
  <select id="shahar" name="shahar">
    <option value="toshkent">Toshkent</option>
    <option value="samarqand">Samarqand</option>
  </select>

  <label>
    <input type="checkbox" name="rozilik" required>
    Men shartlarga roziman
  </label>

  <button type="submit">Ro'yxatdan o'tish</button>
</form>

Xulosa

<form> — maydonlarni birlashtiradi; action (qayerga), method (GET/POST) atributlari bilan;
<input> — type ga qarab har xil: text, password, email, number, date, checkbox, radio;
name — serverga yuborishda maydon nomi (majburiy); placeholder — namuna matn;
<label> — maydon yorlig'i, for orqali id ga bog'lanadi (a11y uchun muhim);
<select>/<option> — ochiluvchi ro'yxat; <textarea> — ko'p qatorli matn;
<button type="submit"> — formani yuboradi;
required, minlength, min/max, pattern — brauzer validatsiyasi (lekin serverda ham tekshiring!).