# HTML forma asoslari (form, input, button)

> HTML formalarini form, label, input va button bilan tuzing; action, method, name, type, required va autocomplete atributlarini jonli misolda o'rganing.

Manba: https://learncode.uz/html-css/forma-asoslari/
Sana: 2026-05-18

Qidiruv, kirish, ro'yxatdan o'tish va buyurtma berish sahifalari
foydalanuvchidan ma'lumot oladi. HTML forma ma'lumot kiritish boshqaruvlarini
bitta mantiqiy guruhga birlashtiradi va ularni serverga yuborishga tayyorlaydi.

Bu dars yakunida `<form>`, `<label>`, `<input>` va `<button>` ni bog'laysiz,
mos `type` tanlaysiz, `name` ning yuborishdagi rolini tushunasiz hamda oddiy
brauzer validatsiyasidan foydalanasiz.

## Formaning asosiy qismlari

```html
<form action="/royxatdan-otish" method="post">
  <label for="ism">Ismingiz</label>
  <input id="ism" name="ism" type="text">

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

- `<form>` barcha maydonlarni o'raydi;
- `action` ma'lumot qaysi manzilga yuborilishini bildiradi;
- `method` yuborish usulini belgilaydi;
- `<label>` maydonning tushunarli nomi;
- `<input>` foydalanuvchi kiritadigan qiymat;
- submit tugmasi formani yuborishni boshlaydi.

`GET` odatda qidiruv va filtr kabi URL orqali ulashish mumkin bo'lgan
so'rovlar uchun, `POST` esa yangi ma'lumot yuborish uchun ishlatiladi. Ularning
server tomondagi farqi [HTTP darsida](https://learncode.uz/web-dasturlash/http-sorov-javob)
batafsil tushuntirilgan.

## Label va inputni bog'lash

`label` dagi `for` qiymati inputning `id` qiymatiga teng bo'lishi kerak:

```html
<label for="email">Email manzil</label>
<input id="email" name="email" type="email">
```

Shunda label ustiga bosish inputni fokuslaydi. Ekran o'quvchi ham maydonning
nomini aniq aytadi. `placeholder` qisqa namuna berishi mumkin, lekin u label
o'rnini bosmaydi: foydalanuvchi yozishni boshlaganda placeholder yo'qoladi.

> **Har bir maydonga ko'rinadigan label bering**
>
> Faqat `placeholder="Email"` bilan cheklanmang. Label doim ko'rinib turadi,
> maydon maqsadini eslatadi va accessibility uchun ishonchli nom beradi.

## Input turlari

`type` brauzerga qanday qiymat kutilayotganini bildiradi:

| Type | Vazifasi | Brauzer yordami |
|---|---|---|
| `text` | oddiy bir qatorli matn | umumiy klaviatura |
| `email` | email manzil | format tekshiruvi, mos mobil klaviatura |
| `password` | maxfiy qiymat | belgilarni yashirish |
| `number` | son | son boshqaruvlari |
| `date` | sana | sana tanlash interfeysi |
| `search` | qidiruv so'zi | qidiruvga mos boshqaruv |

`type` ni ma'lumotga qarab tanlang. Telefon raqami hisob-kitob qilinadigan
son emas, shuning uchun ko'pincha `type="tel"` unga `number` dan mosroq.

## `name` — yuboriladigan kalit

Forma yuborilganda qiymatlar `name=qiymat` juftliklari ko'rinishida
tayyorlanadi:

```html
<input name="email" value="ali@example.com">
```

Bu maydon taxminan `email=ali@example.com` sifatida yuboriladi. `id` elementni
label, CSS va JavaScript bilan bog'laydi; `name` esa yuboriladigan ma'lumotga
nom beradi. `name` bo'lmagan boshqaruv qiymati odatda forma ma'lumotiga
kiritilmaydi.

## Jonli forma natijasi

```html
<form>
  <p>
    <label for="foydalanuvchi">Ismingiz</label><br>
    <input id="foydalanuvchi" name="ism" type="text" autocomplete="name" required>
  </p>

  <p>
    <label for="pochta">Email manzil</label><br>
    <input id="pochta" name="email" type="email" autocomplete="email" required>
  </p>

  <p>
    <label for="yosh">Yoshingiz</label><br>
    <input id="yosh" name="yosh" type="number" min="7" max="100">
  </p>

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

```css
label { font-weight: 650; }
input { margin-top: 5px; padding: 8px; }
button { padding: 8px 12px; }
```

Email formatini buzib yoki majburiy maydonni bo'sh qoldirib yuborishga urinib
ko'ring: brauzer `required`, `type="email"`, `min` va `max` qoidalari asosida
dastlabki tekshiruvni bajaradi. Bu tekshiruv qulaylik yaratadi, ammo xavfsizlik
uchun server kelgan ma'lumotni yana tekshirishi shart.

## Tugma turlarini aniq yozing

- `type="submit"` formani yuboradi;
- `type="reset"` maydonlarni boshlang'ich holatga qaytaradi;
- `type="button"` o'z-o'zidan hech narsa qilmaydi, odatda JavaScript bilan ishlaydi.

Forma ichidagi `<button>` ning standart turi `submit` bo'lishi mumkin.
Yubormasligi kerak bo'lgan tugmaga `type="button"` ni aniq yozing.

## Foydali atributlar

`required` maydonni majburiy, `minlength` va `maxlength` matn uzunligini,
`min` va `max` son chegarasini belgilaydi. `autocomplete="name"` yoki
`autocomplete="email"` brauzerga saqlangan mos ma'lumotni taklif qilishga
yordam beradi. `disabled` boshqaruvni ishlatib bo'lmaydigan qiladi va uning
qiymati yuborilmaydi; `readonly` esa qiymatni o'zgartirishni to'xtatadi, ammo
uni forma bilan yuborish mumkin.

> **Brauzer validatsiyasi yetarli emas**
>
> HTML atributlari foydalanuvchiga tez javob beradi. Lekin foydalanuvchi yoki
> boshqa dastur bu cheklovlarni chetlab o'tishi mumkin. Server barcha qiymatni
> ishonchsiz deb qabul qilib, qayta tekshiradi.

## Amaliy mashq

Ism, email, tug'ilgan sana va parol maydonlari bo'lgan ro'yxatdan o'tish
formasi yarating. Har bir inputga bog'langan label, `name`, mos `type` va
zarur validatsiya atributlarini yozing. Submit va oddiy tugma turlarini aniq
belgilang.

## Qisqacha xulosa

- `<form>` boshqaruvlarni va yuborish sozlamalarini birlashtiradi.
- `for` va `id` labelni maydon bilan bog'laydi.
- `type` qiymatga mos interfeys va dastlabki tekshiruv beradi.
- `name` qiymatning yuboriladigan nomidir.
- HTML validatsiyasi server tekshiruvini almashtirmaydi.

Keyingi darsda [select, textarea, checkbox va radio](https://learncode.uz/html-css/forma-elementlari)
bilan murakkabroq tanlovlarni tuzamiz.