HTML Input Turlari

Ushbu bob HTML <input> elementi uchun turli turlarni tavsiflaydi.

HTML Input Turlari

HTMLda foydalanishingiz mumkin bo'lgan input turlari quyidagilar:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

TIP

type atributining standart qiymati "text" hisoblanadi.

Input Type Text

<input type="text"> bir qatorli matn kiritish maydonini belgilaydi:

html

<form>
  <label for="ism">Ismingiz:</label><br>
  <input type="text" id="ism" name="ism"><br>
  <label for="familiya">Familiyangiz:</label><br>
  <input type="text" id="familiya" name="familiya">
</form>

Yuqoridagi HTML kod brauzerda quyidagicha ko'rinadi:

Ismingiz:

Familiyangiz:

Input Type Password

<input type="password"> parol maydonini belgilaydi:

html

<form>
  <label for="foydalanuvchi">Foydalanuvchi nomi:</label><br>
  <input type="text" id="foydalanuvchi" name="foydalanuvchi"><br>
  <label for="parol">Parol:</label><br>
  <input type="password" id="parol" name="parol">
</form>

Brauzerda ko'rinishi:

Foydalanuvchi nomi:

Parol:

TIP

Parol maydonidagi belgilar yashirin ko'rinishda (yulduzcha yoki doira) ko'rsatiladi.

Input Type Submit

<input type="submit"> formani yuborish tugmasini belgilaydi.

Formani qabul qiluvchi server sahifasi action atributida ko'rsatiladi:

html

<form action="/action_page.php">
  <label for="ism">Ismingiz:</label><br>
  <input type="text" id="ism" name="ism" value="Ali"><br>
  <label for="familiya">Familiyangiz:</label><br>
  <input type="text" id="familiya" name="familiya" value="Karimov"><br><br>
  <input type="submit" value="Yuborish">
</form>

Agar submit tugmasining value atributini bermasangiz, tugmada standart matn ko'rsatiladi:

html

<form action="/action_page.php">
  <label for="ism">Ismingiz:</label><br>
  <input type="text" id="ism" name="ism" value="Ali"><br>
  <label for="familiya">Familiyangiz:</label><br>
  <input type="text" id="familiya" name="familiya" value="Karimov"><br><br>
  <input type="submit">
</form>

Input Type Reset

<input type="reset"> formadagi qiymatlarni boshlang'ich holatga qaytaruvchi tugmani belgilaydi:

html

<form action="/action_page.php">
  <label for="ism">Ismingiz:</label><br>
  <input type="text" id="ism" name="ism" value="Ali"><br>
  <label for="familiya">Familiyangiz:</label><br>
  <input type="text" id="familiya" name="familiya" value="Karimov"><br><br>
  <input type="submit" value="Yuborish">
  <input type="reset" value="Tozalash">
</form>

TIP

Agar input qiymatlarini o'zgartirsangiz va "Tozalash" tugmasini bossangiz, forma ma'lumotlari boshlang'ich qiymatlarga qaytadi.

Input Type Radio

<input type="radio"> radio tugmani belgilaydi.

Radio tugmalar foydalanuvchiga faqat BIR variantni tanlash imkonini beradi:

html

<p>Sevimli web tilingizni tanlang:</p>
<form>
  <input type="radio" id="html" name="sevimli_til" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="sevimli_til" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="sevimli_til" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Input Type Checkbox

<input type="checkbox"> checkboxni belgilaydi.

Checkboxlar foydalanuvchiga bir nechta variantlarni tanlash imkonini beradi.

html

<form>
  <input type="checkbox" id="velosiped" name="velosiped" value="Bike">
  <label for="velosiped"> Menda velosiped bor</label><br>
  <input type="checkbox" id="mashina" name="mashina" value="Car">
  <label for="mashina"> Menda mashina bor</label><br>
  <input type="checkbox" id="qayiq" name="qayiq" value="Boat">
  <label for="qayiq"> Menda qayiq bor</label>
