Bu modulda foydalanuvchidan ma’lumot olish o’rganildi: forma, kiritish maydonlarining turlari, yorliqlar va formani yuborish.

<form> tegi

Forma — foydalanuvchi kiritgan ma’lumotlarni yig’ib serverga yuboradigan idish:

<form action="/register" method="post">
  <!-- maydonlar shu yerda -->
</form>

action — ma’lumot boradigan manzil, method — yuborish usuli:

<input> va uning turlari

Bitta teg — o’nlab maydon turi; qaysi biri ekanini type atributi belgilaydi:

<p>Jinsingiz:</p>
<input type="radio" name="jins" value="erkak"> Erkak
<input type="radio" name="jins" value="ayol"> Ayol

Natija: ikkita radio tugma — birini tanlasangiz, ikkinchisi o’chadi.

Tipik xato. Radio tugmalarga har xil name berish. Guruh aynan bir xil name orqali bog’lanadi; nomlar farq qilsa, ikkala tugma ham birga tanlanaveradi.

Maydonlarni qulaylashtiruvchi uchta atribut:

<input type="text" name="ism" placeholder="Ismingizni yozing" required>
<input type="number" name="yosh" value="18">

• placeholder — maydon bo’shligida ko’rinadigan kulrang maslahat matni (yozishni boshlaganda yo’qoladi);
• required — to’ldirilmagan forma yuborilmaydi, brauzer o’zi ogohlantiradi;
• value — maydonning oldindan to’ldirilgan qiymati.

<label> — maydon yorlig’i

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

for atributi input’ning idsiga bog’lanadi. Endi yozuvni bosganda ham maydon fokus oladi — ayniqsa telefonda mayda checkbox’ni emas, yonidagi matnni bosish ancha oson. Har bir maydonga label yozish — yaxshi odat.

<textarea> va <select>

Ko’p qatorli matn uchun <textarea>, ro’yxatdan tanlash uchun <select> ishlatiladi:

<textarea name="izoh" rows="4" cols="40"></textarea>

<select name="shahar">
  <option value="tsh">Toshkent</option>
  <option value="sam">Samarqand</option>
  <option value="bux">Buxoro</option>
</select>

Natija: to’rt qatorli matn maydoni va ochiladigan shahar ro’yxati.

Formani yuborish

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

Tugma bosilganda brauzer formadagi barcha maydonlarni name=qiymat juftliklari ko’rinishida yig’ib, action manziliga method usulida jo’natadi. method="get"da bu juftliklar URL’da ochiq ko’rinadi:

/register?ism=Ali&shahar=tsh

Aynan shu sabab parol va shaxsiy ma’lumotli formalar doim post bilan yuboriladi.

Tipik xato. Maydonga name bermaslik. Yuborilganda faqat nameli maydonlar ketadi — namesiz maydon to’ldirilgan bo’lsa ham serverga umuman yetib bormaydi. Forma "ishlayapti-yu ma’lumot kelmayapti" bo’lsa, avval namelarni tekshiring.

To’liq misol

Modulda o’rganilganlarning hammasi bitta ro’yxatdan o’tish formasida:

<form action="/register" method="post">
  <label for="ism">Ismingiz:</label>
  <input type="text" id="ism" name="ism" required>

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" placeholder="[email protected]" required>

  <label for="shahar">Shahringiz:</label>
  <select id="shahar" name="shahar">
    <option value="tsh">Toshkent</option>
    <option value="sam">Samarqand</option>
  </select>

  <label for="izoh">Izoh:</label>
  <textarea id="izoh" name="izoh" rows="3"></textarea>

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

Natija: to’rt maydonli forma; ism yoki e-mail bo’sh qolsa, brauzer yubormasdan ogohlantiradi. E’tibor bering: har bir maydonda ham id (label uchun), ham name (server uchun) bor — ular vazifasi boshqa-boshqa bo’lgani uchun ikkalasi ham yoziladi.

Shuni ham bilib qo’ying: forma hozircha ma’lumotni "qayoqqadir" yuboradi — /register manzilida uni qabul qilib oladigan dastur (backend) bo’lishi kerak. Bu kursda forma tomonini yasashni o’rgandingiz; qabul qiluvchi tomon backend kurslarining mavzusi.

Amaliyot

1. "Aloqa" formasi yasang: ism, e-mail va xabar (textarea) — har biri label bilan, oxirida yuborish tugmasi.
2. Ro’yxatdan o’tish formasi: e-mail, parol va shahar tanlash (select).
3. So’rovnoma tuzing: kursga baho (radio, 1–5) va qiziqqan mavzular (checkbox, bir nechtasi).
4. Formani method="get" bilan yuborib URL qatorini kuzating, keyin postga o’zgartirib farqni ko’ring.

Modul testini ishlang — oxirgi modulda sahifa maketi va yakuniy loyiha kutmoqda.