Chapter 6 — Formalar

Formalar — foydalanuvchidan ma'lumot to'plashning asosiy HTML vositasi. Bu bob — handbookdagi eng chuqur boblardan biri.

---

6.1 Asosiy Forma Strukturasi

Example

index.html
HTMLNusxalash
01<form action="/submit" method="POST">
02  <label for="name">Ism:</label>
03  <input type="text" id="name" name="name" required>
04 
05  <button type="submit">Yuborish</button>
06</form>

6.2 Input Turlari

Example

index.html
HTMLNusxalash
01<input type="text">
02<input type="email">
03<input type="password">
04<input type="number" min="0" max="100">
05<input type="checkbox">
06<input type="radio" name="gender">
07<input type="date">
08<input type="file">

💡 Key Idea
type="email" yoki type="number" kabi maxsus turlar — brauzerga o'rnatilgan validatsiya va mobil qurilmalarda mos klaviatura (masalan raqamli klaviatura) ko'rsatish imkonini beradi, bu qo'shimcha JavaScript yozmasdan.

6.3 Validatsiya Atributlari

Example

index.html
HTMLNusxalash
01<input type="text" required minlength="3" maxlength="20">
02<input type="number" min="18" max="99">
03<input type="text" pattern="[A-Za-z]+" title="Faqat harflar">

6.4 Select, Textarea va Fieldset

Example

index.html
HTMLNusxalash
01<select name="city">
02  <option value="tashkent">Toshkent</option>
03  <option value="xorazm" selected>Xorazm</option>
04</select>
05 
06<textarea name="message" rows="4" cols="50"></textarea>
07 
08<fieldset>
09  <legend>Shaxsiy ma'lumotlar</legend>
10  <label for="name">Ism:</label>
11  <input type="text" id="name">
12</fieldset>

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Ism va email maydonlariga ega, to'g'ri label'langan oddiy forma yarating.

🟡 Exercise 2 — Medium

Task: Ism, familiya, yosh (18-99 oralig'ida) va izoh maydonlariga ega, required va min/max bilan validatsiya qilingan ro'yxatdan o'tish formasini yarating.

🔴 Exercise 3 — Hard

Task: fieldset orqali "Shaxsiy ma'lumotlar" va "Aloqa ma'lumotlari" deb ikkiga bo'lingan to'liq ro'yxatdan o'tish formasini yarating.

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<input type="text" placeholder="Ismingiz">
02<button>Yuborish</button>

Your Task: Bu formada nechta accessibility/funksionallik muammosi bor?

<details> <summary>Solution</summary> Muammolar: (1) `<label>` yo'q — faqat `placeholder` accessibility uchun yetarli emas (placeholder input to'ldirilganda yo'qoladi); (2) `<form>` tegi yo'q; (3) `<button>`ning `type`i belgilanmagan (standart `submit`, lekin bu aniq yozilishi tavsiya etiladi). To'g'ri versiya: ```html <form action="/submit" method="POST"> <label for="name">Ismingiz:</label> <input type="text" id="name" name="name" placeholder="Ismingiz"> <button type="submit">Yuborish</button> </form> ``` </details>

📌 Chapter Summary

Formalar — label, to'g'ri input type, validatsiya atributlari (required, min/max, pattern) va guruhlash (fieldset/legend) orqali to'g'ri quriladi. Har bir input o'z label'iga ega bo'lishi shart.

🎯 Key Takeaways

• Har bir input — <label for="..."> bilan bog'langan bo'lishi kerak
• To'g'ri type — brauzer validatsiyasi va mos klaviaturani "bepul" beradi
• placeholder — label o'rnini bosa olmaydi
• fieldset/legend — uzun formalarni mantiqiy guruhlaydi

⚡ Quick Cheat Sheet

index.html
HTMLNusxalash
01<form action="/submit" method="POST">
02  <label for="email">Email:</label>
03  <input type="email" id="email" name="email" required>
04  <fieldset>
05    <legend>Guruh nomi</legend>
06    ...
07  </fieldset>
08  <button type="submit">Yuborish</button>
09</form>

---