HTML Input Atributlari

HTML Input Atributlari


value Atributi

value atributi, input elementi uchun boshlang’ich qiymatini belgilaydi:

Namuna:

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

readonly Atributi

readonly atributi input elementi faqat o’qish uchunligini (o’zgartirilishi mumkin emas) bildiradi:

Namuna:

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

readonly atributiga value(qiymat) kerak emas. Bu readonly="readonly" deb yozilishi bilan bir xil.


disabled Atributi

disabled atributi kiritish maydonini ishlatib bo’lmasligini bildiradi.

O’chirilgan elementi yaroqsiz va bosib bo’lmaydi.

O’chirilgan elementlar qabul(submit) qilinmaydi.

Namuna:

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

disabled atributga qiymat kerak emas. Bu disabled="disabled" deb yozilishi bilan bir xil.


size Atributi

size atributi input elementi uchun belgilar sig’imini bildiradi:

Namuna:

<form action="">
Ismingiz:<br>
<input type="text" name="ismingiz" value="Hoshimjon" size="40">
<br>
Familiyangiz:<br>
<input type="text" name="familiyangiz">
</form>

maxlength Atributi

maxlength atributi input elementi uchun ruhsat etilgan maksimal uzunligni belgilaydi:

Namuna:

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

maxLength atributi bilan, kiritishda ruhsat etilgan belgilar sonidan ko’p qabul qilmaydi.

Atribut hech qanday fikr-mulohaza bermaydi. Agar foydalanuvchi ogohlantirmoqchi bo’lsangiz, siz JavaScript kodini yozishingiz kerak.

...   Kirish cheklovlar ishonchli emas. JavaScript noqonuniy hissa qo’shish uchun ko’p yo’llarni beradi.
Kiritishni xavfsiz cheklash uchun, cheklashlar qabul qiluvchi (server) tomonidan tekshirilishi kerak.


HTML5 Atributlari

HTML5 da quyidagi yangi atributlar <input> elementiga qo’shilgan:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

va quyidagi atributlar <form> elementi uchun:

  • autocomplete
  • novalidate

autocomplete Atributi

autocomplete atributi forma yoki input elementida avtoto’ldirish bo’lishi kerak yoki yo’qligini aniqlaydi.

autocomplete yoqilgan bo’lsa, brauzer avtomatik ravishda qiymatlarni foydalanuvchi oldin kiritgan qiymatlar asosida to’ldiradi.

Maslahat: Bu forma uchun avtoto’ldirish "on"(yoniq) bo’lishi mumkin va muayyan input elementlarida "off"(o’chiq) bo’lishi mumkin yoki aksincha.

autocomplete atributi quyidagi <form> va <input> turlari bilan ishlaydi: text(matn), search(qidiruv), url, tel, email, password(parol), datepickers(sana tanlash), range(qator) va color(rangi):

Namuna

HTML formasi autocomplete yoniq holati bilan(va kirtish sohasi uchun o’chiq holati):

<form action="action_page.php" autocomplete="on">
Ismingiz:<input type="text" name="fmane"><br>
Familiyangiz:<input type="text" name="lname"><br>
Elektron pochtangiz:<input type="email" autocomplete="off"><br>
<input type="submit">
</form>

Maslahat: Ba’zi brauzerlarda siz buni ishlashi uchun autocomplete vazifasini faollashtirish kerak bo’ladi


novalidate Atributi

novalidate atributi <form> atributi hisoblanadi.

Ishalatilganda, novalidate taqdim(submit) etilgan forma ma’lumotlar tasdiqlanmagan bo’lishi kerakligini belgilaydi.

Namuna

Forma kiritilganda(submit) tasdiqlangan bo’lishi kerakmasligini ko’rsatadi:

<form action="action_page.php" novalidate>
Elektron pochtangiz:<input type="email" name="user_email">
<input type="submit">
</form>

autofocus Atributi

