HTML input turlari
Bu bob HTML <input> elementining turli turlarini tavsiflaydi.
HTML input turlari
HTML’da ishlatishingiz mumkin bo‘lgan turli input turlari:
<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">
Maslahat: type atributining standart qiymati — "text".
Input turi — text
<input type="text"> bir qatorli matn kiritish maydonini aniqlaydi:
Misol
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
O‘zingiz sinab ko‘ring »
Yuqoridagi HTML kodi brauzerda quyidagicha ko‘rsatiladi:
First name:Last name:
Input turi — password
<input type="password"> parol maydonini aniqlaydi:
Misol
<form>
<label for="username">Username:</label><br>
<input type="text"
id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
O‘zingiz sinab ko‘ring »
Yuqoridagi HTML kodi brauzerda quyidagicha ko‘rsatiladi:
Username:Password:
Parol maydonidagi belgilar yashiriladi (yulduzchalar yoki doiralar ko‘rinishida ko‘rsatiladi).
Input turi — submit
<input type="submit"> forma ma’lumotlarini forma qayta ishlovchisiga (form-handler) yuborish uchun tugma aniqlaydi.
Forma qayta ishlovchisi odatda kiritilgan ma’lumotlarni qayta ishlash uchun skriptli server sahifasidir.
Forma qayta ishlovchisi formaning action atributida belgilanadi:
Misol
<form action="/action_page.php">
<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"><br><br>
<input type="submit" value="Submit">
</form>
O‘zingiz sinab ko‘ring »
Yuqoridagi HTML kodi brauzerda quyidagicha ko‘rsatiladi:
Agar yuborish tugmasining value atributini tashlab yuborsangiz, tugmada standart matn paydo bo‘ladi:
Misol
<form action="/action_page.php">
<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"><br><br>
<input type="submit">
</form>
O‘zingiz sinab ko‘ring »
Input turi — reset
<input type="reset"> barcha forma qiymatlarini standart qiymatlariga qaytaradigan qayta tiklash (reset) tugmasini aniqlaydi:
Misol
<form action="/action_page.php">
<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"><br><br>
<input type="submit" value="Submit">
<input type="reset"
value="Reset">
</form>
O‘zingiz sinab ko‘ring »
Yuqoridagi HTML kodi brauzerda quyidagicha ko‘rsatiladi:
Agar kiritilgan qiymatlarni o‘zgartirsangiz va so‘ngra "Qayta tiklash" (Reset) tugmasini bossangiz, forma ma’lumotlari standart qiymatlarga qaytariladi.
Input turi — radio
<input type="radio"> radio tugmasini aniqlaydi.
Radio tugmalari foydalanuvchiga cheklangan sonli variantlardan FAQAT BITTASINI tanlash imkonini beradi:
Misol
<p>Choose your favorite Web language:</p>
<form>
<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>
</form>
O‘zingiz sinab ko‘ring »
Yuqoridagi HTML kodi brauzerda quyidagicha ko‘rsatiladi:
Input turi — checkbox
<input type="checkbox"> belgilash katakchasini (checkbox) aniqlaydi.
Belgilash katakchalari foydalanuvchiga cheklangan sonli variantlardan NOL yoki UNDAN KO‘PROQ variantni tanlash imkonini beradi.
Misol
<form>
<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>
</form>
O‘zingiz sinab ko‘ring »
Yuqoridagi HTML kodi brauzerda quyidagicha ko‘rsatiladi:
Input turi — button
<input type="button"> tugma aniqlaydi:
Misol
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
O‘zingiz sinab ko‘ring »
Yuqoridagi HTML kodi brauzerda quyidagicha ko‘rsatiladi:
Input turi — color
<input type="color"> rangni o‘z ichiga olishi kerak bo‘lgan kiritish maydonlari uchun ishlatiladi.
Brauzer qo‘llab-quvvatlashiga qarab, kiritish maydonida rang tanlash vositasi ko‘rsatilishi mumkin.
Misol
<form>
<label for="favcolor">Select your favorite
color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
O‘zingiz sinab ko‘ring »
Input turi — date
<input type="date"> sanani o‘z ichiga olishi kerak bo‘lgan kiritish maydonlari uchun ishlatiladi.
Brauzer qo‘llab-quvvatlashiga qarab, kiritish maydonida sana tanlash vositasi ko‘rsatilishi mumkin.
Misol
<form>
<label for="birthday">Birthday:</label>
<input
type="date" id="birthday" name="birthday">
</form>
O‘zingiz sinab ko‘ring »
Sanalarga cheklovlar qo‘shish uchun min va max atributlaridan ham foydalanishingiz mumkin:
Misol
<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">
</form>
O‘zingiz sinab ko‘ring »
Input turi — datetime-local
<input type="datetime-local"> vaqt mintaqasisiz sana va vaqt kiritish maydonini belgilaydi.
Brauzer qo‘llab-quvvatlashiga qarab, kiritish maydonida sana tanlash vositasi ko‘rsatilishi mumkin.
Misol
<form>
<label for="birthdaytime">Birthday (date and
time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
O‘zingiz sinab ko‘ring »
Input turi — email
<input type="email"> — e-mail manzil kiritiladigan maydonlar uchun ishlatiladi.
Brauzer qo‘llab-quvvatlashiga qarab, e-mail manzil yuborilganda avtomatik tekshirilishi mumkin.
Ba’zi smartfonlar email turini tanib, e-mail kiritishga moslash uchun klaviaturaga ".com" tugmasini qo‘shadi.
Misol
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
O‘zingiz sinab ko‘ring »
Input turi — image
<input type="image">
rasmni yuborish tugmasi sifatida aniqlaydi.
Rasmga yo‘l src atributida belgilanadi.
Misol
<form>
<input type="image" src="img_submit.gif" alt="Submit"
width="48" height="48">
</form>
O‘zingiz sinab ko‘ring »
Input turi — file
<input type="file">
fayl tanlash maydonini va fayl yuklash uchun "Ko‘rish" (Browse) tugmasini aniqlaydi.
Misol
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
O‘zingiz sinab ko‘ring »
Input turi — hidden
<input type="hidden">
yashirin kiritish maydonini (foydalanuvchiga ko‘rinmaydigan) aniqlaydi.
Yashirin maydon veb-dasturchilarga forma yuborilganda foydalanuvchilar ko‘ra olmaydigan yoki o‘zgartira olmaydigan ma’lumotlarni kiritish imkonini beradi.
Yashirin maydon ko‘pincha forma yuborilganda qaysi ma’lumotlar bazasi yozuvining yangilanishi kerakligini saqlaydi.
Eslatma: qiymat sahifa kontentida foydalanuvchiga ko‘rsatilmasa ham, uni istalgan brauzerning dasturchi vositalari yoki "View Source" funksiyasi yordamida ko‘rish (va tahrirlash) mumkin. Yashirin kiritish maydonlarini xavfsizlik vositasi sifatida ishlatmang!
Misol
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input
type="hidden" id="custId" name="custId" value="3487">
<input
type="submit" value="Submit">
</form>
O‘zingiz sinab ko‘ring »
Input turi — month
<input type="month"> foydalanuvchiga oy va yilni tanlash imkonini beradi.
Brauzer qo‘llab-quvvatlashiga qarab, kiritish maydonida sana tanlash vositasi ko‘rsatilishi mumkin.
Misol
<form>
<label for="bdaymonth">Birthday (month and
year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
O‘zingiz sinab ko‘ring »
Input turi — number
<input type="number"> sonli kiritish maydonini aniqlaydi.
Qaysi sonlar qabul qilinishiga cheklovlar ham belgilashingiz mumkin.
Quyidagi misolda 1 dan 5 gacha qiymat kiritish mumkin bo‘lgan sonli kiritish maydoni ko‘rsatilgan:
Misol
<form>
<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 »
Input cheklovlari
Mana ba’zi keng tarqalgan input cheklovlari ro‘yxati:
| Atribut | Tavsif |
|---|---|
| checked | Sahifa yuklanganda kiritish maydonini oldindan tanlash kerakligini bildiradi (type="checkbox" yoki type="radio" uchun) |
| disabled | Kiritish maydoni faolsizlantirilgan bo‘lishi kerakligini belgilaydi |
| max | Kiritish maydoni uchun maksimal qiymatni belgilaydi |
| maxlength | Kiritish maydoni uchun maksimal belgilar sonini belgilaydi |
| min | Kiritish maydoni uchun minimal qiymatni belgilaydi |
| pattern | Kiritilgan qiymatni tekshirish uchun muntazam ifodani (regular expression) belgilaydi |
| readonly | Kiritish maydoni faqat o‘qish uchun ekanligini (o‘zgartirib bo‘lmasligini) belgilaydi |
| required | Kiritish maydoni majburiy ekanligini (to‘ldirilishi shartligini) belgilaydi |
| size | Kiritish maydonining kengligini (belgilar sonida) belgilaydi |
| step | Kiritish maydoni uchun ruxsat etilgan sonlar orasidagi intervalni belgilaydi |
| value | Kiritish maydoni uchun standart qiymatni belgilaydi |
Input cheklovlari haqida keyingi bobda ko‘proq bilib olasiz.
Quyidagi misolda 0 dan 100 gacha, 10 qadam bilan qiymat kiritish mumkin bo‘lgan sonli kiritish maydoni ko‘rsatilgan. Standart qiymat 30:
Misol
<form>
<label for="quantity">Quantity:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form>
O‘zingiz sinab ko‘ring »
Input turi — range
<input type="range"> aniq qiymati muhim bo‘lmagan sonni kiritish uchun boshqaruv elementini aniqlaydi (slayder boshqaruv elementi singari). Standart oraliq 0 dan 100 gacha. Biroq, min, max va step atributlari bilan qaysi sonlar qabul qilinishiga cheklovlar belgilashingiz mumkin:
Misol
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
O‘zingiz sinab ko‘ring »
Input turi — search
<input type="search"> qidiruv maydonlari uchun ishlatiladi (qidiruv maydoni oddiy matn maydoni singari ishlaydi).
Misol
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
O‘zingiz sinab ko‘ring »
Input turi — tel
<input type="tel"> telefon raqamini o‘z ichiga olishi kerak bo‘lgan kiritish maydonlari uchun ishlatiladi.
Misol
<form>
<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}">
</form>
O‘zingiz sinab ko‘ring »
Input turi — time
<input type="time"> foydalanuvchiga vaqtni tanlash imkonini beradi (vaqt mintaqasisiz).
Brauzer qo‘llab-quvvatlashiga qarab, kiritish maydonida vaqt tanlash vositasi ko‘rsatilishi mumkin.
Misol
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
O‘zingiz sinab ko‘ring »
Input turi — url
<input type="url"> URL manzilni o‘z ichiga olishi kerak bo‘lgan kiritish maydonlari uchun ishlatiladi.
Brauzer qo‘llab-quvvatlashiga qarab, url maydoni yuborilganda avtomatik tekshirilishi mumkin.
Ba’zi smartfonlar url turini tanib olib, url kiritishga moslashish uchun klaviaturaga ".com" ni qo‘shadi.
Misol
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
O‘zingiz sinab ko‘ring »
Input turi — week
<input type="week"> foydalanuvchiga hafta va yilni tanlash imkonini beradi.
Brauzer qo‘llab-quvvatlashiga qarab, kiritish maydonida sana tanlash vositasi ko‘rsatilishi mumkin.
Misol
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
O‘zingiz sinab ko‘ring »
HTML input type atributi
| Teg | Tavsif |
|---|---|
| <input type=""> | Ko‘rsatiladigan input turini belgilaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!