HTML Form Elemanları

HTML form elemanları, kullanıcıların web sayfalarında veri girmesini sağlayan önemli araçlardır. Bu elemanlar sayesinde kullanıcılar, kişisel bilgilerini, geri bildirimlerini veya seçimlerini web sitenize gönderebilir. Bu yazıda, HTML form elemanlarının çeşitlerini, kullanım amacını ve doğru bir şekilde nasıl kullanılacağını öğreneceksiniz.

HTML Form Elemanları Nedir?

HTML form elemanları, bir web formu içinde yer alan öğelerdir. Bu elemanlar, kullanıcıların veri girmesini veya seçim yapmasını sağlar. Form elemanları, genellikle bir form etiketinin (<form>) içinde yer alır ve her biri belirli bir amaç için kullanılır (metin girişi, seçim listesi, onay kutusu vb.).

Temel HTML Form Elemanları

1. <input> Elemanı<input> etiketi, en yaygın kullanılan HTML form elemanıdır. Kullanıcıdan veri almak için farklı türlerde kullanılabilir. type özelliği, input elemanının türünü belirler. Yaygın türler arasında text, password, email, number, checkbox, radio, submit yer alır.
   
   Örnek:

<label for="isim">Adınız:</label>
<input type="text" id="isim" name="isim">

Bu örnekte, bir kullanıcı adını yazmak için metin kutusu (input) kullanılmıştır.

<textarea> Elemanı

<textarea> etiketi, çok satırlı metin girişi sağlar. Özellikle kullanıcıların uzun yazılar, açıklamalar veya geri bildirimler girmesi gerektiğinde kullanılır.

Örnek:

<label for="yorum">Yorumlar:</label>
<textarea id="yorum" name="yorum" rows="4" cols="50"></textarea>

Burada, kullanıcıların yazılı yorumlarını girmeleri için bir alan oluşturulmuştur.

<select> ve <option> Elemanları

<select> etiketi, bir seçim kutusu oluşturur ve <option> etiketleriyle seçilebilecek seçenekler eklenir. Bu, kullanıcıların belirli bir listeden seçim yapmasını sağlar.

Örnek:

<label for="araba">Araba Seçiniz:</label>
<select id="araba" name="araba">
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
  <option value="mercedes">Mercedes</option>
</select>

Bu örnekte, kullanıcılar BMW, Audi veya Mercedes arabalarından birini seçebilirler.

<button> Elemanı

<button> etiketi, formda bir buton oluşturur. Bu buton, genellikle formun gönderilmesi veya belirli bir aksiyonun yapılması amacıyla kullanılır.

Örnek:

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

Burada, formu gönderecek bir buton yer almaktadır.

<fieldset> ve <legend> Elemanları

<fieldset> etiketi, form elemanlarını gruplamak için kullanılır ve grup başlığı eklemek için <legend> etiketi ile birlikte kullanılır. Bu, formu daha düzenli hale getirmek için faydalıdır.

Örnek:

<fieldset>
  <legend>Kişisel Bilgiler</legend>
  <label for="isim">Adınız:</label>
  <input type="text" id="isim" name="isim">
  <label for="email">E-posta:</label>
  <input type="email" id="email" name="email">
</fieldset>

Bu örnekte, “Kişisel Bilgiler” başlığı altında iki adet form elemanı yer alır.

<label> Elemanı

<label> etiketi, form elemanlarıyla etkileşimi artırmak için kullanılır. Etiket, kullanıcıya form alanının ne olduğunu açıklar ve genellikle form elemanlarıyla ilişkilendirilir. Bu, erişilebilirlik açısından önemlidir.

Örnek:

<label for="telefon">Telefon Numarası:</label>
<input type="tel" id="telefon" name="telefon">

1. Burada, kullanıcıya telefon numarası girmesi gerektiğini belirten bir etiket bulunmaktadır.

HTML Form Elemanlarının Kullanımı ve Özellikleri

• type Özelliği:<input> etiketi, farklı türlerde veri alabilir. Kullanıcıdan metin, şifre, e-posta, dosya gibi farklı türde veri alabilmek için type özelliği kullanılır.
  • type="text": Normal metin girişi
  • type="password": Şifre girişi (gizli)
  • type="email": E-posta adresi girişi
  • type="checkbox": Seçim kutusu
  • type="radio": Tekli seçim kutusu
  • type="submit": Formu gönderme butonu
  • type="file": Dosya yükleme
• required Özelliği: Bir form elemanının boş bırakılamayacağını belirtmek için required özelliği kullanılır. Bu özellik, kullanıcıların formu göndermeden önce gerekli alanları doldurmasını zorunlu kılar.
• placeholder Özelliği: Form elemanlarının içinde, kullanıcıya örnek veya açıklama yapmak için yazı eklemek için placeholder kullanılır.

HTML Form Elemanları ile İlgili SEO İçin İpuçları

1. Açıklayıcı Etiketler Kullanmak: Form elemanlarınızda label etiketlerini kullanarak, her alanın ne amaçla kullanıldığını açıklayın. Bu, hem SEO hem de erişilebilirlik için önemlidir.
2. Yalın ve Düzenli Tasarım: Formların görsel olarak karmaşık olmaması, kullanıcıların formları kolayca doldurmasını sağlar. Formları sade ve kullanıcı dostu tutmak SEO açısından da faydalıdır.
3. Yüksek Dönüşüm İçin İyi UX: Form tasarımınızın kullanıcı dostu olması, dönüşüm oranlarını artırabilir. Kullanıcıların formu hızlı ve kolay bir şekilde doldurması, kullanıcı deneyimini geliştirir.

Örnek Form:

<form name="giris" action="giris.html" method="get" >
 <label>Ad:</label> <input type="text"/> <br/><br/>
 <label>Soyad: </label> <input type="text"/> <br/><br/>
 <input type="submit" value="Gönder"/>
 </form>