HTML forma elementlari
Bu bob barcha turli xil HTML forma elementlarini tavsiflaydi.
HTML <form> elementlari
HTML <form> elementi quyidagi forma elementlaridan birini 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 — <input> elementi.
<input> elementi type atributiga qarab
bir necha xil usulda ko‘rsatilishi mumkin.
Misol
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
O‘zingiz sinab ko‘ring »
type atributining barcha turli qiymatlari keyingi bobda ko‘rib chiqiladi:
HTML kirish turlari.
<label> elementi
<label> elementi bir nechta forma elementlari uchun
yorliq (belgi) aniqlaydi.
<label> elementi ekran o‘quvchi (screen-reader) foydalanuvchilari uchun foydali, chunki foydalanuvchi kirish elementiga fokus berganda ekran o‘quvchi yorliqni ovoz chiqarib o‘qib beradi.
<label> elementi, shuningdek, juda kichik joylarga (masalan, radio tugmalari yoki katordagi belgilash katakchalariga) bosishda qiynaladigan foydalanuvchilarga ham yordam beradi — chunki foydalanuvchi <label> elementi ichidagi matnga bosganda, radio tugma/belgilash katakchasi yoqib-o‘chiriladi.
<label> tegining for atributi ularni bir-biriga bog‘lash uchun
<input> elementining id atributiga
teng bo‘lishi kerak.
<select> elementi
<select> elementi ochiluvchi ro‘yxatni belgilaydi:
Misol
<label for="cars">Choose a car:</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>
O‘zingiz sinab ko‘ring »
<option> elementi tanlanishi mumkin bo‘lgan variantni aniqlaydi.
Standart bo‘yicha, ochiluvchi ro‘yxatdagi birinchi element tanlangan bo‘ladi.
Oldindan tanlangan variantni belgilash uchun variantga selected atributini
qo‘shing:
Ko‘rinadigan qiymatlar:
Ko‘rinadigan qiymatlar sonini belgilash uchun size atributidan foydalaning:
Misol
<label for="cars">Choose a car:</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>
O‘zingiz sinab ko‘ring »
Bir nechta tanlovga ruxsat berish:
Foydalanuvchiga bitta qiymatdan ko‘p qiymat tanlashga ruxsat berish uchun multiple atributidan foydalaning:
Misol
<label for="cars">Choose a car:</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>
O‘zingiz sinab ko‘ring »
<textarea> elementi
<textarea> elementi ko‘p qatorli kirish maydonini (matn maydonini) aniqlaydi:
Misol
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
O‘zingiz sinab ko‘ring »
rows atributi matn maydonidagi ko‘rinadigan qatorlar sonini belgilaydi.
cols atributi matn maydonining ko‘rinadigan kengligini belgilaydi.
Yuqoridagi HTML kodi brauzerda quyidagicha ko‘rsatiladi:
Matn maydoni o‘lchamini CSS yordamida ham belgilashingiz mumkin:
Misol
<textarea name="message"
style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
O‘zingiz sinab ko‘ring »
<button> elementi
<button> elementi bosiladigan tugmani aniqlaydi:
Misol
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
O‘zingiz sinab ko‘ring »
Yuqoridagi HTML kodi brauzerda quyidagicha ko‘rsatiladi:
Eslatma: button elementi uchun type atributini doim belgilang. Turli brauzerlar button elementi uchun turlicha standart turlardan foydalanishi mumkin.
<fieldset> va <legend> elementlari
<fieldset> elementi formadagi o‘zaro bog‘liq ma’lumotlarni guruhlash uchun ishlatiladi.
<legend> elementi
<fieldset>
elementi uchun sarlavha aniqlaydi.
Misol
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
O‘zingiz sinab ko‘ring »
Yuqoridagi HTML kodi brauzerda quyidagicha ko‘rsatiladi:
<datalist> elementi
<datalist> elementi <input> elementi uchun oldindan belgilangan variantlar ro‘yxatini ko‘rsatadi.
Foydalanuvchilar ma’lumot kiritayotganda oldindan belgilangan variantlarning ochiluvchi ro‘yxatini ko‘radilar.
<input> elementining list atributi <datalist> elementining
id atributiga ishora qilishi shart.
Misol
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
O‘zingiz sinab ko‘ring »
<output> elementi
<output> elementi hisoblash natijasini ifodalaydi (masalan, skript tomonidan bajarilgan hisoblashniki).
Misol
Hisoblashni bajaring va natijani <output> elementida ko‘rsating:
<form action="/action_page.php"
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>
O‘zingiz sinab ko‘ring »
HTML forma elementlari
| Tag | Tavsif |
|---|---|
| <form> | Foydalanuvchi kiritish uchun HTML formasini belgilaydi |
| <input> | Kiritish boshqaruv elementini belgilaydi |
| <textarea> | Ko‘p qatorli kiritish boshqaruv elementini (matn maydonini) belgilaydi |
| <label> | <input> elementi uchun tegni belgilaydi |
| <fieldset> | Formadagi o‘zaro bog‘liq elementlarni guruhlaydi |
| <legend> | <fieldset> elementi uchun sarlavha (caption) belgilaydi |
| <select> | Ochiladigan ro‘yxatni belgilaydi |
| <optgroup> | Ochiladigan ro‘yxatda tegishli variantlar guruhini belgilaydi |
| <option> | Ochiladigan ro‘yxatdagi variantni belgilaydi |
| <button> | Bosiladigan tugmani belgilaydi |
| <datalist> | Kirish boshqaruvlari uchun oldindan belgilangan variantlar ro‘yxatini belgilaydi |
| <output> | Hisoblash natijasini belgilaydi |
Barcha mavjud HTML teglarining to‘liq ro‘yxati uchun HTML teglar ma’lumotnomamizga murojaat qiling.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!