HTML Input Atributlari

HTML Input Atributlari

Ushbu bo'lim HTML <input> elementi uchun turli xil atributlarni tavsiflaydi.

value Atributi

input value atributi kiritish maydoniga boshlang'ich qiymatni belgilaydi.

Misol: Quyida boshlang'ich (standart) qiymatlar bilan kiritish maydonlari keltirilgan:

<form>
  <label for="fname">Ismingiz:</label><br />
  <input type="text" id="fname" name="fname" value="John" /><br />
  <label for="lname">Familiyangiz:</label><br />
  <input type="text" id="lname" name="lname" value="Doe" />
</form>

readonly Atributi

input readonly atributi kiritish maydonining faqat o'qiladigan bo'lishini belgilaydi.

Faqat o'qish rejimidagi kiritish maydoni o'zgartirilishi mumkin emas (biroq, foydalanuvchi uni tanlashi, ko'chirib olish imkoniyatiga ega bo'ladi).

Faqat o'qish rejimidagi kiritish maydonining qiymati forma yuborilganda jo'natiladi!

Misol: Faqat o'qish rejimidagi kiritish maydoni:

<form>
  <label for="fname">Ismingiz:</label><br />
  <input type="text" id="fname" name="fname" value="John" readonly /><br />
  <label for="lname">Familiyangiz:</label><br />
  <input type="text" id="lname" name="lname" value="Doe" />
</form>

disabled Atributi

input disabled atributi kiritish maydonining ishlamayotganligini belgilaydi.

Ishlamaydigan kiritish maydoni foydalanib bo'lmaydi va bosilmaydi.

Ishlamaydigan kiritish maydonining qiymati forma yuborilganda jo'natilmaydi!

Misol: Ishlamaydigan kiritish maydoni:

<form>
  <label for="fname">Ismingiz:</label><br />
  <input type="text" id="fname" name="fname" value="John" disabled /><br />
  <label for="lname">Familiyangiz:</label><br />
  <input type="text" id="lname" name="lname" value="Doe" />
</form>

size Atributi

input size atributi kiritish maydonining ko'rinadigan kengligini belgilar soni bo'yicha belgilaydi.

size uchun standart qiymat 20.

Eslatma: size atributi quyidagi input turlari bilan ishlaydi: text, search, tel, url, email, va password.

Misol: Kiritish maydoni uchun kenglikni belgilash:

<form>
  <label for="fname">Ismingiz:</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>

maxlength Atributi

input maxlength atributi kiritish maydoniga ruxsat etilgan maksimal belgilar sonini belgilaydi.

Eslatma: maxlength o'rnatilganda, kiritish maydoni belgilangan belgilar sonidan ko'p qabul qilmaydi. Ammo, bu atribut hech qanday bildirishnoma bermaydi. Agar foydalanuvchini ogohlantirmoqchi bo'lsangiz, JavaScript kodini yozishingiz kerak.

Misol: Kiritish maydoni uchun maksimal uzunlikni belgilash:

<form>
  <label for="fname">Ismingiz:</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>

min va max Atributlari

input min va max atributlari kiritish maydonining minimal va maksimal qiymatlarini belgilaydi.

min va max atributlari quyidagi input turlari bilan ishlaydi: number, range, date, datetime-local, month, time, va week.

Maslahat: max va min atributlarini birgalikda foydalanib, qonuniy qiymatlar diapazonini yarating.

Misol: Maksimal sana, minimal sana va qonuniy qiymatlar diapazonini belgilash:

<form>
  <label for="datemax">1980-01-01 dan oldingi sanani kiriting:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31" /><br /><br />
 
  <label for="datemin">2000-01-01 dan keyingi sanani kiriting:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02" /><br /><br />
 
  <label for="quantity">Soni (1 dan 5 gacha):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5" />
</form>

multiple Atributi

input multiple atributi foydalanuvchiga kiritish maydoniga bir nechta qiymatlarni kiritish imkonini beradi.

multiple atributi quyidagi input turlari bilan ishlaydi: email, va file.

Misol: Bir nechta qiymatlarni qabul qiladigan fayl yuklash maydoni:

