Anasayfa
Forum
Hakkında
Ders 10: Form Alanları ve Doğrulama
Ders 10: Form Alanları ve Doğrulama
Neden? Doğru alan türleri, kullanıcı hatalarını azaltır ve veri girişini kolaylaştırır.
Ne öğreneceğiz?
Bu derste Input türlerini, select, textarea ve doğrulama özniteliklerini öğreneceğiz.
Nasıl ilerleyeceğiz?
Önce kavramın amacını düşünün. Ardından aşağıda verilen örneği kendiniz yazın. Kodu kaydedin, tarayıcıda açın ve küçük bir değişiklik yaparak sonucu gözlemleyin.
Öğrenme kuralı: Kodu yalnızca kopyalama. Her satır için “Bu satır neden burada?” ve “Bu satırı silersem ne değişir?” sorularını sor.
Derse başlamadan önce kendini yokla
- Bu konuyu gerçek bir web sayfasında hangi ihtiyacı çözmek için kullanırım?
- Örnekteki hangi HTML elementi içeriğin anlamını taşıyor?
- Uygulamayı kendi fikrimle nasıl değiştirebilirim?
Ders sonunda kontrol
- Kodu kendim, bakmadan tekrar yazabildim mi?
- Tarayıcıda sonucu test ettim mi?
- Karşılaştığım bir hatayı neden oluştuğunu açıklayarak düzelttim mi?
Ders hedefi
Farklı form alanlarını ve tarayıcı tarafından yapılan temel doğrulamayı kullanabileceksiniz. Sık kullanılan input türleri şunlardır:
PHP Kod:
<input type="text" name="kullanici-adi">
<input type="email" name="eposta">
<input type="password" name="sifre">
<input type="number" name="yas" min="13" max="100">
<input type="date" name="dogum-tarihi">
<input type="checkbox" name="sozlesme">
<input type="radio" name="cinsiyet" value="kadin">
<input type="file" name="dosya">
Bir alanın doldurulmasını zorunlu yapmak için required kullanılır. Karakter sayısı minlength ve maxlength ile, metin biçimi ise pattern ile sınırlanabilir:
PHP Kod:
<input
type="text"
id="kullanici-adi"
name="kullanici-adi"
minlength="3"
maxlength="20"
required
>
Seçim listesi için <select>, seçenekler için <option> kullanılır:
PHP Kod:
<label for="sehir">Şehir:</label>
<select id="sehir" name="sehir" required>
<option value="">Seçiniz</option>
<option value="istanbul">İstanbul</option>
<option value="ankara">Ankara</option>
<option value="izmir">İzmir</option>
</select>
Uzun metinler için <textarea> uygundur:
PHP Kod:
<label for="mesaj">Mesajınız:</label>
<textarea id="mesaj" name="mesaj" rows="5" required></textarea>
İlgili alanları <fieldset> ve <legend> ile gruplayabilirsiniz:
PHP Kod:
<fieldset>
<legend>İletişim bilgileri</legend>
<!-- Alanlar -->
</fieldset>
