Özet - Kayıt formu doğrulama
Doğrulama kurallarıyla dolu bir kayıt formu yazarsın.
Özet: Doğrulama yelpazesi
Bu grupta form doğrulamanın tüm araçlarını gördün:
requiredboş alanı engellerpatternmetin biçimini denetlermin,max,stepsayısal değeri sınırlarminlength,maxlengthkarakter sayısını sınırlartype=email|url|datebiçimi kendiliğinden denetlernovalidateveformnovalidatedoğrulamayı kapatır
Şimdi hepsini bir araya getiren bir kayıt formu yazacaksın.
Uygulama Doğrulamalı kayıt formunu yaz
Aşağıdaki kayıt formunu tamamla. İçinde şunlar olsun:
- Kullanıcı adı:
type="text",minlength="3",maxlength="20",required - E-posta:
type="email",required - Yaş:
type="number",min="18",max="120" - Kullanım şartları: bir
type="checkbox",required
Bir gönder butonu ekle. Etiketler opsiyonel.
Örnek çözümü göster
<form action="/kayit" method="post">
<label for="kullanici">Kullanıcı adı</label>
<input type="text" id="kullanici" minlength="3" maxlength="20" required>
<label for="eposta">E-posta</label>
<input type="email" id="eposta" required>
<label for="yas">Yaş</label>
<input type="number" id="yas" min="18" max="120">
<label for="sartlar">Kullanım şartları</label>
<input type="checkbox" id="sartlar" required>
<button type="submit">Kaydol</button>
</form>Kendini test et
-
Bir kullanıcı adının en az 3 karakter olmasını hangisi sağlar?
- min="3"
- minlength="3"
- max="3"
- step="3"
Cevabı göster
minlength="3" — Doğru. minlength="3" bir metin alanında en az 3 karakter ister.
-
Özniteliği göreviyle eşleştir
- required
- Boş bırakmayı engeller
- pattern
- Biçim düzeni
- minlength
- En az karakter
- novalidate
- Doğrulamayı kapatır
-
Zorunlu e-posta alanını tamamla
<input type="email" id="eposta" ____>Cevabı göster
<input type="email" id="eposta" required>