HTML input atributlari
Bu bob HTML <input> elementining turli xil atributlarini tavsiflaydi.
value atributi
Kirish value atributi kirish maydoni uchun boshlang‘ich qiymatni belgilaydi:
Misol
Boshlang‘ich (standart) qiymatlarga ega kirish maydonlari:
<form>
<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">
</form>
O‘zingiz sinab ko‘ring »
readonly atributi
Kirish readonly atributi kirish maydoni faqat o‘qish uchun ekanligini bildiradi.
Faqat o‘qish uchun kirish maydonini o‘zgartirib bo‘lmaydi (biroq foydalanuvchi unga tab bilan o‘tishi, uni ajratib ko‘rsatishi va undan matnni nusxalashi mumkin).
Faqat o‘qish uchun kirish maydonining qiymati forma yuborilganda yuboriladi!
Misol
Faqat o‘qish uchun kirish maydoni:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
O‘zingiz sinab ko‘ring »
disabled atributi
Kirish disabled atributi kirish maydoni o‘chirilishi (noqul holatga keltirilishi) kerakligini bildiradi.
O‘chirilgan kirish maydonidan foydalanib bo‘lmaydi va uni bosib bo‘lmaydi.
O‘chirilgan kirish maydonining qiymati forma yuborilganda yuborilmaydi!
Misol
O‘chirilgan kirish maydoni:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
O‘zingiz sinab ko‘ring »
size atributi
Kirish size atributi kirish maydonining belgilarda ifodalangan
ko‘rinadigan kengligini belgilaydi.
size atributining standart qiymati 20.
Eslatma: size atributi quyidagi input turlari bilan ishlaydi: text, search, tel, url, email va password.
Misol
Kirish maydoni uchun kenglik belgilang:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4">
</form>
O‘zingiz sinab ko‘ring »
maxlength atributi
Kirish maxlength atributi kirish maydoniga ruxsat etilgan belgilar maksimal sonini belgilaydi.
Eslatma: maxlength belgilansa, kiritish maydoni ko‘rsatilgan sondan ortiq belgini qabul qilmaydi. Biroq bu atribut foydalanuvchiga hech qanday xabar bermaydi. Shuning uchun foydalanuvchini ogohlantirmoqchi bo‘lsangiz, JavaScript kodi yozishingiz kerak.
Misol
Kirish maydoni uchun maksimal uzunlik belgilang:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
maxlength="4" size="4">
</form>
O‘zingiz sinab ko‘ring »
min va max atributlari
Kirish min va max atributlari kirish maydoni uchun minimal va maksimal qiymatlarni belgilaydi.
min va max atributlari quyidagi kirish turlari bilan ishlaydi: number, range, date, datetime-local, month, time va week.
Maslahat: ruxsat etilgan qiymatlar oralig‘ini belgilash uchun max va min atributlarini birga ishlating.
Misol
Maksimal sana, minimal sana va ruxsat etilgan qiymatlar oralig‘ini belgilang:
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date
after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02"><br><br>
<label for="quantity">Quantity
(between 1 and 5):</label>
<input type="number" id="quantity"
name="quantity" min="1" max="5">
</form>
O‘zingiz sinab ko‘ring »
multiple atributi
Kirish multiple atributi foydalanuvchiga kirish maydoniga bitta qiymatdan ko‘p qiymat kiritishga ruxsat berilganini bildiradi.
multiple atributi quyidagi kirish turlari bilan ishlaydi: email va file.
Misol
Ko‘p qiymat qabul qiladigan fayl yuklash maydoni:
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
O‘zingiz sinab ko‘ring »
pattern atributi
Kirish pattern atributi forma yuborilganda kirish maydonining qiymati solishtiriladigan muntazam ifodani (regular expression) belgilaydi.
pattern atributi quyidagi kirish turlari bilan ishlaydi: text,
date, search, url, tel, email va password.
Maslahat: foydalanuvchiga yordam berish uchun global title atributi orqali pattern andozasini tushuntiring.
Maslahat: Muntazam ifodalar haqida bizning JavaScript darsligimizda ko‘proq bilib oling.
Misol
Faqat uchta harfni o‘z ichiga olishi mumkin bo‘lgan kirish maydoni (raqamlar yoki maxsus belgilar yo‘q):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
O‘zingiz sinab ko‘ring »
placeholder atributi
Kirish placeholder atributi kirish maydonining kutilayotgan qiymatini tavsiflovchi qisqa maslahatni (namuna qiymat yoki kutilayotgan formatning qisqa tavsifi) belgilaydi.
Qisqa maslahat foydalanuvchi qiymat kiritishidan oldin kirish maydonida ko‘rsatiladi.
placeholder atributi quyidagi kirish turlari bilan ishlaydi: text, search, url,
number, tel, email va password.
Misol
Placeholder (maslahat) matni bilan kirish maydoni:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
O‘zingiz sinab ko‘ring »
required atributi
Kirish required atributi kirish maydoni forma yuborilishidan oldin to‘ldirilishi shartligini bildiradi.
required atributi quyidagi kirish turlari bilan ishlaydi: text, search, url, tel, email, password, sana tanlash vositalari (date pickers), number, checkbox, radio va file.
Misol
Majburiy kirish maydoni:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
O‘zingiz sinab ko‘ring »
step atributi
Kirish step atributi kirish maydoni uchun ruxsat etilgan raqam oraliqlarini belgilaydi.
Misol: agar step="3" bo‘lsa, ruxsat etilgan raqamlar -3, 0, 3, 6 va h.k. bo‘lishi mumkin.
Maslahat: Bu atribut ruxsat etilgan qiymatlar oralig‘ini yaratish uchun max va min atributlari bilan birgalikda ishlatilishi mumkin.
step atributi quyidagi kirish turlari bilan ishlaydi: number, range, date, datetime-local, month, time va week.
Misol
Ruxsat etilgan raqam oraliqlari belgilangan kirish maydoni:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
O‘zingiz sinab ko‘ring »
Eslatma: kiritish cheklovlari to‘liq himoya bermaydi, JavaScript esa ruxsat etilmagan qiymatlarni kiritishning ko‘plab usullarini taqdim etadi. Kiritishni xavfsiz cheklash uchun ma’lumotlar qabul qiluvchi tomonda (serverda) ham tekshirilishi kerak!
autofocus atributi
Kirish autofocus atributi sahifa yuklanganda kirish maydoni avtomatik fokus olishi kerakligini belgilaydi.
Misol
Sahifa yuklanganda "Ism" kirish maydoni avtomatik fokus olsin:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
O‘zingiz sinab ko‘ring »
height va width atributlari
input elementining height va width atributlari <input type="image"> elementining balandligi va kengligini belgilaydi.
Maslahat: rasmlar uchun height va width atributlarining ikkalasini ham doim belgilang. height va width belgilansa, sahifa yuklanayotganda rasm uchun zarur joy oldindan ajratiladi. Bu atributlarsiz brauzer rasm o‘lchamini bilmaydi va unga mos joy ajrata olmaydi. Natijada yuklanish vaqtida, ya’ni rasmlar yuklanayotganda, sahifa maketi o‘zgarib turadi.
Misol
Balandlik va kenglik atributlari bilan rasmni yuborish tugmasi sifatida belgilang:
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
O‘zingiz sinab ko‘ring »
list atributi
Kirish list atributi <input> elementi uchun oldindan belgilangan variantlarni o‘z ichiga olgan <datalist> elementiga ishora qiladi.
Misol
<datalist> ichida oldindan belgilangan qiymatlarga ega <input> elementi:
<form>
<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 »
autocomplete atributi
Kirish autocomplete atributi formada yoki kirish maydonida avtomatik to‘ldirish (autocomplete) yoqilgan yoki o‘chirilgan bo‘lishi kerakligini belgilaydi.
Avtomatik to‘ldirish brauzerga qiymatni bashorat qilish imkonini beradi. Foydalanuvchi maydonga kiritishni boshlaganda, brauzer oldin kiritilgan qiymatlarga asoslanib, maydonni to‘ldirish uchun variantlarni ko‘rsatishi kerak.
autocomplete atributi <form> va quyidagi <input> turlari bilan ishlaydi: text, search, url, tel, email, password, sana tanlash vositalari (datepickers), range va color.
Misol
Bitta kirish maydoni uchun o‘chirilgan, avtomatik to‘ldirish yoqilgan HTML forma:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
O‘zingiz sinab ko‘ring »
Maslahat: bu ishlashi uchun ayrim brauzerlarda avtomatik to‘ldirish (autocomplete) funksiyasini yoqishingiz kerak bo‘lishi mumkin (brauzer menyusidagi "Preferences" bo‘limini ko‘ring).
HTML forma va input elementlari
| Tag | Tavsif |
|---|---|
| <form> | Foydalanuvchi kiritish uchun HTML formasini belgilaydi |
| <input> | Kiritish boshqaruv elementini belgilaydi |
Barcha mavjud HTML teglarining to‘liq ro‘yxati uchun HTML teglar ma’lumotnomamizga murojaat qiling.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!