HTML Forma Elementlari

HTML Forma Elementlari


Ushbu bobda barcha HTML forma elemetlari tasvirlangan


<input> Elementi

<input> elementi eng muhim forma elementi hisoblanadi.

<input> elementi type(tip) atributiga qarab, ko’p jihatdan farq qilishi mumkin.

...   Barcha HTML input turlari keyingi bobda keltirilgan.


<select> Elementi (Drop-Down ro'yhati)

<select> elementi drop-down ro'yhatini bildiradi:

Namuna:

<select name="mashinalar">
  <option value="Chevrolet">Chevrolet</option>
  <option value="Daewoo">Daewoo</option>
  <option value="BMW">BMW</option>
  <option value="Mercedes">Mercedes</option>
</select>

<option> elementlarini tanlash uchun elementlarni belgilaydi.

Ro’yhat tanlangan birinchi elementni ko’rsatadi.

Oldindan belgilangan variantni aniqlash uchun tanlangan atributni qo’shishingiz mumkin.

Namuna:

<option value="BMW" selected>BMW<option>

<textarea> Elementi

<textarea> elementi bir nechta satrli kiritish maydonini (matn maydonini) belgilaydi:

Namuna:

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

Brauzerdagi natija:


<button> Elementi

<button> elementi bosiladigan tugmani ifodalaydi:

Namuna:

<button type="button" onclick="alert('Salom Dunyo!')">Click me!</button>

Bu HTML kodni brauzerda qanday qilib ko’rinishi:


HTML5 Forma Elementlari

HTML5 ga quyidagi elementlar qo’shilgan:

  • <datalist>
  • <keygen>
  • <output>

...   Standart(default) bo’yicha, brauzerlar noma’lum elementlarni displeyda ko’rsatmaydi. Yangi elementlar sahifangizni to’g’ri aks etishiga halaqit bermaydi.


HTML5 <datalist> Elementi

<datalist> elementi <input> elementi uchun oldindan belgilangan variantlar ro’yhatini bildiradi.

Foydalanuvchilar ma’lumot kiritganda oldindan belgilangan variantlar drop-down ro’yhatini ko’radi.

<input> elementining list(ro’yhat) atributi <datalist> elementining id atributiga aloqador bo'lishi kerak.

Namuna

<input> elementi <datalist>da oldindan belgilangan qiymatlar bilan:

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

HTML5 <keygen> Elementi

<keygen> elementining maqsadi foydalanuvchilarga isbotlash maqsadida xavfsiz yo’lni ta’minlash.

<keygen> elementi bir shaklda, bir kalit-juft generator maydonini bildiradi.

Forma yuborilganda, ikki tugmalar hosil qilinadi, biri shaxsiy va biri jamoatchilik.

Shaxsiy kalit lokal saqlanadi, va umumiy kalit serveriga yuboriladi.

Umumiy kalit kelajakda foydalanuvchi aniqlashda mijoz sertifikati ishlab chiqarish uchun foydalanish mumkin:

Namuna

keygen elementi bilan forma elementi:

<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen" name="security">
<input type="submit">
</for>

HTML5 <output> Elementi

<output> elementi hisoblash natijasini ifodalaydi (skript orqali bajarilgani kabi)

Namuna

Hisoblashni bajaring va <output> elementi ichida natijani ko'rsating:

<form action="action_page.asp"
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>

HTML Forma Elementlari

Teg Tavsif
<form> Foydalanuvchi kiritishi uchun HTML formani bildiradi
<input> Kiritish nazoratini bildiradi
<textarea> Ko’p chiziqli kiritish nazoratini belgilaydi(matn maydoni)
<label> <input> elementi uchun bir beligini bildiradi
<fieldset> Bir formada bo’glangan elementlarni guruhlaydi
<legend> <fieldset> uchun nom belgilaydi
<select> Drop-down ro’yhatini belgilaydi
<optgroup> Drop-down ro’yhatidagi bir guruh bog'langan imkoniyatlarni belgilaydi
<option> Drop-down ro’yhatidagi imkoniyatni belgilaydi
<button> Bosib bo'ladigan tugmani ifodalaydi
<datalist> Kiritish nazorati uchun oldindan belgilangan variantlar ro'yhatini ko'rsatadi
<keygen> (Shakllar uchun) bir juft-kalit generator maydonini belgilaydi
<output> Hisoblash natijasini belgilaydi

Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017