Html Ders 7 – Formlar

Formlar, web sitelerinde kullanıcı verilerinin toplamasını sağlayan temel araçlardır. Kullanıcıların bilgi girmesini, seçenekler sunulmasını ve geri bildirim alınmasını mümkün kılarlar.

Temel Form Yapısı:

Form oluşturmak için <form> etiketi kullanılır. Bu etiket, formun içeriğini kapsar ve verilerin gönderileceği hedef URL’yi belirtir.

<form action=”işleme_dosyası.php” method=”POST”>

action Özelliği: Form verilerinin gönderildiği sunucu tarafındaki dosyanın (örneğin, PHP dosyası) adresini belirtir.

method Özelliği: Verilerin sunucuya nasıl gönderileceğini belirler. İki yaygın yöntem vardır:

  • POST: Veriler, HTTP isteğinin gövdesinde gönderilir. Daha büyük miktarda veri göndermek için uygundur ve genellikle hassas bilgileri (şifreler gibi) göndermek için kullanılır.
  • GET: Veriler, URL’nin bir parçası olarak gönderilir. Daha küçük miktarda veri göndermek için uygundur ve URL’de görülebilir.

Form Giriş Türleri:

Form içinde kullanıcıdan bilgi almak için çeşitli giriş türleri kullanılır:

  • <input type=”text”>: Tek satırlı metin girişi için kullanılır (örneğin, ad, soyad).
  • <input type=”password”>: Şifre girişi için kullanılır. Girilen karakterler gizlenir.
  • <input type=”email”>: E-posta adresi girişi için kullanılır. Tarayıcılar genellikle e-posta formatını doğrular.
  • <input type=”number”>: Sayısal veri girişi için kullanılır.
  • <input type=”date”>: Tarih seçimi için kullanılır.
  • <input type=”radio”>: Birden fazla seçenek arasından sadece birini seçmek için kullanılır. Aynı name özelliğine sahip radyo butonları birlikte çalışır.
  • <input type=”checkbox”>: Birden fazla seçenekten birkaçını veya tamamını seçmek için kullanılır.
  • <textarea>: Çok satırlı metin girişi için kullanılır (örneğin, yorumlar, açıklamalar).
  • <select>: Açılır menü oluşturmak için kullanılır.
    • <option> etiketi her bir seçenek öğesini tanımlar.

Form Alanlarını Biçimlendirme ve Doğrulama:

  • placeholder Özelliği: Giriş alanının içindeki geçici metindir. Kullanıcı girişi yapana kadar görünür ve kullanıcılara örnek veya ipucu sağlar. Örnek: <input type=”text” placeholder=”Adınız”>
  • required Özelliği: Giriş alanının doldurulması gerektiğini belirtir. Tarayıcılar genellikle bu alanı boş bırakılırsa bir hata mesajı gösterir. Örnek: <input type=”email” required>
  • pattern Özelliği: Giriş alanına uygulanacak düzenli ifade (regular expression) kalıbını belirtir. Kullanıcı girişi, bu kalıba uymalıdır. Örnek: <input type=”tel” pattern=”\d{10}” placeholder=”Telefon Numarası”> (10 haneli bir telefon numarası gerektirir).
  • value Özelliği: Giriş alanının varsayılan değerini belirtir.

Form Gönderme Butonları:

<input type=”submit”>: Formu göndermek için kullanılır. Genellikle “Gönder” veya “Kaydet” gibi bir metin içerir.

<button type=”submit”>Gönder</button>: submit tipi bir buton da form gönderimi yapar. Daha özelleştirilebilir.

Etiketler ve Erişilebilirlik:

Her giriş alanına <label> etiketi ekleyin. Bu, ekran okuyucuların kullanıcıya hangi bilgiyi girmesi gerektiğini söylemesine yardımcı olur. Örnek: <label for=”ad”>Ad:</label> <input type=”text” id=”ad” name=”ad”>

Sunucu Tarafı İşleme:

Form verileri sunucuya gönderildikten sonra, bu verileri işlemek için bir sunucu tarafı betik (örneğin, PHP, Python) kullanmanız gerekir. Bu betik, verileri doğrulayabilir, veri tabanına kaydedebilir veya başka işlemler gerçekleştirebilir.

Örnek:

HTML
<form action="islem.php" method="POST">
  <label for="ad">Ad:</label>
  <input type="text" id="ad" name="ad"><br><br>

  <label for="email">E-posta:</label>
  <input type="email" id="email" name="email" required placeholder="example@domain.com"><br><br>

  <label for="mesaj">Mesajınız:</label><br>
  <textarea id="mesaj" name="mesaj"></textarea><br><br>

  <input type="submit" value="Gönder">
</form>

Kaynak: https://developer.mozilla.org/en-US/docs/Web/HTML

Etiketler