1. Input Etiketi

<input> etiketi, kullanıcıdan veri almak için kullanılan temel HTML form elemanıdır. Bir form içinde kullanılabilir ve farklı veri türlerine uygun çeşitli type özellikleri ile kullanılarak özelleştirilebilir. Örneğin, kullanıcıdan metin, sayı, tarih veya dosya almak için kullanılabilir.

<form>
  <label for="name">Adınız:</label>
  <input type="text" id="name" name="name" placeholder="Adınızı girin" required>
  
  <label for="age">Yaşınız:</label>
  <input type="number" id="age" name="age" min="1" max="100" required>
  
  <label for="email">E-posta:</label>
  <input type="email" id="email" name="email" placeholder="ornek@domain.com" required>
  
  <label for="password">Şifre:</label>
  <input type="password" id="password" name="password" required>
  
  <label for="file">Dosya Yükle:</label>
  <input type="file" id="file" name="file" accept=".jpg, .jpeg, .png">
</form>

• type="text": Kullanıcıdan metin almak için kullanılır.
• type="number": Yalnızca sayısal veri girişi sağlar ve min ve max ile sınırlandırılabilir.
• type="email": E-posta formatında veri girişini sağlar ve doğru formatı kontrol eder.
• type="password": Girilen veriyi gizleyerek şifre alanı oluşturur.
• type="file": Kullanıcının dosya yüklemesine izin verir ve accept ile dosya türünü sınırlar.

2. Textarea Etiketi

Textarea Nedir ve Nasıl Kullanılır?

<textarea> etiketi, kullanıcıdan birden fazla satır içeren uzun metin girdisi almak için kullanılır. Özellikle geri bildirim veya yorum alanlarında tercih edilir. rows ve cols ile yüksekliği ve genişliği ayarlanabilir.

<form>
  <label for="comments">Yorumlarınız:</label>
  <textarea id="comments" name="comments" rows="5" cols="40" placeholder="Görüşlerinizi buraya yazın..." required></textarea>
</form>

• rows: Textarea'nın kaç satır yüksekliğinde olacağını belirtir.
• cols: Textarea'nın genişliğini belirler.
• placeholder: Kullanıcıya açıklama metni gösterir.
• required: Kullanıcının alanı doldurmasını zorunlu kılar.

3. Button Etiketi

Button Etiketi ve Tipleri

<button> etiketi, bir forma gönderme veya kullanıcı etkileşimi sağlama amacıyla kullanılan HTML elemanıdır. type özelliği ile işlevi belirlenebilir.

<form>
  <button type="submit">Gönder</button>
  <button type="reset">Formu Sıfırla</button>
  <button type="button" onclick="alert('Butona tıkladınız!')">Tıkla</button>
</form>

• type="submit": Formu gönderir ve tarayıcı tarafından formun hedefe gönderilmesini sağlar.
• type="reset": Formdaki tüm verileri sıfırlar.
• type="button": JavaScript gibi ek işlevler için özel tıklama olayları tanımlamak amacıyla kullanılır.

4. Select ve Option Etiketleri

Select Etiketi ile Seçim Kutuları

<select> etiketi, kullanıcıya önceden tanımlanmış seçeneklerden birini veya birden fazlasını seçme imkanı sunar. <option> etiketleri ise bu seçenekleri belirler.

<form>
  <label for="country">Ülke Seçiniz:</label>
  <select id="country" name="country" required>
    <option value="tr">Türkiye</option>
    <option value="us">Amerika Birleşik Devletleri</option>
    <option value="de">Almanya</option>
  </select>

  <label for="hobbies">Hobileriniz:</label>
  <select id="hobbies" name="hobbies" multiple>
    <option value="reading">Kitap Okuma</option>
    <option value="swimming">Yüzme</option>
    <option value="coding">Kodlama</option>
  </select>
</form>

• <select>: Kullanıcının seçenekler arasından seçim yapmasını sağlar.
• <option>: Seçim yapılabilecek her bir değeri tanımlar.
• multiple: Birden fazla seçeneğin seçilmesine izin verir.

5. Radio ve Checkbox Inputları

Radio ve Checkbox Kullanımı

type="radio" ve type="checkbox" ile kullanıcıya tek veya çoklu seçim yapma imkanı verilir. radio türü tek seçim için uygunken, checkbox birden fazla seçime olanak tanır.

<form>
  <p>Cinsiyet:</p>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Erkek</label>
  
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Kadın</label>
  
  <p>İlgi Alanlarınız:</p>
  <input type="checkbox" id="coding" name="interests" value="coding">
  <label for="coding">Kodlama</label>
  
  <input type="checkbox" id="music" name="interests" value="music">
  <label for="music">Müzik</label>
</form>

• radio: Aynı name değeri olan radio butonlardan yalnızca birini seçmeye izin verir.
• checkbox: Her bir checkbox bağımsız olarak seçilebilir ve birden fazla seçim yapılabilir.

6. Anlatılanların Tümünü Kullanan Örnek

Aşağıdaki örnek, tüm form elemanlarının bir arada kullanıldığı, kullanıcıdan kişisel bilgilerini ve geri bildirimlerini alan bir form yapısıdır.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form Örneği</title>
</head>
<body>
  <h2>Geri Bildirim Formu</h2>
  <form action="/submit-feedback" method="post">
    <label for="name">Adınız:</label>
    <input type="text" id="name" name="name" placeholder="Adınızı girin" required>

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

    <label for="country">Ülke Seçiniz:</label>
    <select id="country" name="country" required>
      <option value="tr">Türkiye</option>
      <option value="us">Amerika Birleşik Devletleri</option>
      <option value="de">Almanya</option>
    </select>

    <p>Cinsiyet:</p>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Erkek</label>
    
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Kadın</label>

    <label for="comments">Yorumlarınız:</label>
    <textarea id="comments" name="comments" rows="5" placeholder="Görüşlerinizi buraya yazın..." required></textarea>

    <label for="file">Profil Fotoğrafı Yükle:</label>
    <input type="file" id="file" name="file" accept=".jpg, .jpeg, .png">

    <p>İlgi Alanlarınız:</p>
    <input type="checkbox" id="coding" name="interests" value="coding">
    <label for="coding">Kodlama</label>

    <input type="checkbox" id="music" name="interests" value="music">
    <label for="music">Müzik</label>

    <button type="submit">Gönder</button>
    <button type="reset">Formu Sıfırla</button>
  </form>
</body>
</html>

Kapanış

HTML form elemanları, web sayfalarınızda kullanıcı etkileşimini artırmanın temel yapı taşlarından biridir. Bu rehberde, <input>, <textarea>, <button>, <select> ve diğer form elemanlarının nasıl kullanıldığını detaylı bir şekilde öğrendiniz. Her bir form elemanının farklı özelliklerini ve kullanım amaçlarını keşfederek, HTML formlarınızı daha etkili ve kullanıcı dostu hale getirebilirsiniz. Daha fazla bilgi ve HTML ile ilgili kapsamlı eğitim içerikleri için Kodlasak.com adresini ziyaret edebilirsiniz. Kodlasak.com'da HTML'den CSS'e, JavaScript'ten C#'a kadar birçok yazılım konusu hakkında detaylı eğitimler ve örneklerle dolu içerikler bulabilirsiniz.