HTML formalari
HTML forma foydalanuvchi kiritgan ma’lumotlarni yig‘ish uchun ishlatiladi. Foydalanuvchi ma’lumoti ko‘pincha qayta ishlash uchun serverga yuboriladi.
<form> elementi
HTML <form> elementi foydalanuvchi kiritishi uchun HTML forma yaratishda ishlatiladi:
<form>
.
form elements
.
</form>
<form> elementi — bu kirish elementlarining turli turlari, masalan: matn maydonlari, belgilash katakchalari (checkbox), radio tugmalar, yuborish tugmalari va h.k. uchun idish.
Formaning barcha turli elementlari ushbu bobda ko‘rib chiqilgan: HTML forma elementlari.
<input> elementi
HTML <input> elementi eng ko‘p ishlatiladigan forma elementidir.
<input> elementi type atributiga qarab ko‘p xil usullarda ko‘rsatilishi mumkin.
Mana ba’zi misollar:
| Type | Tavsif |
|---|---|
| <input type="text"> | Bir qatorli matn kirish maydonini ko‘rsatadi |
| <input type="radio"> | Radio tugmani ko‘rsatadi (ko‘p variantlardan bittasini tanlash uchun) |
| <input type="checkbox"> | Belgilash katakchasini ko‘rsatadi (ko‘p variantlardan nol yoki bir nechtasini tanlash uchun) |
| <input type="submit"> | Yuborish tugmasini ko‘rsatadi (formani yuborish uchun) |
| <input type="button"> | Bosiladigan tugmani ko‘rsatadi |
Barcha turli kirish turlari ushbu bobda ko‘rib chiqilgan: HTML kirish turlari.
Matn maydonlari
<input type="text"> matn kiritish uchun bir qatorli kirish maydonini aniqlaydi.
Misol
Matn kirish maydonlari bilan forma:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
O‘zingiz sinab ko‘ring »
Yuqoridagi HTML kodi brauzerda quyidagicha ko‘rsatiladi:
Eslatma: Formaning o‘zi ko‘rinmaydi. Shuningdek, kirish maydonining standart kengligi 20 belgi ekaniga ham e’tibor bering.
<label> elementi
Yuqoridagi misolda <label> elementidan foydalanishga e’tibor bering.
<label> tegi ko‘p forma elementlari uchun yorliq 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 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.
Radio tugmalar
<input type="radio"> radio tugmasini aniqlaydi.
Radio tugmalari foydalanuvchiga cheklangan sonli variantlardan BITTASINI tanlash imkonini beradi.
Misol
Radio tugmalar bilan forma:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
O‘zingiz sinab ko‘ring »
Yuqoridagi HTML kodi brauzerda quyidagicha ko‘rsatiladi:
Sevimli web tilini tanlang:
Checkboxlar
<input type="checkbox"> belgilash katakchasini (checkbox) aniqlaydi.
Belgilash katakchalari foydalanuvchiga cheklangan sonli variantlardan NOL yoki UNDAN KO‘PROQ variantni tanlash imkonini beradi.
Misol
Belgilash katakchalari bilan forma:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
O‘zingiz sinab ko‘ring »
Yuqoridagi HTML kodi brauzerda quyidagicha ko‘rsatiladi:
Yuborish tugmasi
<input type="submit"> forma ma’lumotlarini forma qayta ishlovchisiga yuborish uchun tugma aniqlaydi.
Forma qayta ishlovchisi odatda kirish ma’lumotlarini qayta ishlash uchun skriptli server faylidir.
Forma qayta ishlovchisi formaning action atributida belgilanadi.
Misol
Yuborish tugmasi bilan forma:
<form action="/action_page.php">
<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">
</form>
O‘zingiz sinab ko‘ring »
Yuqoridagi HTML kodi brauzerda quyidagicha ko‘rsatiladi:
<input> uchun name atributi
Har bir kirish maydoni yuborilishi uchun name atributiga ega bo‘lishi kerakligiga e’tibor bering.
Agar name atributi tashlab ketilsa, kirish maydonining qiymati umuman yuborilmaydi.
Misol
Bu misol "Ism" kirish maydonining qiymatini yubormaydi:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
O‘zingiz sinab ko‘ring »
Video: HTML formalari
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!