# HTML forma elementlari (select, textarea, checkbox)

> Select, option, textarea, checkbox, radio, fieldset va legend bilan accessible forma yarating; value, checked, selected va guruhlashni o'rganing.

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

[Forma asoslari darsida](https://learncode.uz/html-css/forma-asoslari) bir qatorli input va labelni
bog'ladik. Ammo izoh yozish, tayyor variantdan tanlash yoki bir nechta
qiziqishni belgilash uchun boshqa boshqaruvlar kerak. Bu darsda ularni
semantik va accessible guruhlaymiz.

## Select va option

Variantlar soni ko'p, joy esa cheklangan bo'lsa, `<select>` ochiladigan
ro'yxat beradi. Har tanlov `<option>` bilan yoziladi:

```html
<label for="shahar">Shahar</label>
<select id="shahar" name="shahar">
  <option value="">Tanlang</option>
  <option value="toshkent">Toshkent</option>
  <option value="samarqand">Samarqand</option>
</select>
```

`option` ichidagi matn foydalanuvchiga, `value` esa serverga yuboriladi.
Boshlang'ich tanlov uchun `selected`, tanlab bo'lmaydigan ko'rsatma uchun
`disabled` ishlatilishi mumkin:

```html
<option value="" selected disabled>Shaharni tanlang</option>
```

## Textarea

Izoh, xabar yoki tavsif kabi ko'p qatorli matn `<textarea>` bilan olinadi:

```html
<label for="izoh">Izohingiz</label>
<textarea id="izoh" name="izoh" rows="5" maxlength="500"></textarea>
```

Boshlang'ich qiymat `value` atributiga emas, ochilish va yopilish teglarining
orasiga yoziladi. `rows` ko'rinadigan taxminiy qatorlar sonini, `maxlength`
esa maksimal belgilar sonini belgilaydi.

## Checkbox — mustaqil tanlovlar

Bir nechta variantni bir vaqtda tanlash mumkin bo'lsa, checkbox mos keladi:

```html
<label>
  <input type="checkbox" name="qiziqish" value="frontend">
  Frontend
</label>
<label>
  <input type="checkbox" name="qiziqish" value="backend">
  Backend
</label>
```

Checkbox belgilanganida uning `name` va `value` qiymati yuboriladi. Boshlanishida
belgilangan bo'lishi kerak bo'lsa, `checked` atributi qo'shiladi.

## Radio — guruhdan bitta tanlov

O'zaro istisno variantlardan faqat bittasi tanlansa, radio ishlatiladi. Bir
guruhdagi barcha radio inputlar bir xil `name` ga ega bo'lishi shart:

```html
<label>
  <input type="radio" name="daraja" value="boshlangich" checked>
  Boshlang'ich
</label>
<label>
  <input type="radio" name="daraja" value="orta">
  O'rta
</label>
```

> **Checkbox yoki radio?**
>
> Bir nechta javob birga to'g'ri bo'la olsa — checkbox. Faqat bitta javob
> tanlanishi kerak bo'lsa — radio. Bitta `Ha/yo'q` rozilik ham checkbox bilan
> ifodalanadi.

## Fieldset va legend

Bog'langan boshqaruvlarni `<fieldset>` guruhlaydi, `<legend>` esa guruhning
nomini beradi. Bu ayniqsa radio va checkboxlar uchun muhim:

```html
<fieldset>
  <legend>Kurs darajasini tanlang</legend>
  <!-- radio inputlar -->
</fieldset>
```

Ekran o'quvchi har variantga o'tganda legend matnini kontekst sifatida ayta
oladi. Faqat ko'rinish uchun alohida `<div>` va `<p>` ishlatish bu semantik
aloqani bermaydi.

## Barcha elementlarning jonli natijasi

```html
<form>
  <p>
    <label for="yonalish">Yo'nalish</label><br>
    <select id="yonalish" name="yonalish" required>
      <option value="" selected disabled>Tanlang</option>
      <option value="frontend">Frontend</option>
      <option value="backend">Backend</option>
      <option value="mobile">Mobil dasturlash</option>
    </select>
  </p>

  <fieldset>
    <legend>Daraja</legend>
    <label><input type="radio" name="daraja" value="boshlangich" checked> Boshlang'ich</label>
    <label><input type="radio" name="daraja" value="orta"> O'rta</label>
  </fieldset>

  <fieldset>
    <legend>Qiziqishlar</legend>
    <label><input type="checkbox" name="qiziqish" value="html"> HTML</label>
    <label><input type="checkbox" name="qiziqish" value="css"> CSS</label>
  </fieldset>

  <p>
    <label for="maqsad">Maqsadingiz</label><br>
    <textarea id="maqsad" name="maqsad" rows="3" maxlength="300"></textarea>
  </p>

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

```css
form { max-width: 520px; }
select, textarea { width: 100%; padding: 7px; box-sizing: border-box; }
fieldset { margin: 12px 0; border: 1px solid #cbd5e1; }
fieldset label { margin-right: 12px; }
button { padding: 8px 14px; }
```

Label ichiga inputni joylash ham ularni bog'laydi. Alohida label ishlatilsa,
`for` va `id` juftligini yozing. Kichik checkbox yoki radio markerining o'ziga
emas, matniga bosganda ham tanlov ishlashi foydalanuvchi uchun qulay.

> **value ni unutish natijani noaniq qiladi**
>
> Checkbox va radio uchun tushunarli `value` yozing. Aks holda server faqat
> standart `on` kabi qiymat olishi mumkin. Foydalanuvchi ko'radigan label va
> server oladigan value boshqa vazifaga ega.

## Amaliy mashq

Kursga yozilish formasini yarating: shahar uchun select, tajriba darajasi
uchun radio, qiziqishlar uchun checkbox, maqsad uchun textarea va submit
tugmasi bo'lsin. Har bir boshqaruvga `name`, aniq label va yuboriladigan
`value` bering; guruhlarni fieldset/legend bilan ajrating.

## Qisqacha xulosa

- `select` ichida tanlovlar `option` bilan yoziladi.
- `textarea` ko'p qatorli matn qabul qiladi.
- checkbox bir nechta, radio esa guruhdan bitta tanlov uchun.
- bir xil `name` radio tugmalarni guruhlaydi.
- `fieldset` va `legend` bog'langan savollarga kontekst beradi.

Keyingi darsda [semantik HTML](https://learncode.uz/html-css/semantik-teglar) orqali butun sahifa
bo'limlarini ma'noli tuzamiz.