Formalar

Saytga kirish, ro'yxatdan o'tish, qidiruv, buyurtma berish, so'rovnoma — foydalanuvchi saytga biror narsa «aytishi» kerak bo'lgan hamma joyda forma bor. Bu darsda forma elementlarini birma-bir ko'rib chiqamiz va oxirida to'liq ro'yxatdan o'tish formasini yasaymiz.

Forma nima?

Forma (inglizcha form) — foydalanuvchi ma'lumot kiritadigan maydonlar va ularni yuboradigan tugmadan iborat sahifa qismi. HTML'da u <form> tegi bilan o'raladi.

Eng oddiy forma — qidiruv:

<form>
  <label for="soz">Qidiruv:</label>
  <input type="text" id="soz" name="soz">
  <button type="submit">Izlash</button>
</form>

Maydonga biror so'z yozib, Izlash tugmasini (yoki Enter) bosing. Konsolda Forma yuborildi: soz = … degan yozuv chiqadi — bu forma serverga aynan nima yuborishi. Haqiqiy saytda bu ma'lumot serverga ketadi va u javob qaytaradi. Darsdagi muharrir esa uni ushlab qolib, konsolga ko'rsatadi.

input va label

<input> — kiritish maydoni. Bu bo'sh element: yopuvchi tegi yo'q. Uning qanday maydon bo'lishini type atributi belgilaydi (pastda batafsil).

<label> — maydonning yozuvi yoki yorlig'i (inglizcha label — «yorliq»): «Ism», «Parol» kabi. Yozuv maydonga ikki usulda bog'lanadi:

1. for va id orqali: <label for="ism"> va <input id="ism"> — for ichidagi nom maydonning id si bilan aynan bir xil.
2. Maydonni yozuv ichiga olib: <label>Ism: <input></label>.

<p>
  <label for="ism">Ismingiz:</label>
  <input type="text" id="ism" name="ism">
</p>
<p>
  Familiyangiz: <input type="text" name="familiya">
</p>
<p>
  <label>
    <input type="checkbox" name="obuna"> Yangiliklarga obuna bo'lish
  </label>
</p>

Sinab ko'ring: «Ismingiz:» so'zini bosing — kursor maydonga o'tadi. «Familiyangiz:» ni bossangiz, hech narsa bo'lmaydi: bu shunchaki matn, maydonga bog'lanmagan. Uchinchi qatordagi yozuvni bosish esa katakchani belgilaydi — kichkina katakchani nishonga olishdan ancha qulay.

Nega yozuv bunchalik muhim?

• Qulaylik: yozuvni bosish ham maydonni tanlaydi — ayniqsa telefonda va kichik katakchalarda.
• Ekran o'quvchilar uchun: ko'zi ojiz foydalanuvchi maydonga o'tganda dastur uning yozuvini o'qib beradi: «Ismingiz, matn maydoni». Bog'lanmagan yozuv o'qilmaydi va foydalanuvchi nima yozishni bilmaydi.

Kiritish maydonlari turlari

type atributining qiymatiga qarab, <input> butunlay boshqacha ko'rinadi va ishlaydi:

<p><label for="t1">Ism (text):</label>
   <input type="text" id="t1" placeholder="Masalan, Aziz"></p>
<p><label for="t2">Email (email):</label>
   <input type="email" id="t2" placeholder="aziz@example.com"></p>
<p><label for="t3">Parol (password):</label>
   <input type="password" id="t3" value="maxfiy123"></p>
<p><label for="t4">Yosh (number):</label>
   <input type="number" id="t4" value="18"></p>
<p><label for="t5">Tug'ilgan kun (date):</label>
   <input type="date" id="t5"></p>
<p><label for="t6">Ovoz balandligi (range):</label>
   <input type="range" id="t6" min="0" max="10"></p>
<p><label for="t7">Sevimli rang (color):</label>
   <input type="color" id="t7" value="#1f4fa8"></p>
<p><label for="t8">Rasm (file):</label>
   <input type="file" id="t8"></p>
<p><input type="checkbox" id="t9">
   <label for="t9">Shartlarga roziman (checkbox)</label></p>