avtofocus atributi boolean atributi hisoblanadi.

Ishalatilganda, u <input> elementi sahifa yuklanganda avtomatik fokus olishi kerakligini bildiradi.

Namuna

"Ism" ni sahifa yuklanganda input elementi avtomatik ravishda fokus olishini bajarib ko’raylik:

Ismingiz:<input type="text" name="fname" autofocus>

form Atributi

Form atributi <input> elementi tegishli bir yoki bir necha formalarni belgilaydi.

Maslahat: Birdan ortiq formaga murojaat qilish uchun, forma ma’lumotlarining joy-ajratiladigan ro’yhatidan foydalaning.

Namuna

Input elementi HTML form elementidan tashqarida joylashgan (lekin hali shaklining bir qismi):

<form action="action_page.php" id="form1>
Ismingiz:<input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

Familiyangiz:<input type="text" name="lname" form="form1">

formaction Atributi

formaction atributi form taqdim qilingan paytda kiritishni nazorat qiluvchi faylning URLini belgilaydi.

formaction atributi <form> elementi harakat xususiyatlarini bekor qiladi.

formaction atributi type="submit" va type="image" bilan ishlatiladi.

Namuna

HTML form ikki kiritish tugmalari, turli harakatlar bilan:

<form action="action_page.php">
Ismingiz:<input type="text" name="fmane"><br>
Familiyangiz:<input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin">
</form>

formenctype Atributi

formenctype atributi serverga topshirayotganda shakli-ma’lumotlarini qanday kodlash kerakligini belgilaydi (faqat method= "post"li formalar uchun)

formenctype atributi <form> elementi kodlash turi xususiyatlarini bekor qiladi.

formenctype atributi type="submit" va type="image" bilan ishlatiladi.

Namuna

Default kodlangan(birinchi kiritish tugmasini), va "multipart / form-data" (ikkinchi kiritish tugmasi) kabi kodlangan forma ma’lumotlarini jo’nating:

<form action="demo_post_enctype.asp" method="post">
Ismingiz:<input type="text" name="fmane"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data">
value="Submit as Multipart/form-data">
</form>

formmethod Atributi

formmethod atributi harakat URL forma-ma’lumotlarni jo’natish uchun HTTP usuli belgilaydi.

formaction atributi <form> elementi usul atributini bekor qiladi.

formmethod atributi type="submit" va type="image" bilan ishlatilib bo’ladi.

Namuna

Ikkinchi kiritish tugmasi formanig HTTP usulini bekor qiladi:

<form action="action_page.php" method="get">
Ismingiz:<input type="text" name="fmane"><br>
Familiyangiz:<input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="demo_post.asp"
value="Submit using POST">
</form>

formnovalidate Atributi

novalidate atributi boolean atribut hisoblanadi.

Bor bo’lganda, u taqdim etilgan paytda <input> element tasdiqlangan bo’lishi kerakligini bildiradi..

formnovalidate atributi <form> elementi novalidate atributini bekor qiladi.

formalidate atributini type="submit" bilan ishlatilib bo’ladi

Namuna

Ikki kiritish tugmalari bilan bir forma(tasdiqlash bilan yoki usiz):

<form action="action_page.php">
Elektron pochta:<input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>

formtarget Atributi

formtarget atributi forma topshirilgandan keyin javobini qayerga ko’rsatishni bildiradigan ism yoki kalit so’zni bildiradi.

formtarget atributi <form> elementi maqsad atributini bekor qiladi.

formtarget atributi type="submit" va type="image" bilan ishlatila oladi.

Namuna

Forma ikki kiritish tugmalari turli maqsad oynalari bilan:

<form action="action_page.php">
Ismingiz:<input type="text" name="fmane"><br>
Familiyangiz:<input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>

height va width Atributlari

height and width atributlari <input> elementinig balandligi va kengligini ifodalaydi.

