HTML First imkoniyatlari
HTMLda kichik JavaScript yechimlari o‘rnini bosadigan ko‘plab o‘rnatilgan funksiyalar mavjud.
Mahalliy (native) HTML’dan foydalanish sahifalarni soddaroq, tezroq va tushunarliroq qiladi.
HTML-ni birinchi ishlab chiqishda siz doimo so‘rashingiz kerak: Brauzer buni allaqachon qila oladimi?
details elementi
<details> elementi foydalanuvchilar ochishi va yopishi mumkin bo‘lgan tarkibni yaratadi.
Ko‘rinadigan sarlavha <summary> elementi bilan yoziladi.
Misol
<details>
<summary>More information</summary>
<p>This text is hidden until the user opens it.</p>
</details>
O‘zingiz sinab ko‘ring »
Bu hech qanday JavaScript’siz ishlaydi.
HTML formasini tekshirish (validatsiya)
HTML forma yuborilishidan oldin forma maydonlarini tekshirishi (validatsiya qilishi) mumkin.
Siz required , minlength , maxlength va pattern kabi atributlardan foydalanishingiz mumkin.
Misol
<form action="/register" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required minlength="3">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Register</button>
</form>
O‘zingiz sinab ko‘ring »
Brauzer maydonlarni avtomatik tekshiradi.
Kiritish maydoni turlari
HTML keng tarqalgan ma’lumotlar uchun input tiplarini o‘z ichiga oladi.
Ushbu kiritish turlari mobil qurilmalarda yaxshiroq klaviaturalarni ko‘rsatishi va o‘rnatilgan tekshirishni ta’minlashi mumkin.
type="email"type="number"type="date"type="url"type="search"
Misol
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
O‘zingiz sinab ko‘ring »
datalist elementi
<datalist> elementi foydalanuvchilarga tavsiya etilgan qiymatlar ro‘yxatini taqdim etadi.
Foydalanuvchi taklifni tanlashi yoki boshqa qiymat kiritishi mumkin.
Misol
<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
O‘zingiz sinab ko‘ring »
dialog elementi
<dialog> elementi dialog oynalari va qalqib chiquvchi oynalar uchun ishlatilishi mumkin.
Muloqot oynalarini ochish va yopish odatda kichik hajmdagi JavaScript-ni talab qiladi, ammo dialog harakati brauzerda o‘rnatilgan.
Rasmlarni kechiktirib yuklash (lazy loading)
Rasmlarni loading atributi yordamida kechiktirib yuklash (lazy loading) mumkin.
Bu rasmlarni faqat kerak bo‘lganda yuklash orqali ishlashni yaxshilashi mumkin.
Zamonaviy brauzerlar loading="lazy" ni qo‘llab-quvvatlaydi
<img> va <iframe> elementlari uchun atribut.
Bu brauzerga resursni yuklashni foydalanuvchi unga yaqinlashmaguncha kechiktirishni aytadi.
Misol
<!-- The browser handles the timing here -->
<img src="image.jpg" alt="A mountain" loading="lazy">
O‘zingiz sinab ko‘ring »
Avval mahalliy HTML dan foydalaning. Mahalliy HTML muammoni hal qila olmasagina JavaScript-ni qo‘shing.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!