HTML Form Elementlari

Ushbu bob HTML form elementlarining barcha turlarini tavsiflaydi.

HTML `<form>` Elementlari

HTML <form> elementi bir yoki bir nechta quyidagi form elementlarini o'z ichiga olishi mumkin:

<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>

`<input>` Elementi

Eng ko'p ishlatiladigan form elementlardan biri <input> elementidir.

type atributiga qarab, <input> elementi turli ko'rinishlarda namoyon bo'ladi.

html

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

type atributining barcha qiymatlari keyingi bobda ko'rib chiqiladi: HTML Input Turlari.

`<label>` Elementi

<label> elementi bir nechta form elementlari uchun yorliq belgilaydi.

<label> elementi ekranni o'qiydigan foydalanuvchilar uchun foydalidir, chunki foydalanuvchi input elementiga e'tibor qaratganda, ekranni o'qiydigan qurilma yorliqni ovoz chiqarib o'qiydi.

<label> elementi kichik joylarni bosishda qiynaladigan foydalanuvchilarga ham yordam beradi — chunki <label> ichidagi matn bosilganda, radio tugmasi yoki checkbox faollashadi.

for atributi <label> tegi va id atributi <input> elementida bir xil bo'lishi kerak, shunda ular bog'lanadi.

`<select>` Elementi

<select> elementi ochiladigan ro'yxatni belgilaydi:

html

<label for="mashina">Mashina tanlang:</label>
<select id="mashina" name="mashina">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

<option> elementi tanlanadigan variantni belgilaydi.

Standart holatda, ro'yxatdagi birinchi element tanlanadi.

Oldindan tanlangan variantni belgilash uchun selected atributidan foydalaning:

html

<option value="fiat" selected>Fiat</option>

Ko'rinadigan Qiymatlar

size atributi yordamida ko'rinadigan qiymatlar sonini belgilang:

html

<label for="mashina">Mashina tanlang:</label>
<select id="mashina" name="mashina" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Bir nechta tanlashga ruxsat berish

multiple atributi yordamida foydalanuvchiga bir nechta qiymatlarni tanlashga ruxsat bering:

html

<label for="mashina">Mashina tanlang:</label>
<select id="mashina" name="mashina" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

`<textarea>` Elementi

<textarea> elementi ko'p qatorli kiritish maydonini (matn maydoni) belgilaydi:

html

<textarea name="xabar" rows="10" cols="30">
Mushuk bogda o'ynayapti.
</textarea>

rows atributi matn maydonidagi ko'rinadigan qatorlar sonini belgilaydi.
cols atributi matn maydonining ko'rinadigan kengligini belgilaydi.

Matn maydoni o'lchamini CSS yordamida ham belgilash mumkin:

html

<textarea name="xabar" style="width:200px; height:600px;">
Mushuk bogda o'ynayapti.
</textarea>

`<button>` Elementi

<button> elementi bosiladigan tugmani belgilaydi:

html

<button type="button" onclick="alert('Salom Dunya!')">Bos!</button>

TIP

Eslatma: Har doim button elementida type atributini belgilang. Turli brauzerlar button uchun turli standart turlarni ishlatishi mumkin.

`<fieldset>` va `<legend>` Elementlari

<fieldset> elementi formadagi bog'liq ma'lumotlarni guruhlash uchun ishlatiladi.

<legend> elementi <fieldset> uchun sarlavha belgilaydi.

html

<form action="/action_page.php">
  <fieldset>
    <legend>Shaxsiy ma'lumotlar:</legend>
    <label for="ism">Ismingiz:</label><br>
    <input type="text" id="ism" name="ism" value="Jahon"><br>
    <label for="familiya">Familiyangiz:</label><br>
    <input type="text" id="familiya" name="familiya" value="Do'st"><br><br>
    <input type="submit" value="Yuborish">
  </fieldset>
</form>

`<datalist>` Elementi

<datalist> elementi <input> uchun oldindan belgilangan variantlar ro'yxatini ko'rsatadi.

Foydalanuvchi ma'lumot kiritayotganda, oldindan belgilangan variantlar ro'yxatini ko'radi.

list atributi <input> elementida, id atributi <datalist> elementida bir xil bo'lishi kerak.

html

<form action="/action_page.php">
  <input list="brauzerlar">
  <datalist id="brauzerlar">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

`<output>` Elementi

<output> elementi hisoblash natijasini (skript orqali bajarilgan) ifodalaydi.

html

<form action="/action_page.php"
  oninput="natija.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range" id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="natija" for="a b"></output>
  <br><br>
  <input type="submit">
</form>