Har bir maydon bilan o'ynab ko'ring: sanani tanlang, surgichni suring, rangni almashtiring. Parol maydonida value="maxfiy123" yozilgan bo'lsa ham, ekranda faqat nuqtalar ko'rinadi.

name, value va placeholder

Forma yuborilganda har bir maydondan bitta juftlik ketadi: name = qiymat. name — server bu ma'lumotni qaysi nom bilan oladi (xuddi anketadagi «Ism:» so'zi kabi). name siz maydon umuman yuborilmaydi!

<form>
  <label for="ism">Ism:</label>
  <input type="text" id="ism" name="ism" value="Ali">

  <label for="yosh">Yosh:</label>
  <input type="number" id="yosh" name="yosh" value="20">

  <label for="shahar">Shahar:</label>
  <input type="text" id="shahar" value="Toshkent">  <!-- name yo'q! -->

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

Yuborish ni bosing: konsolda ism = Ali, yosh = 20 chiqadi, shahar esa yo'q. Endi shahar maydoniga name="shahar" qo'shib, qayta yuboring.

• value — maydonning boshlang'ich qiymati: sahifa ochilganda maydon shu matn bilan to'ldirilgan bo'ladi. Foydalanuvchi uni o'zgartira oladi.
• placeholder — maydon bo'sh turganda ko'rinadigan kulrang namuna: placeholder="aziz@example.com". Yozishni boshlashingiz bilan yo'qoladi va hech qachon yuborilmaydi.

Tanlash maydonlari

Radio tugmalar va belgilash katakchalari

• Radio tugmalar (type="radio") — bir nechta variantdan faqat bittasini tanlash uchun. Bir guruhdagi barcha radio tugmalarning name i bir xil, value si esa har xil bo'ladi.
• Belgilash katakchalari (type="checkbox") — har biri mustaqil: bittasini ham, hammasini ham, hech birini ham tanlash mumkin.
• checked atributi variantni oldindan tanlab qo'yadi.

<form>
  <p>Qachon o'qishni xohlaysiz?</p>
  <input type="radio" id="ertalab" name="vaqt" value="ertalab" checked>
  <label for="ertalab">Ertalab</label>
  <input type="radio" id="kechqurun" name="vaqt" value="kechqurun">
  <label for="kechqurun">Kechqurun</label>
  <input type="radio" id="dam" name="vaqt" value="dam-olish">
  <label for="dam">Dam olish kunlari</label>

  <p>Qaysi tillarni bilasiz?</p>
  <input type="checkbox" id="uz" name="til" value="uz" checked>
  <label for="uz">O'zbek</label>
  <input type="checkbox" id="ru" name="til" value="ru">
  <label for="ru">Rus</label>
  <input type="checkbox" id="en" name="til" value="en">
  <label for="en">Ingliz</label>

  <p><button type="submit">Yuborish</button></p>
</form>

Bir nechta katakchani belgilab yuboring: konsolda har bir tanlangan katakcha uchun alohida til = … chiqadi. Tanlanmagan katakchalar yuborilmaydi. Radio tugmalardan esa doim faqat bittasi ketadi.

Ochiladigan ro'yxat: select

Variantlar ko'p bo'lsa (viloyatlar, oylar), ularni ochiladigan ro'yxatga joylash qulay: <select> ichida har bir variant — <option>. Yuborilganda tanlangan variantning value si ketadi, foydalanuvchi esa teglar orasidagi matnni ko'radi.

Katta matn maydoni: textarea

Bir necha qatorli matn — izoh, xabar, manzil — uchun <textarea>. U bo'sh element emas: yopuvchi tegi bor, teglar orasidagi matn esa boshlang'ich qiymat bo'ladi. rows — ko'rinadigan qatorlar soni.

<form>
  <p>
    <label for="viloyat">Viloyat:</label>
    <select id="viloyat" name="viloyat">
      <option value="">— Tanlang —</option>
      <option value="toshkent">Toshkent</option>
      <option value="samarqand" selected>Samarqand</option>
      <option value="buxoro">Buxoro</option>
      <option value="fargona">Farg'ona</option>
    </select>
  </p>
  <p>
    <label for="xabar">Xabaringiz:</label><br>
    <textarea id="xabar" name="xabar" rows="4" cols="40"></textarea>
  </p>
  <button type="submit">Yuborish</button>
