Html input element turlari va vazifalari

Raqamli kiritish maydonini belgilaydi .
Shuningdek, qanday raqamlar qabul qilinishiga cheklovlar o'rnatishingiz mumkin.
Quyidagi misolda 1 dan 5 gacha qiymat kiritishingiz mumkin bo'lgan raqamli 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>
Aniq qiymati muhim bo'lmagan raqamni kiritish uchun boshqaruvni belgilaydi (slayder boshqaruvi kabi) . minStandart diapazon 0 dan 100 gacha. Biroq, , maxva atributlari bilan qanday raqamlar qabul qilinishiga cheklovlar o'rnatishingiz mumkin step:

Misol

<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>

Qidiruv maydonlari uchun ishlatiladi (qidiruv maydoni odatdagi matn maydoni kabi ishlaydi).

Misol

<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Telefon raqami bo'lishi 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>


Foydalanuvchiga vaqtni tanlash imkonini beradi (vaqt zonasi yo'q) .Brauzer qo'llab-quvvatlashiga qarab, kiritish maydonida vaqt tanlagichi paydo bo'lishi mumkin.

Misol

<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>

URL manzilini o'z ichiga olishi kerak bo'lgan kiritish maydonlari uchun ishlatiladi .Brauzer qo'llab-quvvatlashiga qarab, url maydoni yuborilganda avtomatik ravishda tasdiqlanishi mumkin.Ba'zi smartfonlar url turini taniydi va url kiritishiga mos kelish uchun klaviaturaga ".com" ni qo'shadi.

Misol

<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>

Bu foydalanuvchiga hafta va yilni tanlash imkonini beradi.Brauzer qo'llab-quvvatlashiga qarab, sanani tanlash vositasi kiritish maydonida paydo bo'lishi mumkin.

Misol

<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>



Bootstrap, responsiv veb-dizaynning tashqi ko'rinishini o'zgartirish uchun breakpoints (sinish nuqtalar) deb ataluvchi belgilangan piksel kengliklarni ishlatadi. Ushbu sinish nuqtalar saytning turli ekran kengliklari uchun moslashuvchanligini ta'minlaydi. Bootstrap 4 va 5
versiyalari quyidagi asosiy sinish nuqtalariga ega:

1. 
   xs (extra small) - 0 piksel kenglikdan boshlanadi.
   
2. 
   sm (small) - 576 piksel kenglikdan boshlanadi.
   
3. 
   md (medium) - 768 piksel kenglikdan boshlanadi.
   
4. 
   lg (large) - 992 piksel kenglikdan boshlanadi.
   
5. 
   xl (extra large) - 1200 piksel kenglikdan boshlanadi.
   
6. 
   xxl (Bootstrap 5) - 1400 piksel kenglikdan boshlanadi.
   

Har bir sinish nuqtasi, ekran kengliklari uchun moslashuvchan grid sistemasi, gizmo va konteynerlar, ufl qatorlari, slayderlar va boshqa komponentlar yaratish imkonini beradi.
Pixel ratio (piksel nisbati) esa qurilmalarining ekranining fizikaviy pikseli va logikaviy pikseli (CSS pikseli) orasidagi nisbatdir. Ushbu nisbat, qurilmalar ekranining yuqori aniqlikli ekanligini aniqlashda muhim ahamiyatga ega. Masalan, retina ekranga ega bo'lgan Apple qurilmalari, 2x, 3x yoki undan yuqori piksel nisbatiga ega bo'lishi mumkin.
Piksel nisbati orqali, siz veb-sahifalaringizni yuqori aniqlikli ekranga ega qurilmalar uchun optimallashtirish va uniqlik va o'zaro moslashuvchanlikni yaxshilash mumkin. Ekrandagi narsalarni o'lchash uchun devicePixelRatio nomli JavaScript o'zgaruvchisidan foydalanish mumkin, bu o'zgaruvchi piksel nisbatini saqlaydi. Shuningdek, CSS media so'rovlarida resolution xususiyati orqali pixellar nisbatini aniqlash mumkin.