<form>
  <label for="files">Fayllarni tanlang:</label>
  <input type="file" id="files" name="files" multiple />
</form>

pattern Atributi

input pattern atributi kiritish maydonining qiymati forma yuborilganda tekshiriladigan regular ifodani belgilaydi.

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

Maslahat: Foydalanuvchiga yordam berish uchun pattern atributiga mos keladigan qiymatni title atributi bilan ta'riflang.

Maslahat: JavaScript darsligimizda regular ifodalar haqida ko'proq bilib oling.

Misol: Faqat uchta harfni (raqamlar yoki maxsus belgilar yo'q) qabul qiladigan kiritish maydoni:

<form>
  <label for="country_code">Mamlakat kodi:</label>
  <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Uch harfli mamlakat kodi" />
</form>

placeholder Atributi

input placeholder atributi kiritish maydonida kutilayotgan qiymatni tavsiflovchi qisqa maslahatni (namuna qiymat yoki kutilayotgan formatning qisqa tavsifi) belgilaydi.

Qisqa maslahat kiritish maydonida foydalanuvchi qiymat kiritishidan oldin ko'rsatiladi.

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

Misol: Maslahat matni bilan kiritish maydoni:

<form>
  <label for="phone">Telefon raqamingizni kiriting:</label>
  <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" />
</form>

required Atributi

input required atributi kiritish maydoni to'ldirilishi kerakligini belgilaydi.

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

Misol: Talab qilingan kiritish maydoni:

<form>
  <label for="username">Foydalanuvchi nomi:</label>
  <input type="text" id="username" name="username" required />
</form>

step Atributi

input step atributi kiritish maydoni uchun qonuniy raqam intervalini belgilaydi.

Misol: Agar step="3" deb belgilangan bo'lsa, qonuniy raqamlar -3, 0, 3, 6, va hokazo bo'lishi mumkin.

Maslahat: Bu atributni max va min atributlari bilan birga ishlatib, qonuniy qiymatlar diapazonini yaratishingiz mumkin.

step atributi quyidagi input turlari bilan ishlaydi

: number, range, date, datetime-local, month, time, va week.

Misol: Maksimal va minimal sanani belgilash:

<form>
  <label for="birthday">Sizning tug'ilgan kuningiz:</label>
  <input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-01-01" step="1" />
</form>

autofocus Atributi

input autofocus atributi forma yuklanganda kiritish maydoni avtomatik ravishda fokuslanishi kerakligini belgilaydi.

Fokuslangan kiritish maydoni forma ochilganda avtomatik ravishda ko'rib chiqiladi (foydalanuvchi bu maydonga ma'lumot kiritishni boshlashi mumkin).

Misol: Avtomatik fokuslangan kiritish maydoni:

<form>
  <label for="fname">Ismingiz:</label><br />
  <input type="text" id="fname" name="fname" autofocus />
</form>

autocomplete Atributi

input autocomplete atributi kiritish maydonida avtomatik to'ldirish funktsiyasi yoqilgan yoki o'chirilganligini belgilaydi.

Avtomatik to'ldirish - bu brauzer foydalanuvchi uchun shakl maydonlarini to'ldirishini ta'minlovchi funktsiya. Brauzer ilgari kirish maydoniga kiritilgan qiymatlarni saqlaydi va foydalanuvchi kiritish maydoniga e'tibor qaratganida taklif qiladi.

autocomplete atributi quyidagi input turlari bilan ishlaydi: text, search, url, tel, email, password, datepickers, range, va color.

Misol: Autofill yoqilgan kiritish maydoni:

<form>
  <label for="email">Elektron pochta:</label><br />
  <input type="email" id="email" name="email" autocomplete="on" />
</form>

autocapitalize Atributi

input autocapitalize atributi kirish maydonida avtomatik bosh harflarni yoqadi yoki o'chiradi.

Misol: Autocapitalize bilan kiritish maydoni:

<form>
  <label for="username">Foydalanuvchi nomi:</label><br />
  <input type="text" id="username" name="username" autocapitalize="on" />
</form>