</form>

selected atributi variantni oldindan tanlab qo'yadi (radio'dagi checked kabi). Birinchi variant value="" — «hali tanlanmagan» holati uchun qulay usul.

Tugmalar

<button> ning uch turi bor:

<form>
  <label for="ism2">Ism:</label>
  <input type="text" id="ism2" name="ism" value="Ali">
  <button type="submit">Yuborish</button>
  <button type="reset">Tozalash</button>
  <button type="button">Oddiy tugma</button>
</form>

Ismni o'zgartiring va Tozalash ni bosing: maydon bo'shamaydi, balki Ali ga qaytadi — chunki «boshlang'ich holat» value da yozilgan. Oddiy tugma hech narsa qilmaydi — unga vazifani 17-darsda JavaScript bilan beramiz.

Brauzerning o'zi tekshiradi

Foydalanuvchi maydonni to'ldirmay yoki noto'g'ri to'ldirib yuborishi mumkin. Brauzer buni atributlar yordamida o'zi tekshira oladi — bu validatsiya (inglizcha validation, «tekshirish») deyiladi:

<form>
  <p><label for="email">Email (majburiy):</label><br>
     <input type="email" id="email" name="email" required></p>

  <p><label for="parol">Parol (kamida 6 belgi):</label><br>
     <input type="password" id="parol" name="parol" required minlength="6"></p>

  <p><label for="yosh2">Yosh (7 dan 100 gacha):</label><br>
     <input type="number" id="yosh2" name="yosh" min="7" max="100"></p>

  <p><label for="tel">Telefon (9 ta raqam):</label><br>
     +998 <input type="tel" id="tel" name="tel" pattern="[0-9]{9}" placeholder="901234567"></p>

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