</form>

Input Type Button

<input type="button"> oddiy tugmani belgilaydi:

html

<input type="button" onclick="alert('Salom Dunya!')" value="Bos!">

Input Type Color

<input type="color"> rang tanlash uchun mo'ljallangan input maydonidir.

Brauzerga qarab, rang tanlash oynasi ko'rsatilishi mumkin.

html

<form>
  <label for="sevimli_rang">Sevimli rangingizni tanlang:</label>
  <input type="color" id="sevimli_rang" name="sevimli_rang">
</form>

Input Type Date

<input type="date"> sana kiritish uchun mo'ljallangan input maydonidir.

Brauzerga qarab, sana tanlash oynasi ko'rsatilishi mumkin.

html

<form>
  <label for="tugilgan_kun">Tug'ilgan kun:</label>
  <input type="date" id="tugilgan_kun" name="tugilgan_kun">
</form>

min va max atributlari yordamida sanaga cheklovlar qo'yishingiz mumkin:

html

<form>
  <label for="sanamax">1980-01-01 dan oldingi sanani kiriting:</label>
  <input type="date" id="sanamax" name="sanamax" max="1979-12-31"><br><br>
  <label for="sanamin">2000-01-01 dan keyingi sanani kiriting:</label>
  <input type="date" id="sanamin" name="sanamin" min="2000-01-02">
</form>

Input Type Datetime-local

<input type="datetime-local"> sana va vaqt kiritish uchun mo'ljallangan input maydonidir (vaqt zonasi yo'q).

Brauzerga qarab, sana va vaqt tanlash oynasi ko'rsatilishi mumkin.

html

<form>
  <label for="tugilgan_vaqt">Tug'ilgan kun va vaqt:</label>
  <input type="datetime-local" id="tugilgan_vaqt" name="tugilgan_vaqt">
</form>

Input Type Email

<input type="email"> email manzil kiritish uchun mo'ljallangan input maydonidir.

Brauzerga qarab, email manzil avtomatik tekshirilishi mumkin.

Ba'zi smartfonlar email turini tanib, klaviaturaga ".com" tugmasini qo'shadi.

html

<form>
  <label for="email">Emailingizni kiriting:</label>
  <input type="email" id="email" name="email">
</form>

Input Type Image

<input type="image"> rasmni submit tugmasi sifatida belgilaydi.

Rasm manzili src atributida ko'rsatiladi.

html

<form>
  <input type="image" src="img_submit.gif" alt="Yuborish" width="48" height="48">
</form>

Input Type File

<input type="file"> fayl tanlash va yuklash uchun mo'ljallangan maydon.

html

<form>
  <label for="fayl">Fayl tanlang:</label>
  <input type="file" id="fayl" name="fayl">
</form>

Input Type Hidden

