HTML Form Doğrulama (Validations)
eminbasbayan
İçindekiler
Bu yazıda neler var?
Form doğrulamaları (validations), kullanıcıların girdilerinin belirli kurallara uygun olmasını sağlamak için oldukça önemlidir. Bu doğrulamalar, kullanıcı deneyimini geliştirmek ve hatalı veri girişlerini önlemek için kullanılır. HTML, yerleşik doğrulama mekanizmaları sunarak birçok yaygın senaryoyu destekler.
1. Form Validations (Doğrulama) Nedir?
Doğrulama, kullanıcının bir formdaki girdilerinin belirli kurallara uygun olup olmadığını kontrol eder. Bu kurallar şunlar olabilir:
- Zorunlu alanların boş bırakılmaması
- Bir metin alanının belirli bir uzunlukta olması
- Girilen verinin bir e-posta veya URL formatına uygun olması
- Sayısal girişlerin belirli bir aralıkta olması
2. Zorunlu Alanlar (Required Attribute)
Bir alanın doldurulmasını zorunlu hale getirmek için required özelliği kullanılır.
Örnek:
<form action="/submit">
<label for="firstname">Adınız:</label>
<input type="text" id="firstname" name="firstname" required>
<button type="submit">Gönder</button>
</form>Sonuç:
- Kullanıcı bu alanı doldurmadan formu gönderemez.
- Tarayıcı, doldurulmadığında bir uyarı gösterir.
3. Min ve Max Uzunluk (Minlength ve Maxlength)
Metin girişlerinin uzunluğunu sınırlamak için minlength ve maxlength özellikleri kullanılır.
Örnek:
<label for="username">Kullanıcı Adı:</label>
<input type="text" id="username" name="username" minlength="5" maxlength="15" required>Sonuç:
- Kullanıcı adı en az 5, en fazla 15 karakter olmalıdır.
- Girilen değer kurallara uymuyorsa tarayıcı bir hata mesajı gösterir.
4. Sayısal Değerler (Min ve Max)
Sayısal girişlerin belirli bir aralıkta olmasını sağlamak için min ve max özellikleri kullanılır.
Örnek:
<label for="age">Yaşınız:</label>
<input type="number" id="age" name="age" min="18" max="99" required>Sonuç:
- Kullanıcı yalnızca 18 ile 99 arasında bir sayı girebilir.
5. Desen Eşleştirme (Pattern Attribute)
Girdilerin belirli bir düzene uygun olmasını sağlamak için pattern özelliği kullanılır. Bu düzenler, regEx (regular expressions) kullanılarak tanımlanır.
Örnek:
<label for="password">Şifre:</label>
<input type="password" id="password" name="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
<small>Şifre en az 8 karakter, bir büyük harf, bir küçük harf
ve bir rakam içermelidir.</small>Sonuç:
- Kullanıcının şifresi belirtilen kurallara uygun değilse form gönderilemez.
6. Özel Giriş Türleri (Special Input Types)
Bazı giriş türleri, kendiliğinden doğrulama özelliklerine sahiptir.
E-posta:
<label for="email">E-posta:</label>
<input type="email" id="email" name="email" required>- Kullanıcı geçerli bir e-posta formatı girmelidir (örneğin,
example@domain.com).
URL:
<label for="website">Web Sitesi:</label>
<input type="url" id="website" name="website" required>- Girdinin geçerli bir URL formatında olması gerekir (
http://veyahttps://ile başlamalıdır).
7. Çok Satırlı Metin Alanları (Text Area)
Birden fazla satırlı metin girişleri için textarea kullanılır. Placeholder ve zorunlu alan gibi özellikler de eklenebilir.
Örnek:
<label for="comments">Yorumlar:</label>
<textarea id="comments" name="comments" rows="4" cols="50"
placeholder="Yorumunuzu buraya yazınız..." required></textarea>8. Önemli Notlar
- Tarayıcı Desteği:
- HTML doğrulama özellikleri modern tarayıcılar tarafından geniş ölçüde desteklenir.
- Ancak, bazı eski tarayıcılarda destek eksik olabilir.
- Erişilebilirlik:
- Tüm form elemanları için etiketler (
<label>) kullanılmalıdır. - Bu, ekran okuyucuların formu doğru bir şekilde yorumlamasına yardımcı olur.
- Tüm form elemanları için etiketler (
- İstemci ve Sunucu Taraflı Doğrulama:
- HTML doğrulamaları istemci tarafında gerçekleşir. Ancak, güvenlik açısından sunucu taraflı doğrulama da yapılmalıdır.
Sonuç
HTML formları, kullanıcı girdilerini kontrol etmek için güçlü yerleşik doğrulama mekanizmalarına sahiptir. required, minlength, pattern gibi özellikler sayesinde, kullanıcıların doğru formatta veri girmesi sağlanabilir. İlerleyen aşamalarda, JavaScript ile doğrulama işlemleri daha dinamik ve kullanıcı dostu hale getirilebilir.