Hech narsa yozmasdan Yuborish ni bosing — brauzer birinchi bo'sh majburiy maydonni ko'rsatib, ogohlantiradi va forma yuborilmaydi (konsol bo'sh qoladi). Emailga aziz deb yozing, parolga 3 ta belgi, yoshga 150 — har safar brauzer to'xtatadi. Hammasi to'g'ri bo'lgandagina konsolda «Forma yuborildi» chiqadi.

Maydonlarni guruhlash: fieldset va legend

Uzun formani mantiqiy qismlarga bo'lish mumkin: <fieldset> bir guruh maydonni ramkaga oladi, <legend> esa shu guruhning sarlavhasi. Ekran o'quvchilar guruh nomini ham o'qiydi — ayniqsa radio tugmalar guruhi uchun foydali.

To'liq misol: kursga ro'yxatdan o'tish

Endi o'rganganlarimizning hammasini bitta formaga yig'amiz. Bir oz CSS ham qo'shdik — chiroyliroq ko'rinishi uchun:

<style>
  body { font-family: sans-serif; }
  fieldset { margin-bottom: 12px; border-radius: 8px; }
  input, select, textarea, button { font: inherit; }
</style>

<form>
  <h2>Kursga ro'yxatdan o'tish</h2>

  <fieldset>
    <legend>Shaxsiy ma'lumotlar</legend>
    <p><label for="r-ism">Ism:</label>
       <input type="text" id="r-ism" name="ism" required minlength="2"></p>
    <p><label for="r-email">Email:</label>
       <input type="email" id="r-email" name="email" required></p>
    <p><label for="r-sana">Tug'ilgan sana:</label>
       <input type="date" id="r-sana" name="sana"></p>
  </fieldset>

  <fieldset>
    <legend>Kurs</legend>
    <p><label for="r-kurs">Yo'nalish:</label>
       <select id="r-kurs" name="kurs" required>
         <option value="">— Tanlang —</option>
         <option value="veb">Veb-dasturlash</option>
         <option value="python">Python</option>
         <option value="dizayn">Dizayn</option>
       </select></p>
    <p>Vaqt:
       <input type="radio" id="r-ert" name="vaqt" value="ertalab" checked>
       <label for="r-ert">Ertalab</label>
       <input type="radio" id="r-kech" name="vaqt" value="kechqurun">
       <label for="r-kech">Kechqurun</label></p>
    <p><label for="r-izoh">Qo'shimcha izoh:</label><br>
       <textarea id="r-izoh" name="izoh" rows="3" cols="40"></textarea></p>
  </fieldset>

  <p><input type="checkbox" id="r-rozi" name="rozi" value="ha" required>
     <label for="r-rozi">Qoidalarga roziman</label></p>
  <button type="submit">Ro'yxatdan o'tish</button>
  <button type="reset">Tozalash</button>
</form>

Formani to'ldirib yuboring va konsolda nimalar ketganini ko'ring. E'tibor bering: majburiy bo'lmagan bo'sh maydonlar ham yuboriladi — bo'sh qiymat bilan (sana = ). Majburiy maydonlardan birini bo'sh qoldirib ham sinab ko'ring.

Ma'lumot qayerga ketadi?

Haqiqiy saytda formaga yana ikki atribut yoziladi:

<form action="/royxatdan-otish" method="post">
  …
</form>

• action — ma'lumot yuboriladigan manzil (serverdagi sahifa yoki dastur). Yozilmasa, forma joriy sahifaning o'ziga yuboriladi.
• method — yuborish usuli:
  • get — ma'lumot manzil satriga qo'shiladi: …/search?q=html. Qidiruv va filtrlar uchun: bunday sahifani xatcho'pga saqlab, do'stga yuborish mumkin.
  • post — ma'lumot manzilda ko'rinmaydi, so'rovning ichida ketadi. Parol, shaxsiy ma'lumot va biror narsani o'zgartiradigan amallar (ro'yxatdan o'tish, buyurtma) uchun.

Qiziq misol: Google'ning qidiruv sahifasi ham oddiy forma — uning qidiruv maydonining name i q. Shuning uchun mana bu kichik forma haqiqatan ishlaydi:

<form action="https://www.google.com/search" method="get">
  <label for="q">Google'da qidirish:</label>
  <input type="search" id="q" name="q">
  <button type="submit">Izlash</button>
</form>

Uni VS Code'da faylga saqlab, brauzerda oching va biror so'z qidiring — manzil satrida ?q=… qismini ko'rasiz. (Darsdagi muharrir formalarni ushlab qoladi, shuning uchun bu misolni kompyuteringizda sinang.)

Mashqlar

<h2>Saytga kirish</h2>
<form>
  <p>Email: <input type="text" name="email"></p>
  <p>Parol: <input type="text" name="parol"></p>
  <button type="submit">Kirish</button>
</form>

<h2>Saytga kirish</h2>
<form>
  <p>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </p>
  <p>
    <label for="parol">Parol:</label>
    <input type="password" id="parol" name="parol">
  </p>
  <button type="submit">Kirish</button>
</form>

<h2>Fikr-mulohaza</h2>
<form>
  <!-- 1. "Darsga baho" yozuvi va select -->

  <!-- 2. "Fikringiz" yozuvi va textarea -->

  <!-- 3. Yuborish tugmasi -->

</form>

<h2>Fikr-mulohaza</h2>
<form>
  <p>
    <label for="baho">Darsga baho:</label>
    <select id="baho" name="baho">
      <option value="5">A'lo</option>
      <option value="4">Yaxshi</option>
      <option value="3">O'rtacha</option>
    </select>
  </p>
  <p>
    <label for="fikr">Fikringiz:</label><br>
    <textarea id="fikr" name="fikr" rows="4" cols="40"></textarea>
  </p>
  <button type="submit">Yuborish</button>
</form>

<form>
  <p>Qaysi kursni tanlaysiz?</p>
  <input type="radio" name="html"> HTML
  <input type="radio" name="css"> CSS
  <input type="radio" name="js"> JavaScript
  <p><button type="submit">Yuborish</button></p>
</form>

<form>
  <p>Qaysi kursni tanlaysiz?</p>
  <label><input type="radio" name="kurs" value="html"> HTML</label>
  <label><input type="radio" name="kurs" value="css"> CSS</label>
  <label><input type="radio" name="kurs" value="js"> JavaScript</label>
  <p><button type="submit">Yuborish</button></p>
</form>

O'zingizni sinang