type
HTML <input> type atributi
Misol
Ikkita kiritish maydoniga ega HTML forma: bitta matn maydoni va bitta yuborish tugmasi:
<form action="/action_page.php">
<label for="username">Username: </label>
<input type="text" id="username" name="username"><br>
<input type="submit" value="Submit">
</form>
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
type atributi ko‘rsatiladigan
<input> elementining turini belgilaydi.
Agar type atributi ko‘rsatilmagan bo‘lsa, standart tur "text" bo‘ladi.
Brauzerlarda qo‘llab-quvvatlash
| Atribut | |||||
|---|---|---|---|---|---|
| type | Ha | Ha | Ha | Ha | Ha |
Sintaksis
<input type="value">
Atribut qiymatlari
| Qiymat | Tavsif |
|---|---|
| button | Bosiladigan tugmani belgilaydi (asosan skriptni ishga tushirish uchun JavaScript bilan ishlatiladi) |
| checkbox | Belgi qo‘yiladigan katakchani (checkbox) belgilaydi |
| color | Rang tanlagichni belgilaydi |
| date | Sana boshqaruv elementini belgilaydi (yil, oy, kun (vaqtsiz)) |
| datetime-local | Sana va vaqt boshqaruv elementini belgilaydi (yil, oy, kun, vaqt (vaqt mintaqasisiz) |
| Elektron pochta manzili uchun maydonni belgilaydi | |
| file | Fayl tanlash maydoni va "Browse" tugmasini belgilaydi (fayllarni yuklash uchun) |
| hidden | Yashirin kiritish maydonini belgilaydi |
| image | Rasmni yuborish tugmasi sifatida belgilaydi |
| month | Oy va yil boshqaruv elementini belgilaydi (vaqt mintaqasisiz) |
| number | Son kiritish uchun maydonni belgilaydi |
| password | Parol maydonini belgilaydi |
| radio | Radio tugmani belgilaydi |
| range | Diapazon boshqaruv elementini belgilaydi (slayder kabi) |
| reset | Tiklash (reset) tugmasini belgilaydi |
| search | Qidiruv matnini kiritish uchun matn maydonini belgilaydi |
| submit | Yuborish (submit) tugmasini belgilaydi |
| tel | Telefon raqamini kiritish uchun maydonni belgilaydi |
| text | Standart. Bir qatorli matn maydonini belgilaydi |
| time | Vaqt kiritish uchun boshqaruv elementini belgilaydi (vaqt mintaqasisiz) |
| url | URL kiritish uchun maydonni belgilaydi |
| week | Hafta va yil boshqaruv elementini belgilaydi (vaqt mintaqasisiz) |
Ko‘proq misollar
Input turi: button
Bosilganda JavaScript kodini ishga tushiradigan tugma:
<input type="button" value="Click me" onclick="msg()">
O‘zingiz sinab ko‘ring »
Input turi: checkbox
Checkbox’lar foydalanuvchiga cheklangan miqdordagi variantlardan bir yoki bir nechtasini tanlash imkonini beradi:
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
O‘zingiz sinab ko‘ring »
Input turi: color
Rang tanlagichdan rang tanlang:
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
O‘zingiz sinab ko‘ring »
Input turi: date
Sana boshqaruv elementini belgilang:
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
O‘zingiz sinab ko‘ring »
Input turi: datetime-local
Sana va vaqt boshqaruv elementini belgilang (vaqt mintaqasisiz):
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
O‘zingiz sinab ko‘ring »
Input turi: email
Elektron pochta manzili uchun maydonni belgilang (yuborilganda avtomatik tekshiriladi):
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
O‘zingiz sinab ko‘ring »
Input turi: file
Fayl tanlash maydoni va "Browse..." tugmasini belgilang (fayllarni yuklash uchun):
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
O‘zingiz sinab ko‘ring »
Input turi: hidden
Yashirin maydonni belgilang (foydalanuvchiga ko‘rinmaydi).
Yashirin maydonda ko‘pincha forma yuborilganda ma’lumotlar bazasidagi qaysi yozuvni yangilash kerakligi saqlanadi:
<input type="hidden" id="custId" name="custId" value="3487">
O‘zingiz sinab ko‘ring »
Input turi: image
Rasmni yuborish tugmasi sifatida belgilang:
<input type="image" src="img_submit.gif" alt="Submit">
O‘zingiz sinab ko‘ring »
Input turi: month
Oy va yil boshqaruv elementini belgilang (vaqt mintaqasisiz):
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
O‘zingiz sinab ko‘ring »
Input turi: number
Son kiritish uchun maydonni belgilang (qaysi sonlar qabul qilinishiga cheklovlar ham qo‘yishingiz mumkin):
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
O‘zingiz sinab ko‘ring »
Cheklovlarni belgilash uchun quyidagi atributlardan foydalaning:
- max - ruxsat etilgan maksimal qiymatni belgilaydi
- min - ruxsat etilgan minimal qiymatni belgilaydi
- step - ruxsat etilgan sonlar orasidagi intervalni belgilaydi
- value - standart qiymatni belgilaydi
Input turi: password
Parol maydonini belgilang (belgilar yashiriladi):
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">
O‘zingiz sinab ko‘ring »
Input turi: radio
Radio tugmalar foydalanuvchiga cheklangan miqdordagi variantlardan faqat bittasini tanlash imkonini beradi:
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
O‘zingiz sinab ko‘ring »
Input turi: range
Aniq qiymati muhim bo‘lmagan sonni kiritish uchun boshqaruv elementini belgilang (slayder kabi). Standart diapazon 0 dan 100 gacha. Biroq min, max va step atributlari yordamida qaysi sonlar qabul qilinishiga cheklovlar qo‘yishingiz mumkin:
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
O‘zingiz sinab ko‘ring »
Cheklovlarni belgilash uchun quyidagi atributlardan foydalaning:
- max - ruxsat etilgan maksimal qiymatni belgilaydi
- min - ruxsat etilgan minimal qiymatni belgilaydi
- step - ruxsat etilgan sonlar orasidagi intervalni belgilaydi
- value - standart qiymatni belgilaydi
Input turi: reset
Tiklash tugmasini belgilang (formaning barcha qiymatlarini standart qiymatlarga qaytaradi):
<input type="reset">
O‘zingiz sinab ko‘ring »
Maslahat: Tiklash tugmasidan ehtiyotkorlik bilan foydalaning! U tiklash tugmasini tasodifan bosib yuborgan foydalanuvchilarning g‘ashiga tegishi mumkin.
Input turi: search
Qidiruv maydonini belgilang (sayt bo‘yicha qidiruv yoki Google qidiruvi kabi):
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
O‘zingiz sinab ko‘ring »
Input turi: submit
Input turi: tel
Telefon raqamini kiritish uchun maydonni belgilang:
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
O‘zingiz sinab ko‘ring »
Input turi: text
Foydalanuvchi matn kiritishi mumkin bo‘lgan ikkita bir qatorli matn maydonini belgilang:
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br>
O‘zingiz sinab ko‘ring »
Input turi: time
Vaqt kiritish uchun boshqaruv elementini belgilang (vaqt mintaqasisiz):
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
O‘zingiz sinab ko‘ring »
Input turi: url
URL kiritish uchun maydonni belgilang:
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
O‘zingiz sinab ko‘ring »
Maslahat: iPhone’dagi Safari url kiritish turini taniydi va ekran klaviaturasini unga moslab o‘zgartiradi (.com variantini qo‘shadi).
Input turi: week
Hafta va yil boshqaruv elementini belgilang (vaqt mintaqasisiz):
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
O‘zingiz sinab ko‘ring »
❮ HTML <input> tegi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!