HTML Forma Elementlari

Ushbu bobda turli xil HTML forma elementlari haqida so'z yuritiladi.

HTML <form> Elementlari HTML <form> elementi quyidagi forma elementlaridan bir yoki bir nechtasini o'z ichiga olishi mumkin:

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

<input> Elementi Eng ko'p ishlatiladigan forma elementlaridan biri bu <input> elementidir.

<input> elementi turli ko'rinishlarda namoyish etilishi mumkin, bu uning type atributiga bog'liq.

Misol:

<label for="fname">Ism:</label> <input type="text" id="fname" name="fname" />

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

<label> Elementi <label> elementi bir nechta forma elementlari uchun yorliqni belgilaydi.

<label> elementi ekran o'qiydigan qurilmalar foydalanuvchilari uchun foydalidir, chunki ekran o'qiydigan qurilma foydalanuvchi <input> elementiga e'tibor qaratganida yorliqni baland ovozda o'qiydi.

<label> elementi, shuningdek, radio tugmalar yoki belgilanadigan katakchalar (checkbox) kabi juda kichik hududlarga bosish qiyin bo'lgan foydalanuvchilarga yordam beradi - foydalanuvchi <label> elementi ichidagi matnga bosganida, radio tugma yoki belgilanadigan katakcha faollashadi.

<label> tegining for atributi u bog'langan <input> elementining id atributiga teng bo'lishi kerak.

<select> Elementi <select> elementi ochiladigan ro'yxatni belgilaydi:

Misol:

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

<option> elementi tanlanishi mumkin bo'lgan variantni belgilaydi.

Sukut bo'yicha ochiladigan ro'yxatdagi birinchi element tanlanadi.

Tanlangan variantni oldindan belgilash uchun, <option> elementiga selected atributini qo'shing:

Misol:

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

Ko'rinadigan qiymatlar: Ochiladigan ro'yxatda ko'rinadigan qiymatlar sonini belgilash uchun size atributidan foydalaning:

Misol:

<label for="cars">Avtomobilni tanlang:</label>
<select id="cars" name="cars" 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: Foydalanuvchiga bir nechta qiymatni tanlashga ruxsat berish uchun multiple atributidan foydalaning:

Misol:

<label for="cars">Avtomobilni tanlang:</label>
<select id="cars" name="cars" 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:

Misol:

<textarea name="message" rows="10" cols="30">
Mushuk bog'da o'ynayotgan edi.
</textarea>

rows atributi matn maydonidagi ko'rinadigan qatorlar sonini belgilaydi.

cols atributi matn maydonidagi ko'rinadigan ustunlar kengligini belgilaydi.

Yuqoridagi HTML kodini brauzerda qanday ko'rinishini quyida ko'rishingiz mumkin:

Mushuk bog'da o'ynayotgan edi.

Shuningdek, matn maydoni hajmini CSS yordamida belgilashingiz mumkin:

Misol:

<textarea name="message" style="width:200px; height:600px;">
Mushuk bog'da o'ynayotgan edi.
</textarea>

<button> Elementi <button> elementi bosilishi mumkin bo'lgan tugmani belgilaydi:

Misol:

<button type="button" onclick="alert('Hello World!')">Meni bosing!</button>

Bu HTML kodi brauzerda quyidagi ko'rinishda namoyish etiladi:

Meni bosing!

Eslatma: <button> elementi uchun har doim type atributini belgilang. Turli brauzerlar <button> elementi uchun turli xil sukut bo'yicha turlarni ishlatishi mumkin.

<fieldset> va <legend> Elementlari <fieldset> elementi formadagi tegishli ma'lumotlarni guruhlash uchun ishlatiladi.

<legend> elementi <fieldset> elementi uchun sarlavhani belgilaydi.

Misol:

<form action="/action_page">
  <fieldset>
    <legend: Shaxsiy ma'lumotlar:</legend>
    <label for="fname">Ism:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Familiya:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Yuborish">
  </fieldset>
</form>

<datalist> Elementi <datalist> elementi <input> elementi uchun oldindan belgilangan variantlar ro'yxatini belgilaydi.

Foydalanuvchilar ma'lumot kiritish jarayonida oldindan belgilangan variantlarning ochiladigan ro'yxatini ko'radi.

<input> elementining list atributi <datalist> elementining id atributiga ishora qilishi kerak.

Misol:

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

<output> Elementi <output> elementi hisoblash natijasini ifodalaydi (masalan, skript tomonidan amalga oshirilgan hisoblash natijasi).

Misol: Hisoblashni amalga oshirish va natijani <output> elementida ko'rsatish:

<form action="/action_page" oninput="x.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="x" for="a b"></output>
  <br /><br />
  <input type="submit" />
</form>