Ö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:

required boş alanı engeller
pattern metin biçimini denetler
min, max, step sayısal değeri sınırlar
minlength, maxlength karakter sayısını sınırlar
type=email|url|date biçimi kendiliğinden denetler
novalidate ve formnovalidate doğ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>

Sıradaki ders: Proje: İletişim formu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler