HTML Input Elementi Turlari

HTML Input Elementi Turlari


Bu bob <input> elementining kiritish turlarini ko’rsatadi.

Input Elementi Turi: text(matn)

<input type="text"> bir qatorli matn kiritishni bildiradi

Namuna:

<form>
Ismingiz:<br>
<input type="text" name="ismingiz"><br>
Familiyangiz:<br>
<input type="text" name="familiyangiz">
</form>

Brauzerdagi natija:

Ismingiz:

Familiyangiz:

Input Elementi Turi: password(parol)

<input type="password"> parol sohasini bildiradi:

Namuna:

<form>
Ismingiz:<br>
<input type="text" name="ismingiz"><br>
Parolingiz:<br>
<input type = "password" name="parolingiz">
</form>

Brauzerdagi natija:

Login:

Parol:

...   Parol maydonidagi belgilar yashiringan (yulduzchalar yoki aylanalar sifatida ko'rsatilgan).


Input Elementi Turi: submit

<input type="submit"> form-handlerga kiritish uchun tugmani belgilaydi.

Form-handler ma'lumotlarni qayta ishlash uchun skritli o'ziga hos server sahifasi.

Form-handler formaning harakat atributida belgilangan:

Namuna:

<form action="action_page.php">
Ismingiz:<br>
< input type="text" name="firstname" value="Hoshimjon"><br>
Familiyangiz:<br>
<input type="text" name="lastname" value="Ro'ziyev"><br><br>
<input type="submit" value="Tasdiqlash">
</form>

Brauzerdagi natija:

Ismingiz:

Familiyangiz:



Agar tasdiqlash tugmasining value atributi tushirib qoldirilsa, tugma standart(default) bo’yicha nomlanadi:

Namuna:

<form action="action_page.php">
Ismingiz:<br>
< input type="text" name="firstname" value="Hoshimjon"><br>
Familiyangiz:<br>
<input type="text" name="lastname" value="Ro'ziyev"><br><br>
<input type="submit">
</form>

Input Elementi Turi: radio

<input type="radio"> radio tugmasini bildiradi.

Radio tugmalari foydalanuvchiga ko’p sonli cheklangan tanlovlardan faqat bittasini tanlash imkoniyatini beradi:

Namuna:

<form>
<input type="radio" name="gender" value="erkak"checked>
Erkak<br>
<input type="radio" name="gender" value="ayol"> Ayol<br>
</form>

Brauzerdagi natija:

Erkak
Ayol

Input Elementi Turi: checkbox

<input type="checkbox"> belgilash katagini ifodalaydi.

Belgilash katakchalari foydalanuvchiga ko’p sonli cheklangan imkoniyatlardan nol yoki bir necha variantlarni tanlash imkoniyatini beradi.

Namuna:

<form>
<input type="checkbox" name="transport1" value="Velosiped"> Meni velosipedim bor<br>
<input type="checkbox" name="transprt2" value="Mashina"> Meni mashinam bor
</form>

Brauzerdagi natija:

Meni velosipedim bor
Meni mashinam bor

Input Elementi Turi: button(tugma)

<input type="button"> tugmani belgilaydi:

Namuna:

<input type="button" onclick="alert('Salom Dunyo!')" value="Meni Bosing!">

Brauzerdagi natija:


HTML5 Input Elementi Turlari

HTML5 bir necha yangi Input elementi turlarini qo’shimcha qildi:

  • color(=rang)
  • date(=sana)
  • datetime(=vaqt)
  • datetime-local(=mahalliy-vaqt)
  • email(=elektron pochta)
  • month(=oy)
  • number(=raqam)
  • range(=qiymat)
  • search(=qidirish)
  • tel
  • time(=vaqt)
  • url
  • week(=hafta)

...   Input (kiritish) turlari, eski veb-brauzerlar tomonidan taminlanmagan, kiritish matn turi sifatida muomala qiladi.


Input Elementi Turi: number

<input type="number" son qiymatini o’z ichiga oladigan kiritish maydonlari uchun ishlatiladi.

Siz raqamlarga cheklashlar o’rnatishingiz mumkin.

Brauzer qo’llab-quvvatlashiga qarab, cheklovlarni kiritish sohasiga kiritishingiz mumkin.

Namuna:

<form>
Miqdor (1 dan 5 gacha):
<input type="number" name="quantity" min="1" max="5">
</form>

Input Elementi Cheklovlari

Bu yerda ba'zi umumiy kiritish cheklovlarining ro'yhati bor(ba'zilari HTML5 da yangi)

Atribut Tavsif
disabled Kiritish sohasini ishlamaydigan bo'lishi kerakligini ifodalaydi
max Kiritish sohasi uchun maksimum qiymatni ifodalaydi
maxlength Kiritish maydoni uchun belgilarni maksimum sonini ifodalaydi
min Kiritish sohasi uchun eng kichkina qiymatni ifodalaydi
pattern Kiritish qiymatiga qarshi tekshirish uchun oddiy bir ifodani belgilaydi
readonly Kiritish maydoni faqat o'qish uchunligini ifodalaydi(o'zgartirib bo'lmaydi)
required Kiritish maydonini talab qilinganligini ifodalaydi(to'ldirilishi shart)
size Kiritish maydonini kengligini(belgilarda) ifodalaydi
step Kiritish maydoni uchun haqqoniy son intervallarini ifodalaydi
value Kiritish maydoni uchun standart qiymatni(avtomatik ravishda) ifodalaydi

Keyingi bobda Input elementi cheklovlari haqida ko’proq bilib olasiz.

Namuna:

<form>
Miqdor:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Input Elementi Turi: date

<input type="date"> sanani o'z ichiga olishi kerak bo'lgan kiritish sohalari uchun ishlatiladi.

Brauzer qo’llab quvvatlashiga qarab, vaqt tanlash kiritish sohasida namoyon bo’ladi.

Namuna:

<form>
Tugilgan Kun:
<input type="date" name="bday">
</form>

Input elementiga cheklovlar(chegara) qo’shishingiz mumkin:

Namuna:

<form>
1980-01-01dan oldingi vaqtni kiriting:
<input type="date" name="bday" max="1979-12-31"><br>
2000-01-01dan keyingi vaqtni kiriting:
<input type="date" name="bday" min="2000-01-02"><br>
</form>

Input Elementi Turi: color

<input type="color"> rangi o’z ichiga olishi kerak bo’lgan kiritish sohalarida ishlatiladi.

Brauzer qo’llab quvvatlashiga qarab, rang tanlash kiritish sohasida namoyon bo'ladi.

Namuna:

<form>
Sevimli rangingizni tanlang:
<input type="color" name="favcolor">
</form>

Input Elementi Turi: range

<input type="range"> soha ichida bir qiymatni o’z ichiga olishi kerak bo’lgan kiritish sohalarida ishlatiladi.

Brauzer qo’llab quvvatlashiga qarab, slayder nazorat kabi kiritish sohasida namoyon bo’ladi.

Namuna:

<form>
<input type="range" name="points" min="0" max="10">
</form>

Input Elementi Turi: month

<input type="month"> foydalanuvchiga oy va yilni tanlash uchun imkon beradi.
Brauzer qo’llab quvvatlashiga qarab, vaqt tanlash kiritish sohasida namoyon bo’ladi.

Namuna:

<form>
Tug'ilgan kun(oy va yil):
<input type="month" name="bdaymonth">
</form>

Input Elementi Turi: week

<input type="week"> foydalanuvchiga hafta va yilni tanlash imkonini beradi.
Brauzer qo’llab quvvatlashiga qarab, vaqt tanlash kiritish sohasida namoyon bo’ladi.

Namuna:

lt;form>
Haftani tanlang:
<input type="week" name="week_year">
</form>

Input Elementi Turi: time

<input type="time"> foydalnuvchiga vaqtni tanlash imkonini beradi.(vaqt zonasisiz)

Brauzer qo’llab quvvatlashiga qarab, vaqt tanlash kiritish sohasida namoyon bo’ladi.

Namuna:

<form">
Vaqtni tanlang:
<input type="time" name="usr_time">
</form>

Input Elementi Turi: datetime

<input type="datetime"> foydalanuvchiga kun va vaqtni tanlash imkonini beradi(vaqt zonasi bilan).

Namuna:

<form>
Birthday (kun va vaqt):
<input type="datetime" name="bdaytime">
</form>

...   Kiritish turi datetime HTML standartidan chiqarilgan. O'rniga datetime-local dan foydalaning.


Input Elementi Turi: datetime-local

<input type="datetime-local"> foydalanuvchiga kun va vaqtni tanlash imkonini beradi(vaqt zonasisiz).
Brauzer qo’llab quvvatlashiga qarab, vaqt tanlash kiritish sohasida namoyon bo&rssquo;ladi.

Namuna:

<form>
Birthday(kun va vaqt):
<input type="datetime-local" name="bdaytime";>
</form>

Input Elementi Turi: email

<input type="email"> e-mail(pochta) mazilini o’z ichiga olinsh kerak bo’lgan kiritish sohalarida ishlatiladi.

Brauzer qo’llab quvvatlashiga qarab, e-mail manzili kirtilganda avtomatik tarzda aniqlanadi.

Ba’zi smartfonlar email turini aniqlaydi va email kiritishiga moslab klaviaturaga ".com" qo’shadi.

Namuna:

<form>
E-mail:
<input type="email" name="email">
</form>

Input Elementi Turi: search

<input type="search"> qidirish sohalarda ishlatiladi (qidirish sohasi muntazan matn sohasi kabi muomala qiladi).

Namuna:

<form>
Googledan izlang:
<input type="search" name="googlesearch">
</form>

Input Elementi Turi: tel

<input type="tel"> telefon raqami kerak bo’lgan kiritish sohalarida ishlatiladi.
Tel turi hozircha faqat Safari 8 da qo'llab quvvatlanadi.

Namuna:

<form>
Telephone:
<input type="tel" name="usrtel">
</form>

Kiritish turi: url

<input type="url"> URL manzilini o’z ichiga olishi kerak bo’lgan kiritish sohalarida ishlatiladi.
Brauzer qo’llab quvvatlashiga qarab, url sohasi kiritilganda avtomatik ravishda tasdiqlanadi.
Ba’zi smartfonlar url turini biladi va url maydoniga moslab klaviaturaga ".com" qo’shadi.

Namuna:

<form>
O'z sahifangizni qo'shing:
<input type="url" name="homepage">
</form>

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