HTML Formları Oluşturma

Sonraki derse hoş geldiniz! Bu derste HTML kullanarak nasıl form oluşturacağınızı öğreneceksiniz. Formlar, daha sonra PHP ile işleyebileceğiniz kullanıcı girdilerini toplamak için gereklidir. Başlayalım!

HTML Formları Nelerdir?

HTML formları, kullanıcı girdilerini toplamak için kullanılır. Kullanıcıların alanları doldurmasına, seçimler yapmasına ve verileri işlenmek üzere bir sunucuya göndermesine olanak tanır.

Örnek: Kullanıcıların kullanıcı adlarını ve parolalarını girdiği bir oturum açma formu.

Önemli Nokta: Formlar, kullanıcı ile PHP betikleriniz arasında köprü görevi görür.

Basit Form Oluşturma

Temel bir HTML formunu şu şekilde oluşturabilirsiniz:

Açıklama:

• action: Form verilerini işleyecek PHP dosyasını belirtir.
• method: Verilerin nasıl gönderileceğini belirtir (GET veya POST).
• required: Gönderimden önce alanın doldurulmasını zorunlu kılar.

<form action="process.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

Form Öğeleri

Formlar, farklı veri türlerini toplamak için çeşitli girdi türleri içerebilir:

• text: Tek satırlık metin girişi için.
• email: E-posta adresleri için.
• password: Parola girişi için.
• checkbox: Birden çok seçenekli seçimler için.
• radio: Tek seçenekli seçimler için.
• submit: Formu göndermek için.

Örnek:

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

Radyo Düğmelerini Kullanma

Radyo düğmeleri, kullanıcıların bir grup içinden tek bir seçenek belirlemesini sağlar. Örnek:

İpucu: Bir gruptaki tüm radyo düğmeleri için aynı name özniteliğini kullanın.

<form action="submit.php" method="POST">
  <p>Choose your favorite color:</p>
  <input type="radio" id="red" name="color" value="Red">
  <label for="red">Red</label>
  <br>
  <input type="radio" id="blue" name="color" value="Blue">
  <label for="blue">Blue</label>
  <br>
  <button type="submit">Submit</button>
</form>

Onay Kutularını Kullanma

Onay kutuları, kullanıcıların birden çok seçenek belirlemesini sağlar. Örnek:

İpucu: Birden çok değeri toplamak için dizi sözdizimini (hobbies[]) kullanın.

<form action="submit.php" method="POST">
  <p>Select your hobbies:</p>
  <input type="checkbox" id="reading" name="hobbies[]" value="Reading">
  <label for="reading">Reading</label>
  <br>
  <input type="checkbox" id="traveling" name="hobbies[]" value="Traveling">
  <label for="traveling">Traveling</label>
  <br>
  <button type="submit">Submit</button>
</form>

Açılır Listeler

Açılır menüler, kullanıcıların bir listeden tek bir seçenek belirlemesini sağlar. Örnek:

İpucu: Varsayılan bir seçenek belirlemek için selected kullanın.

<form action="submit.php" method="POST">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option value="UK">UK</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

Form Erişilebilirliği

Formlarınızın tüm kullanıcılar için erişilebilir olduğundan emin olun:

• Girdilere for öznitelikleriyle bağlanan label etiketlerini kullanın.
• İlgili girdileri fieldset ve legend kullanarak gruplayın.
• Formları mobil cihazlarda kullanılabilirlik açısından sınayın.

İpucu: Erişilebilir formlar, herkes için kullanıcı deneyimini iyileştirir!

Harika İş Çıkardınız!

Tebrikler! Metin alanları, radyo düğmeleri, onay kutuları ve açılır listeler dahil olmak üzere çeşitli girdi türleriyle HTML formları oluşturmayı öğrendiniz. Formlar, web geliştirmede kullanıcı girdisinin temelini oluşturur. Bir sonraki derste PHP kullanarak form verilerini nasıl işleyeceğinizi öğreneceğiz. Kod yazmaya devam edelim!