<input type="hidden"> yashirin input maydonini belgilaydi (foydalanuvchiga ko'rinmaydi).

Yashirin maydon orqali foydalanuvchiga ko'rsatilmaydigan ma'lumotlarni yuborish mumkin.

Ko'pincha, forma yuborilganda qaysi ma'lumotlar bazasini yangilash kerakligini saqlash uchun ishlatiladi.

WARNING

Qiymat sahifada ko'rsatilmaydi, lekin har qanday brauzerning ishlab chiquvchi vositalari yoki "View Source" orqali ko'rish va o'zgartirish mumkin. Yashirin inputlarni xavfsizlik uchun ishlatmang!

html

<form>
  <label for="ism">Ismingiz:</label>
  <input type="text" id="ism" name="ism"><br><br>
  <input type="hidden" id="mijozId" name="mijozId" value="3487">
  <input type="submit" value="Yuborish">
</form>

Input Type Month

<input type="month"> foydalanuvchiga oy va yil tanlash imkonini beradi.

Brauzerga qarab, oy tanlash oynasi ko'rsatilishi mumkin.

html

<form>
  <label for="tugilgan_oy">Tug'ilgan oy va yil:</label>
  <input type="month" id="tugilgan_oy" name="tugilgan_oy">
</form>

Input Type Number

<input type="number"> raqamli input maydonini belgilaydi.

Qabul qilinadigan raqamlarga cheklovlar qo'yishingiz mumkin.

Quyidagi misolda 1 dan 5 gacha qiymat kiritish mumkin:

html

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

Input Cheklovlari

Quyida ba'zi keng tarqalgan input cheklovlari keltirilgan:

Atribut	Tavsifi
checked	Sahifa yuklanganda input maydoni tanlangan bo'lishini belgilaydi (checkbox yoki radio uchun)
disabled	Input maydonini o'chiradi
max	Input maydoni uchun maksimal qiymatni belgilaydi
maxlength	Input maydoni uchun maksimal belgilar sonini belgilaydi
min	Input maydoni uchun minimal qiymatni belgilaydi
pattern	Qiymatni tekshirish uchun regular ifoda belgilaydi
readonly	Input maydonini faqat o'qish uchun belgilaydi (o'zgartirib bo'lmaydi)
required	Input maydoni majburiy ekanligini belgilaydi
size	Input maydonining kengligini (belgilar soni) belgilaydi
step	Input maydoni uchun ruxsat etilgan oraliq qiymatlarni belgilaydi
value	Input maydoni uchun standart qiymatni belgilaydi

Input cheklovlari haqida keyingi bobda batafsil o'rganasiz.

Quyidagi misolda 0 dan 100 gacha, 10 qadamda, standart qiymati 30 bo'lgan raqamli input maydoni ko'rsatilgan:

html

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

Input Type Range

<input type="range"> aniq qiymati muhim bo'lmagan raqam kiritish uchun (slayder) mo'ljallangan.

Standart oraliq 0 dan 100 gacha. min, max, va step atributlari yordamida cheklovlar qo'yishingiz mumkin:

html

<form>
  <label for="ovoz">Ovoz (0 dan 50 gacha):</label>
  <input type="range" id="ovoz" name="ovoz" min="0" max="50">
</form>

Input Type Search

<input type="search"> qidiruv maydonlari uchun ishlatiladi (oddiy matn maydoni kabi ishlaydi).

html

<form>
  <label for="google_qidiruv">Google orqali qidiring:</label>
  <input type="search" id="google_qidiruv" name="google_qidiruv">
</form>

Input Type Tel

<input type="tel"> telefon raqami kiritish uchun mo'ljallangan input maydonidir.

html

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

Input Type Time

<input type="time"> foydalanuvchiga vaqt tanlash imkonini beradi (vaqt zonasi yo'q).

Brauzerga qarab, vaqt tanlash oynasi ko'rsatilishi mumkin.

html

<form>
  <label for="uchrashuv_vaqti">Vaqtni tanlang:</label>
  <input type="time" id="uchrashuv_vaqti" name="uchrashuv_vaqti">
</form>

Input Type Url

<input type="url"> URL manzil kiritish uchun mo'ljallangan input maydonidir.

Brauzerga qarab, url avtomatik tekshirilishi mumkin.

Ba'zi smartfonlar url turini tanib, klaviaturaga ".com" tugmasini qo'shadi.

html

<form>
  <label for="homepage">Saytingizni kiriting:</label>
  <input type="url" id="homepage" name="homepage">
</form>

Input Type Week

<input type="week"> foydalanuvchiga hafta va yil tanlash imkonini beradi.

Brauzerga qarab, hafta tanlash oynasi ko'rsatilishi mumkin.

html

<form>
  <label for="hafta">Haftani tanlang:</label>
  <input type="week" id="hafta" name="hafta">
</form>

HTML Input Type Atributi

Teg	Tavsifi
`<input type="">`	Qaysi input turini ko'rsatadi

Keyingi: HTML Forma Atributlari
Oldingi: HTML Forma Elementlari

HTML Input Turlari ​