3.3-dars — Formalar: form, input, button

Formalar — foydalanuvchidan ma'lumot yig'ish usuli. Qidiruv qatoriga matn kiritganingizda, ro'yxatdan o'tishni to'ldirganingizda yoki izoh qoldirganingizda — siz formadan foydalanasiz. Forma — bu kiritish maydonlarini guruhlaydigan va ma'lumotlarni serverga yuboradigan konteyner.

Formaning asosiy elementlari:

• <form> — forma konteyneri
• <input> — ma'lumot kiritish maydoni
• <label> — maydon uchun yorliq (bosiladigan!)
• <button> — yuborish tugmasi
• placeholder — maydon ichidagi maslahat matni

Bu darsda biz server qismini ulamaymiz — tugmalar ma'lumotlarni haqiqatan yubormaydi. Lekin siz formalarni to'g'ri yaratishni o'rganasiz va keyinroq, JavaScript yoki server tillarini o'rganganingizda, ularni "jonlantirishingiz" mumkin bo'ladi.

Teg <form> — bu ichida formaning barcha elementlari joylashgan konteyner. U o'zi hech narsa ko'rsatmaydi, lekin maydonlarni guruhlaydi va ma'lumotlar qayerga va qanday yuborilishini belgilaydi.

<form> ning ikkita muhim atributi bor:

