Formalar va validatsiya
form, label, input turlari, validatsiya, xato xabarlari, button va a
10-sinfAdvanced UX/UI5-hafta · 14-darsBugun nimalarni o'rganamiz?
Forma tuzilmasi
form, label, input
Input va validatsiya
type va atributlar
Xatolar va tugmalar
UX va semantika
Takrorlash
Boshqa sahifaga o'tkazuvchi element qaysi teg?
a havola: sahifaga o'tish uchun.Forma tuzilmasi
form, label, input
Forma bo'laklari
Label va input
<form action="/qabul" method="post">
<fieldset>
<legend>O'quvchi ma'lumotlari</legend>
<label for="ism">Ism</label>
<input type="text" id="ism" name="ism">
</fieldset>
<button type="submit">Yuborish</button>
</form>
for va id bir xil bo'lishi shart. name esa serverga yuboriladigan maydon nomi.Mini-test
label ning for atributi nimaga teng bo'ladi?
for = id: ular shunday bog'lanadi.Input va validatsiya
type va atributlar
Validatsiya yo'li
Validatsiyali maydonlar
<label for="email">Email</label>
<input type="email" id="email" name="email" required autocomplete="email">
<label for="tel">Telefon</label>
<input type="tel" id="tel" name="tel" pattern="\+998[0-9]{9}" required>
<label for="sinf">Sinf</label>
<input type="number" id="sinf" name="sinf" min="1" max="11">
pattern="\+998[0-9]{9}" +998 va 9 raqamni talab qiladi. Foydalanuvchiga title yoki matn bilan formatni ko'rsating.Mini-test
Majburiy maydon uchun qaysi atribut?
required bo'sh qoldirishga yo'l qo'ymaydi.Xatolar va tugmalar
UX va semantika
Yaxshi xato xabari
Xato xabari
<label for="tel">Telefon</label>
<input type="tel" id="tel" name="tel"
aria-describedby="tel-xato" required>
<p id="tel-xato">Telefon +998 bilan boshlanib, 9 raqam bo'lsin.</p>
<button type="submit">Yuborish</button>
<a href="/qabul">Qabul qoidalari</a>
aria-describedby qiymati xabar elementining id si. button ichidagi type="button" formani yubormaydi.Mini-test
Xato xabarini maydon bilan nima bog'laydi?
aria-describedby xabarning id siga ishora qiladi.Yomon va yaxshi forma
Yomon forma
Faqatplaceholder, label yo'q, xato: «Noto'g'ri», rang bilan ajratilganYaxshi forma
label, to'g'ri type, required, aniq xato xabari va aria-describedbyForma tushunarli bo'lsa, ko'proq odam uni to'ldirib bo'ladi.
Atamalar. Bosing
label
bosingMaydon nomi, for bilan bog'lanadi
fieldset
bosingBog'liq maydonlar guruhi
pattern
bosingMuntazam ifoda bilan tekshiruv
aria-describedby
bosingMaydonga qo'shimcha izoh bog'laydi
Forma yaratish
1. Maydonlar
Qaysi ma'lumot kerakligini aniqlang.
2. Turlar
Har maydonga to'g'ri type va label yozing.
3. Validatsiya
required, pattern va xato xabarini qo'shing.
Input turlari
| Type | Nima uchun | Misol |
|---|---|---|
text | oddiy matn | ism |
email | elektron pochta | [email protected] |
tel | telefon | +998901234567 |
number | son | sinf: 9 |
date | sana | tug'ilgan kun |
Pastga bosing: tekshirish
Formani tekshirish
- Barcha maydonlarni bo'sh qoldirib yuboring.
- Noto'g'ri email va telefon kiriting.
- Faqat klaviatura (Tab, Enter) bilan to'ldiring.
Placeholder dan label ga
<input type="text" placeholder="Ism">
Placeholder dan label ga
<label for="ism">Ism</label>
<input type="text" id="ism" name="ism">
Forma raqamlarda
Brauzer tekshiruvi serverni almashtirmaydi.
Amaliy topshiriq 20 daqiqa
<input type="text" id="ism"> ga label qo'shing, matn bosilganda maydon faollashsin.type va atributlar bilan yozing.submit tugmasi, xato xabarlari.Dars xulosasi
Forma tuzilmasi
form, label + for/id, fieldset.
Validatsiya
type, required, pattern, min/max.
Xato va tugma
Aniq xabar, aria-describedby, button type.
Uyga vazifa: maktab qabul formasi.
Keyingi dars: SEO va meta teglar
title, description, viewport, Open Graph
5-hafta · 15-dars