MohirDox

Ko'rinishi

HTML Input Atributlari ​

Ushbu bob HTML <input> elementi uchun turli atributlarni tasvirlaydi.

value Atributi ​

value atributi input maydoni uchun boshlang‘ich qiymatni belgilaydi:

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

readonly Atributi ​

readonly atributi input maydonini faqat o‘qiladigan qiladi.

  • Faqat o‘qiladigan maydon o‘zgartirib bo‘lmaydi (lekin tanlash va nusxa olish mumkin).
  • Forma yuborilganda qiymat jo‘natiladi.
html
<form>
  <label for="fname">Ism:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Familiya:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

disabled Atributi ​

disabled atributi input maydonini o‘chirib qo‘yilgan (faolsiz) qiladi.

  • Faolsiz maydon ishlatilmaydi va bosib bo‘lmaydi.
  • Forma yuborilganda uning qiymati jo‘natilmaydi.
html
<form>
  <label for="fname">Ism:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Familiya:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

size Atributi ​

size atributi input maydonining ko‘rinadigan kengligini belgilar sonida belgilaydi.

  • Standart qiymat 20.
  • Quyidagilar bilan ishlaydi: text, search, tel, url, email, password.
html
<form>
  <label for="fname">Ism:</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 ​

maxlength atributi input maydonida ruxsat etilgan maksimal belgilar sonini belgilaydi.

  • Maydon ko‘rsatilgan sondan ortiq belgini qabul qilmaydi.
  • Odatda hech qanday xabar ko‘rsatilmaydi; xabarnomalar uchun JavaScriptdan foydalaning.
html
<form>
  <label for="fname">Ism:</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 ​

min va max atributlari input maydoni uchun minimal va maksimal qiymatlarni belgilaydi.

  • Quyidagilar bilan ishlaydi: number, range, date, datetime-local, month, time, week.
html
<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">Miqdor (1 dan 5 gacha):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

multiple Atributi ​

multiple atributi foydalanuvchiga bir nechta qiymat kiritishga ruxsat beradi.

  • Quyidagilar bilan ishlaydi: email, file.
html
<form>
  <label for="files">Fayllarni tanlang:</label>
  <input type="file" id="files" name="files" multiple>
</form>

pattern Atributi ​

pattern atributi forma yuborilganda input qiymati tekshiriladigan muntazam ifodani belgilaydi.

  • Quyidagilar bilan ishlaydi: text, date, search, url, tel, email, password.
  • Namunani tasvirlash uchun umumiy title atributidan foydalaning.
html
<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 ​

placeholder atributi input maydonida kutilayotgan qiymatni tasvirlovchi qisqa ko‘rsatmani belgilaydi.

  • Foydalanuvchi qiymat kiritguncha maydonda ko‘rinadi.
  • Quyidagilar bilan ishlaydi: text, search, url, number, tel, email, password.
html
<form>
  <label for="phone">Telefon raqam 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 ​

required atributi formani yuborishdan oldin input maydoni to‘ldirilishi shartligini belgilaydi.

  • Quyidagilar bilan ishlaydi: text, search, url, tel, email, password, sana tanlash turlari, number, checkbox, radio, file.
html
<form>
  <label for="username">Foydalanuvchi nomi:</label>
  <input type="text" id="username" name="username" required>
</form>

step Atributi ​

step atributi input maydoni uchun ruxsat etilgan sonli oraliqlarni belgilaydi.

  • Misol: step="3" qiymatlari -3, 0, 3, 6 va hokazolarga ruxsat beradi.
  • Quyidagilar bilan ishlaydi: number, range, date, datetime-local, month, time, week.
html
<form>
  <label for="points">Ballar:</label>
  <input type="number" id="points" name="points" step="3">
</form>

TIP

Kiritish cheklovlari to‘liq ishonchli emas. Har doim serverda tekshiring!

autofocus Atributi ​

autofocus atributi sahifa yuklanganda input maydoni avtomatik ravishda fokus olishini belgilaydi.

html
<form>
  <label for="fname">Ism:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Familiya:</label><br>
  <input type="text" id="lname" name="lname">
</form>

height va width Atributlari ​

height va width atributlari <input type="image"> elementi balandligi va kengligini belgilaydi.

TIP

Yuklash paytida tartib (layout) siljishlarini oldini olish uchun har doim balandlik va kenglikni ko‘rsating.

html
<form>
  <label for="fname">Ism:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Familiya:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Yuborish" width="48" height="48">
</form>

list Atributi ​

list atributi <input> uchun oldindan belgilangan variantlarni o‘z ichiga olgan <datalist> elementiga murojaat qiladi.

html
<form>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

autocomplete Atributi ​

autocomplete atributi forma yoki input maydonida avtoto‘ldirish yoqilgan yoki o‘chirilganligini belgilaydi.

  • Brauzerga avval kiritilgan qiymatlarni taklif qilishga imkon beradi.
  • <form> va quyidagi input turlari bilan ishlaydi: text, search, url, tel, email, password, sana tanlash turlari, range, color.
html
<form action="/action_page.php" autocomplete="on">
  <label for="fname">Ism:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Familiya:</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="Yuborish">
</form>

TIP

Ba’zi brauzerlarda avtoto‘ldirishni sozlamalarda yoqish kerak bo‘lishi mumkin.

HTML Forma va Input Elementlari ​

TegTavsif
<form>Foydalanuvchi kiritishi uchun HTML formasini belgilaydi
<input>Kiritish boshqaruvini belgilaydi

INFO

Mavjud HTML teglarining to‘liq ro‘yxati uchun HTML Tag Reference sahifasiga tashrif buyuring.