HTML 5 Dersleri 4 - Form Elementleri

Bu derste HTML5 formlarında kullanılan temel form elementleri detaylı olarak anlatılmaktadır. form, label, input, textarea, select, option ve button gibi elementlerin görevleri ve kullanım şekilleri örnek HTML kodlarıyla açıklanır.

admin admin
Ekim 17, 2022 - 11:01 Updated: Ocak 8, 2026 - 23:43
0 353
HTML 5 Dersleri 4 - Form Elementleri
HTML 5 Dersleri 4 - Form Elementleri

HTML Form Elementleri Nedir?

HTML form elementleri, kullanıcıdan veri almak için kullanılan yapılardır. HTML5 ile birlikte form elementleri daha esnek, kullanışlı ve doğrulama destekli hale gelmiştir.

Formlar; üyelik, iletişim, arama ve giriş işlemleri gibi birçok alanda kullanılır.

Form Etiketi (form)

Tüm form elemanlarını kapsayan ana etikettir.

Form Yapısı Örneği

<form action="" method="post">
    <!-- Form elemanları -->
</form>

Label Etiketi

label, form elemanlarının ne işe yaradığını belirtir ve kullanıcı deneyimini artırır.

Label Kullanımı

<label>Ad Soyad</label>
<input type="text">

Input Etiketi

Kullanıcıdan veri almak için kullanılan en temel form elemanıdır.

Input Örneği

<input type="email" placeholder="E-posta adresiniz">

Textarea Etiketi

Uzun metin girişleri için kullanılır.

Textarea Örneği

<textarea rows="4" cols="30">
Mesajınızı yazınız
</textarea>

Select ve Option Etiketleri

Açılır liste (dropdown) oluşturmak için kullanılır.

Select Örneği

<select>
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
</select>

Button Etiketi

Form işlemleri için kullanılan butonları oluşturur.

Button Örneği

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

Fieldset ve Legend Etiketleri

Form elemanlarını gruplamak için kullanılır.

Fieldset Örneği

<fieldset>
    <legend>Kullanıcı Bilgileri</legend>

    <label>Ad:</label>
    <input type="text">

</fieldset>

Basit Bir HTML5 Form Örneği

<form>
    <label>Ad Soyad</label><br>
    <input type="text"><br><br>

    <label>E-posta</label><br>
    <input type="email"><br><br>

    <label>Mesaj</label><br>
    <textarea></textarea><br><br>

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

HTML5 Form Elementleri Neden Önemlidir?

  • Kullanıcıdan doğru veri alınmasını sağlar

  • Form yapısını daha düzenli hale getirir

  • Erişilebilirliği artırır

  • Modern tarayıcılarla uyumludur

Form elementlerini öğrendikten sonra, bu elementlerin nasıl özelleştirildiğini ve hangi ek özelliklere sahip olduğunu inceleyebiliriz.

? Bir sonraki ders:
HTML 5 Dersleri 5 – Form Özellikleri
https://cilginyazilim.com/html-5-dersleri-5-form-ozellikleri

Etiketler: