HTML forma elementlari (select, textarea, checkbox)

Forma asoslari darsida 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:

<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:

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

Textarea

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

<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:

<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:

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

Fieldset va legend

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

<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

Kod

<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>

<style>
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; }
</style>

Natija

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.

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 orqali butun sahifa bo’limlarini ma’noli tuzamiz.