height va width atributlari faqat <input type="image"> bilan ishlatiladi

...   Tasvir hajmini har doim belgilang. Brauzer hajmini bilmasa, tasvirlar yuklanganda sahifa tezlik bilan yonib o’chadi.

Namuna

Rasmni kiritish tugmasidek height va width atributlari bilan belgilang:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

list Atributi

list(ro’yhat) atributi <input> elementi uchun oldindan belgilangan tanlovlarni o’z ichiga olgan <datalist> elementini anglatadi

Namuna

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

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

min va max Atributlari

min va max atributlari <input> elementi uchun minimal va maksimal qiymatni belgilaydi.

min va max atributlar quyidagi input elementi turlari bilan ishlaydi:number(son), range(qiymat), date(sana), datetime(vaqt), datetime-local(mahalliy vaqt), month(oy), time(vaqt), va week(hafta).

Namuna

<input> elementlari minimum va maksimum qiymatlar bilan:

1980-01-01 dan oldingi sanani kiriting:
<input type="date" name="bday" max="1979-12-31">

2000-01-01 dan keyingi sanani kiriting:
<input type="date" name="bday" min="2000-01-02">

Qiymat(1 va 5 o’rtasida):
<input type="number" name="quantity" min="1" max="5">

multiple Atributi

multiple atributi boolean atribut hisoblanadi

Bor bo’lganda, u foydalanuvchiga <input> elementiga bir nechta qiymat kiritish uchun ruxsatligini bildiradi.

multiple atribut quyidagi input elementi turlari bilan ishlaydi: email va file.

Namuna

Fayl yuklash sohasi ko’p sonli qiymatlarni qabul qiladi:

Rasmlarni tanlang: <input type="file" name="img" multiple>

pattern Atributi

pattern atributi <input> elementi ning qiymati qarshi tekshiriladigan muntazam ifodani belgilaydi

pattern atributi quyidagi input elementi turlari bilan ishlaydi: text, search, url, tel, email, and password.

Maslahat: pattern tasvirlash uchun foydalanuvchiga yordam berish maqsadida global titil atributidan foydalaning.

Namuna

Input elementi faqat uchta harflarni o’z ichiga olishi mumkin(raqamlar yoki mahsus belgilarsiz):

Davlat kodi: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Uch harfli davlat kodi">

placeholder Atributi

placeholder atributi input elementidagi kutilgan qiymatni tasvirlaydigan maslahatni bildiradi (formatning namuna qiymati yoki qisqa ta’rifi).

Maslahat foydalanuvchi qiymat kiritishidan oldin input elementida ko’rsatiladi.

placeholder quyidagi input elementi turlari bilan ishlaydi:text, search, url, tel, email, va password.

Namuna

Input elementi placeholder teksti bilan:

<input type="text" name="fname" placeholder="Ismingiz">

required Atributi

required atributi boolean atributi hisoblanadi.

Bor bo’lganda, u forma topshirishdan oldin input elementi to’ldirilishi shartligini bildiradi.

required atributi quyidagi input elementi turlari bilan ishlaydi:text, search, url, tel, email, password, date pickers, number, checkbox, radoi, va file.

Namuna

required(talab qilinadigan) kiritish sohasi:

Ismingiz: <input type="text" name="usrname" required>

step Atributi

step atributi <input> elementi uchun huquqiy son intervallarini belgilaydi.

Masalan: agar step="3" bo’lsa huquqiy sonlar -3, 0, 3, 6 va boshqalar bo’lishi mumkin

Maslahat: step atributi ko’p sonli qiymatlar hosil qigani min va max atributlar bilan ishlatilib bo’ladi.

step atributi quyidagi input elementi turlari bilan ishlatilishi mumkin: number, range, date, datetime, datetime-local, month, time va week.

Namuna

Input elementi mahsus haqiqiy son intervallari bilan:

<input type="number" name="points" step="3">

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