Ders 6 – Formlara Giriş

1. Neleri Öğreneceksin?

• <form> etiketinin ne işe yaradığını,
• <label> ve <input> ile kullanıcıdan bilgi almayı,
• Metin kutusu: <textarea>
• Açılır liste: <select> ve <option>
• Bir formu göndermek için <button> kullanmayı öğreneceksin.

2. Formun Temeli: <form>

Formlar, kullanıcıdan veri almak için kullanılır. Tüm giriş alanları <form> etiketinin içine yazılır.

<form>
  Form içeriği buraya yazılır.
</form>

3. Etiket ve Metin Girişi: <label> ve <input>

Kullanıcıdan kısa bilgi almak için <input> etiketi kullanılır. Her giriş alanının bir açıklaması olur, bu açıklama için <label> kullanılır.

<form>
  <label>Adınız:</label>
  <input type="text">
</form>

type özelliği, giriş kutusunun türünü belirler:

• text – normal metin
• email – e-posta doğrulamalı alan
• number – sadece sayı
• password – şifre gizleme

4. Uzun Metinler: <textarea>

Kullanıcıdan uzun metin almak için kullanılır.

<textarea rows="4" cols="40"></textarea>

5. Açılır Liste: <select>

Kullanıcıya birden fazla seçenek vermek istiyorsan açılır liste kullanırsın.

<select>
  <option>Erkek</option>
  <option>Kadın</option>
  <option>Belirtmek İstemiyorum</option>
</select>

6. Butonlar: Formu Göndermek

Bir formun gönderilmesi için en yaygın yöntem bir <button> eklemektir.

<button type="submit">Gönder</button>

7. Mini Görev – Basit Kayıt Formu

Şimdi kendi formunu oluşturarak pratik yapma zamanı! Aşağıdaki adımları uygula:

1. Proje klasörüne kayit-formu.html adında yeni bir dosya oluştur.
2. Sayfaya bir <h1> ekle: “Kayıt Formu”.
3. İçine şu alanları ekle:
   • Ad – input:text
   • Soyad – input:text
   • E-posta – input:email
   • Hakkında – textarea
   • Cinsiyet – select
4. Formun en altına bir Gönder butonu ekle.
5. Kaydedip tarayıcıda görüntüle.

Bir sonraki derste Semantic HTML ile daha düzenli sayfa yapısı kurmayı öğreneceğiz.