• action — ma'lumotlar yuboriladigan URL (masalan, action="/search")
• method — yuborish usuli: GET (ma'lumotlar manzil qatorida) yoki POST (ma'lumotlar so'rov tanasida)

<form action="/search" method="GET">
  
</form>

GET qidiruv va filtrlar uchun ishlatiladi (ma'lumotlar URL da ko'rinadi). POST — parollarni yuborish, ro'yxatdan o'tish uchun (ma'lumotlar yashirin). Bizning misollarimizda GET dan foydalanamiz.

Teg <input> — formaning eng ommabop elementi. Bu foydalanuvchi ma'lumot kiritadigan maydon. <input> ning yopuvchi tegi yo'q (u yakka teg).

Eng muhim atribut — type. U maydon qanday ekanligini belgilaydi: text — oddiy matn, password — parol (belgilar yashirin), email — email, number — son, checkbox — belgi katakchasi, radio — radio-tugma va boshqalar.

<form>
  <input type="text">        <!-- Matn maydoni -->
  <input type="password">    <!-- Parol maydoni -->
  <input type="email">       <!-- Email maydoni -->
  <input type="number">      <!-- Son maydoni -->
  <input type="checkbox">    <!-- Belgi katakchasi -->
  <input type="radio">       <!-- Radio-tugma -->
  <input type="submit">      <!-- Yuborish tugmasi -->
</form>

Yana type="search" (qidiruv maydoni), type="tel" (telefon), type="url" (havola), type="date" (sana), type="color" (rang tanlash), type="file" (fayl yuklash) mavjud. Bu darsda asosiylariga e'tibor qaratamiz.

<input> ning muhim atributi — name. Bu maydonning nomi bo'lib, ma'lumotlar shu nom ostida serverga yuboriladi. name siz maydon ma'lumotlari yuborilmaydi.

<input type="text" name="username">
<input type="email" name="email">
<input type="password" name="password">

Foydalanuvchi formani yuborganda, server ma'lumotlarni nom=qiymat juftliklari sifatida oladi: username=Ivan, email=ivan@mail.ru.

placeholder atributi — foydalanuvchi hali hech narsa kiritmagan paytda maydon ichida ko'rsatiladigan maslahat matni. Foydalanuvchi yozishni boshlaganda, maslahat yo'qoladi. Bu qulay — har bir maydonni tashqarida alohida imzolash shart emas.

<input type="text" name="query" placeholder="Masalan, mushuklar...">
<input type="email" name="email" placeholder="your@email.com">
<input type="password" name="pass" placeholder="Parolni kiriting">

Placeholder <label> uchun almashtiruvchi emas. Ham placeholder, ham label ishlatgan yaxshiroq. Placeholder formatni ko'rsatadi, label esa maydonning vazifasini tushuntiradi.

Faqat placeholder ga tayanmang — foydalanuvchi matn kiritishni boshlashi bilan maslahat yo'qoladi. Agar maydon murakkab bo'lsa, doimiy yorliq uchun label dan foydalanish yaxshiroq.

Teg <label> kiritish maydoni uchun yorliq yaratadi. Uning asosiy xususiyati — bosiladiganlik: agar label ustiga bossangiz, fokus tegishli maydonga o'tadi. Bu foydalanuvchi uchun, ayniqsa mobil qurilmalarda, juda qulay.

Label ni input bilan bog'lashning ikki usuli bor:

1-usul: Label ning for atributi input ning id siga mos keladi.

<label for="username">Foydalanuvchi nomi:</label>
<input type="text" id="username" name="username">

2-usul: Input ni label ichiga joylashtirish (soddaroq, lekin stilizatsiya uchun kamroq moslashuvchan).

<label>
  Foydalanuvchi nomi:
  <input type="text" name="username">
</label>

Biz birinchi usuldan (for/id bilan) foydalanamiz — u haqiqiy loyihalarda ko'proq tarqalgan va stilizatsiya uchun qulayroq.

Teg <button> tugma yaratadi. Tugma ichiga matn, ikonka yoki hatto rasm joylashtirish mumkin. Bu juft teg: <button>Bosing meni</button>.

<button> ning type atributi bor:

• type="submit" — formani yuboradi (standart qiymat)
• type="button" — oddiy tugma (hech narsa yubormaydi, JavaScript uchun kerak)
• type="reset" — formaning barcha maydonlarini tozalaydi

<button type="submit">Yuborish</button>
<button type="button">Oddiy tugma</button>
<button type="reset">Tozalash</button>

Shuningdek <input type="submit"> ham bor, u xuddi shu ishni bajaradi, lekin <button> qulayroq — ichiga ikonka qo'shish va uni moslashuvchanroq bezash mumkin.

Endi o'rganganlarimizni ikkita maydonli oddiy formaga birlashtiramiz:

<form action="/login" method="POST">
  <label for="login">Login:</label>
  <input type="text" id="login" name="login" placeholder="Loginni kiriting">

  <label for="pass">Parol:</label>
  <input type="password" id="pass" name="pass" placeholder="Parolni kiriting">

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

Tahlil:

• action="/login" — ma'lumotlar /login sahifasiga yuboriladi
• method="POST" — parol manzil qatorida ko'rinmaydi
• label for="login" → input id="login" — yorliqning maydon bilan bog'lanishi
• type="password" — belgilar nuqtalar bilan yashiriladi
• placeholder — maydonlar ichidagi maslahatlar
• button type="submit" — yuborish tugmasi

O'z sahifangizda ushbu formani yaratib ko'ring. Forma hali ishlamaydi (ma'lumotlarni qayta ishlaydigan server yo'q), lekin uning qanday ko'rinishini ko'rasiz. Tugma sahifani qayta yuklaydi — bu server bo'lmagan GET/POST uchun normal xatti-harakat.

Yandeks yoki Google dagi kabi qidiruv formasi yaratamiz. U bitta matn maydoni va tugmadan iborat, ma'lumotlar esa GET usulida yuboriladi (so'rov URL da ko'rinishi uchun).

<form action="https://www.google.com/search" method="GET">
  <label for="search">Internetdan qidirish:</label><br>
  <input type="text" id="search" name="q" placeholder="Nimani qidiramiz?" style="width: 300px; padding: 8px; font-size: 16px;">
  <button type="submit" style="padding: 8px 16px; background: #f97316; color: white; border: none; border-radius: 4px;">Qidirish</button>
</form>

E'tibor bering: name="q" — Google dagi qidiruv parametri aynan shunday nomlanadi (?q=so'rov). Agar bu formani brauzerda ochsangiz, "mushuklar" deb yozib tugmani bossangiz, siz https://www.google.com/search?q=mushuklar sahifasiga o'tasiz!

Mana bezalgan blokka o'ralgan chiroyliroq versiyasi:

<div style="background: #f5f5f5; padding: 30px; border-radius: 12px; max-width: 500px;">
  <h3 style="margin-top: 0;">🔍 Internetdan qidirish</h3>
  <form action="https://www.google.com/search" method="GET">
    <label for="search-input" style="display: block; margin-bottom: 8px; font-weight: bold;">
      So'rovni kiriting:
    </label>
    <input type="text" id="search-input" name="q" placeholder="Qidiruv so'rovini kiriting..."
      style="width: 100%; padding: 10px; font-size: 16px; border: 2px solid #ddd; border-radius: 6px; box-sizing: border-box;">
    <br><br>
    <button type="submit"
      style="background: #f97316; color: white; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer;">
      Topish
    </button>
  </form>
</div>

Bu yerga biz quyidagilarni qo'shdik:

• Burchaklari yumaloqlangan kulrang div — forma kartochkasi
• Chiroyi uchun emoji bilan sarlavha
• box-sizing: border-box — padding maydon kengligini oshirmasligi uchun
• cursor: pointer — tugma ustiga kelganda qo'l shaklidagi kursor

Endi kirish formasini (login + parol + tugma) yaratamiz — bu har bir saytda uchraydigan narsa:

<div style="background: #fafafa; padding: 30px; border-radius: 12px; max-width: 400px; border: 1px solid #eee;">
  <h3 style="margin-top: 0; text-align: center;">🔐 Saytga kirish</h3>

  <form action="/login" method="POST">
    <div style="margin-bottom: 15px;">
      <label for="login-email" style="display: block; margin-bottom: 5px; font-weight: bold;">Email:</label>
      <input type="email" id="login-email" name="email" placeholder="your@email.com"
        style="width: 100%; padding: 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box;">
    </div>

    <div style="margin-bottom: 15px;">
      <label for="login-pass" style="display: block; margin-bottom: 5px; font-weight: bold;">Parol:</label>
      <input type="password" id="login-pass" name="password" placeholder="Parolni kiriting"
        style="width: 100%; padding: 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box;">
    </div>

    <button type="submit"
      style="width: 100%; background: #ea580c; color: white; padding: 12px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer;">
      Kirish
    </button>

    <p style="text-align: center; margin-top: 15px; font-size: 14px; color: #666;">
      Hisobingiz yo'qmi? <a href="#" style="color: #ea580c;">Ro'yxatdan o'ting</a>
    </p>
  </form>
</div>

Kirish formasi elementlarining tahlili:

• Har bir maydon pastki bo'shliq (margin-bottom) uchun <div> ichiga o'ralgan
• type="email" — brauzer to'g'ri email kiritilganini tekshiradi
• type="password" — belgilarni yashiradi
• Butun kenglikdagi tugma (width: 100%) — ommabop dizayn
• Forma ostidagi "Ro'yxatdan o'ting" havolasi

Keling, yana maydonlar qo'shamiz — ism, email, parol, tug'ilgan sana va jinsni tanlash radio-tugmalariga ega ro'yxatdan o'tish formasini yaratamiz:

<div style="background: linear-gradient(135deg, #fff7ed, #ffedd5); padding: 30px; border-radius: 12px; max-width: 450px;">
  <h3 style="margin-top: 0; color: #c2410c;">📝 Ro'yxatdan o'tish</h3>

  <form action="/register" method="POST">
    <div style="margin-bottom: 12px;">
      <label for="reg-name">Ism:</label><br>
      <input type="text" id="reg-name" name="name" placeholder="Ismingiz"
        style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
    </div>

    <div style="margin-bottom: 12px;">
      <label for="reg-email">Email:</label><br>
      <input type="email" id="reg-email" name="email" placeholder="your@email.com"
        style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
    </div>

    <div style="margin-bottom: 12px;">
      <label for="reg-pass">Parol:</label><br>
      <input type="password" id="reg-pass" name="password" placeholder="Parol o'ylab toping"
        style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
    </div>

    <div style="margin-bottom: 12px;">
      <label for="reg-birth">Tug'ilgan sana:</label><br>
      <input type="date" id="reg-birth" name="birthday"
        style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
    </div>

    <div style="margin-bottom: 15px;">
      <span style="font-weight: bold;">Jinsi:</span><br>
      <input type="radio" id="gender-m" name="gender" value="male">
      <label for="gender-m">Erkak</label><br>
      <input type="radio" id="gender-f" name="gender" value="female">
      <label for="gender-f">Ayol</label>
    </div>

    <button type="submit"
      style="width: 100%; background: #ea580c; color: white; padding: 12px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer;">
      Ro'yxatdan o'tish
    </button>
  </form>
</div>

Yangi elementlar:

• type="date" — sanani tanlash uchun kalendar
• type="radio" — radio-tugmalar; bir xil name ularni guruhlaydi, value — serverga yuboriladigan qiymat
• background: linear-gradient(...) — kartochkaning chiroyli gradient foni (tez orada CSS ni batafsil o'rganamiz)

E'tibor bering: radio tugmalarning name="gender" nomi bir xil, shuning uchun faqat bitta variantni tanlash mumkin. Har birining o'z value qiymati bor — "male" yoki "female".

name ni unutish. name siz maydon ma'lumotlari serverga yuborilmaydi. Bu eng ko'p uchraydigan xatolardan biri.

for/id bog'lanishini unutish. for siz label maydon bilan bog'lanmagan — bosish fokusni o'tkazmaydi. Bu qulaylik (accessibility) uchun yomon.

Noto'g'ri type. Parol uchun type="password", email uchun type="email" ishlating. Noto'g'ri type ma'lumotlarning oshkor bo'lishiga yoki noto'g'ri tekshirilishiga olib kelishi mumkin.

Placeholder yo'q. Maslahatsiz maydon foydalanuvchini nima kiritishni taxmin qilishga majbur qiladi. Placeholder — yaxshi amaliyot.

Yopilmagan teg. <form> va <button> yopilganligini har doim tekshiring.

• <form> — action va method atributlariga ega forma konteyneri
• <input type="text"> — matn maydoni; shuningdek password, email, date, radio, checkbox
• placeholder — maydon ichidagi maslahat
• <label for="id"> — yorliq, bosish fokusni maydonga o'tkazadi
• <button> — yuborish tugmasi (submit), oddiy tugma (button), tozalash (reset)
• name — ma'lumotlarni serverga yuborish uchun majburiy
• value — yuboriladigan qiymat (radio va checkbox uchun majburiy)

Mashq qiling: qidiruv formasi, kirish formasi, ro'yxatdan o'tish formasini yarating. "Men shartlarga roziman" belgi katakchasini qo'shing. Turli xil input turlari bilan tajriba o'tkazing. Keyingi modulda CSS ni o'rganishni boshlaymiz!