HTML 5 Dersleri 5 - Form Özellikleri

Bu derste HTML5 formlarında kullanılan form özelliklerinin (attributes) ne işe yaradığı ve nasıl kullanıldığı anlatılmaktadır. required, placeholder, maxlength, pattern, readonly, disabled gibi form özellikleri, örnek HTML kodlarıyla birlikte detaylı şekilde ele alınır.

admin admin
Ekim 17, 2022 - 11:02 Updated: Ocak 8, 2026 - 23:51
0 358
HTML 5 Dersleri 5 - Form Özellikleri
HTML 5 Dersleri 5 - Form Özellikleri

HTML5 Form Özellikleri Nedir?

HTML5 form özellikleri, kullanıcıdan alınan verilerin kontrollü, doğru ve kullanıcı dostu şekilde girilmesini sağlar. Bu özellikler sayesinde ek JavaScript kullanmadan temel doğrulama işlemleri yapılabilir.

Required Özelliği

required özelliği, ilgili alanın doldurulmasını zorunlu hale getirir.

Required Örneği

<input type="text" required placeholder="Adınızı giriniz">

Bu alan boş bırakılırsa form gönderilemez.

Placeholder Özelliği

placeholder, input alanı içinde kullanıcıya yol gösteren geçici metin gösterir.

Placeholder Örneği

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

Maxlength Özelliği

maxlength, girilebilecek maksimum karakter sayısını belirler.

Maxlength Örneği

<input type="text" maxlength="10">

Min ve Max Özellikleri

Sayısal alanlarda minimum ve maksimum değer sınırı koymak için kullanılır.

Min / Max Örneği

<input type="number" min="18" max="65">

Pattern Özelliği

pattern, belirli bir formatta veri girilmesini sağlar. Düzenli ifade (regex) kullanır.

Pattern Örneği

<input type="text" pattern="[0-9]{11}" placeholder="TC Kimlik No">

Bu örnek, 11 haneli sayı girişine izin verir.

Readonly Özelliği

readonly, input alanının düzenlenmesini engeller ancak form ile birlikte gönderilmesini sağlar.

Readonly Örneği

<input type="text" value="Sabit Veri" readonly>

Disabled Özelliği

disabled, input alanını pasif hale getirir ve form gönderiminde bu alan dikkate alınmaz.

Disabled Örneği

<input type="text" value="Pasif Alan" disabled>

Autofocus Özelliği

Sayfa yüklendiğinde imlecin otomatik olarak ilgili alana gelmesini sağlar.

Autofocus Örneği

<input type="text" autofocus placeholder="İlk odaklanan alan">

Autocomplete Özelliği

Tarayıcının daha önce girilen verileri önermesini sağlar veya engeller.

Autocomplete Örneği

<input type="text" autocomplete="on">
<input type="text" autocomplete="off">

Checked Özelliği

Checkbox ve radio inputlarında varsayılan seçimi belirtir.

Checked Örneği

<input type="checkbox" checked> HTML

Basit Bir HTML5 Form Özellikleri Örneği

<form>
    <label>E-posta</label><br>
    <input type="email" required placeholder="[email protected]"><br><br>

    <label>Yaş</label><br>
    <input type="number" min="18" max="60"><br><br>

    <label>TC Kimlik</label><br>
    <input type="text" pattern="[0-9]{11}" maxlength="11"><br><br>

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

HTML5 Form Özellikleri Neden Önemlidir?

  • Form doğrulama işlemlerini kolaylaştırır

  • Kullanıcı hatalarını azaltır

  • JavaScript ihtiyacını azaltır

  • Daha güvenli veri girişi sağlar

Form özelliklerini öğrendikten sonra, HTML5 ile birlikte gelen SVG (vektörel grafikler) konusuna geçebiliriz.

? Bir sonraki ders:
HTML 5 Dersleri 6 – SVG
https://cilginyazilim.com/html-5-dersleri-6-svg

Etiketler: