A’dan Z’ye Tüm HTML5 Form Elemanları

Form elemanları kullanımı, web sayfaları ile etkileşim kurmanın önemli bir yoludur. Dolayısıyla bu elemanların sayfada düzgün bir şekilde yerleştirilmesi ve etkili bir şekilde kullanılması, ziyaretçinin sayfayı rahat kullanması açısından önemlidir.

<fieldset>…</fieldset>

Birbiriyle ilgili form elemanlarının gruplanmasını sağlar. Windows Formdaki GroupBox’a benzer.

<legend>…</legend>

Gruplanan form elemanlarıyla ilgili açıklama yazılmasını sağlar.

<label>…</label>

Form üzerinde gezinmek veya tercih yapmak için sıklıkla mouse kullanan kullanıcılar için idealdir. Radio buton veya checkbox gibi elemanların yanındaki metne tıklandığında da seçilebilmesini sağlar.

for parametresi

Metnin üstüne tıklandığında hangi radio butonu veya checkbox’ın seçileceğini belirtmek için kullanılır. Bu elemanı düzgün bir şekilde kullanabilmek için eşlenecek elemana bir ID verilmesi gerekir. Öteki elemana verilen bu ID, label’ın for parametresine yazılarak kullanılır.

<input type=”text”>

Kullanıcının veri girebilmesini sağlar. En çok kullanılan form elemanlarından biridir.

name parametresi

. PHP gibi bir dil ile gelen verinin karşılanabilmesi için name parametresi kullanılır.

value parametresi

Elemanın içinin dolu olarak gelmesi için value parametresi kullanılır.

placeholder parametresi

Kullanıcıya yol göstermek amacıyla yazılan metin placeholder parametresi kullanılarak belirtilir.

autocomplete parametresi

Kredi kartı gibi önemli bilgilerin tarayıcı önbelleğinde saklanmaması için tarayıcıya bildirim yapmak için kullanılır.  autocomplete="off" yapıldığında form içine girilen veriler hatırlanmayacak, otomatik tamamlama özelliği bu elemanlar için kullanılamayacaktır. Birçok input elemanı için kullanılabilir.

required parametresi

Form içinde, girilmediği takdirde formun gönderilmesini engeller. Sisteme giriş yaparken kullanıcı adı ve şifre gibi form elemanlarında kullanılabilir.

<input type=”number”>

Kullanıcının sadece sayı girebilmesini sağlar. HTML5 ile birlikte gelmiştir. (Bu form elemanı olmadığı zamanlar text tipindeki eleman kullanılırdı ve JavaScript yardımıyla giriş doğrulaması yapılırdı.)

max parametresi

Kullanıcının girebileceği en büyük değeri ifade eder.

min parametresi

Kullanıcının girebileceği en küçük değeri ifade eder.

<input type=”email”>

Kullanıcının sadece uygun formatta bir mail adresi girmesini sağlar. Girilen mail adresinin uygunluk kontrolü otomatik olarak yapılır. “kullanıcı@domain.uzantı” şeklinde yazılan herhangi bir veri doğru olarak değerlendirilirken mail adresi belirteci @ işareti veya  uzantıyı ayıran nokta işareti olmadığı durumlarda formun gönderimine izin verilmez. HTML5 ile birlikte gelmiştir.

Yukarıdaki kodda mail adresinin girilmesi zorunludur ve tarayıcının otomatik tamamlama özelliği bu eleman için devre dışı bırakılmıştır.

<input type=”password”>

Kullanıcının şifre girebilmesini sağlar. Girilen karakterler ekranda gösterilmez, bunun yerine * gibi bir sembol ekranda gösterilir.

pattern parametresi

Regex, yani düzenli ifade türüncde veri girişi yapılabilir. Şifrenin zorluğu buradaki desen aracılığıyla belirlenir. Yukarıdaki kodda girilecek şifrenin en az 5, en fazla 6 karakter olması gerektiği süslü parantezlerin içinde belirtilmiştir. Regex ifadelerde “?=” ifadesi gruplandırma yapmak için kullanılır. [A-Z] ile herhangi bir büyük harf, [a-z] ile herhangi bir küçük harf, [0-9] ile herhangi bir rakam girişine izin verilmekte birlikte her bir karakter grubundan en az 1 tane girilmelidir.

<input type=”checkbox”>

Kullanıcının birçok seçenekten bir veya birkaçını seçebilmesini sağlar.

checked parametresi

İlgili seçeneğin, tarayıcının açılmasıyla birlikte seçili gelip gelmeyeceğini belirtmek için kullanılır. Yukarıdaki örnekte sinema seçeneği, tarayıcı sayfayı yüklendiğinde seçili olarak gelecektir.

id parametresi

Label etiketi kullanılacaksa kullanılması zorunludur. Aslında bir kimlik etiketidir ve mevcut sayfa içinde aynı ID’de yalnızca bir eleman olmalıdır. HTML’in neredeyse tüm BODY etiketleri için kullanılabilir.

<input type=”radio”>

Kullanıcının bir grup seçenekten yalnızca birini seçebilmesini sağlar.

checked parametresi

Checkbox’ta olduğu gibi, hangi seçeneğin seçili geleceği belirtilir. Yukarıdaki örnekte “12. sınıf” seçeneği seçili olarak gelecektir.

<input type=”range”>

Belirtilen değer aralığı içerisinde bir seçim yapılmasını sağlar. Windows formlarındaki TrackBar’ın benzeridir. HTML5 ile gelmiştir.

min ve max parametreleri, number elemanındaki kullanım ile aynı amacı taşır.

oninput parametresi

Yukarıdaki kodun eklenmesiyle birlikte kullancının ayarladığı değer <output>, <progress> ve <meter> elemanlarında gösterilecektir. Farklı elemanlar eklenecekse her bir eleman noktalı virgül ile ayrılarak yazılır.

step parametresi

Ayar çubuğunun duyarlılığı belirtir. Her bir harekette kaç adım atarak değişim gösterebileceğini tanımlar.

<input list>

Kullanıcının veri girebilmesini sağlar. <input type=”text”> ile benzer görevi yapsa da kullanıcıya öneri sunarak isterse bunlardan birini seçebilmesini sağlar. HTML5 ile gelmiştir.

list parametresi

<datalist>…</datalist> etiketleri içine yazılan elemanların listelenmesi için, datalist’in id’sini kullanır.

<datalist>…</datalist>

<input list> ile birlikte kullanılır. ID mutlaka belirtilmelidir. Her bir seçenek <option> etiketinin value parametresine yazılır.

<select>…</select>

Kullanıcının bir grup seçenek içerisinden bir veya birkaçını seçmesini sağlar.

<option>…</option> etiketleri

<select>…</select> içinde kullanılan her bir seçeneği ayrı ayrı belirtmek için kullanılır. value parametresine, seçeneğin seçilmesi durumunda karı tarafa gönderilecek değer yazılır. Kullanıcıya gösterilecek metin ise <option>…</option> arasında belirtilir.

<optgroup>…</optgroup>

Select içinde yer alan seçenekleri gruplamak için kullanılır. label parametresi ile gruplara isim verilir.

<textarea>…</textarea>

Kullanıcının yorum, yazı, mail içeriği gibi uzun miktarda metinsel veri girmesini sağlayan elemandır.

HTML5 Form Elemanları Kodları ve Ekran Görüntüsü

Tüm HTML5 form elemanlarını içerecek şekilde yapılan örneğin kod ve ekran görüntüsü şu şekildedir:

Form elemanları olmasa da <output>…</output>, <meter>…</meter> ve <progress>…</progress> elemanları da bu örnekte <input type=”range”> kullanımı sayesinde yer buldu. Output ile sayısal değer ekrana yazdırılırken <meter> ve <progress> ile sayısal değerin görselleştirmesi yapılır.

About Hürkal HÜSEM

2010 yılından bu yana Bilişim Teknolojileri Öğretmeni olarak meslek liselerinde görev yapmaktayım.

View all posts by Hürkal HÜSEM →

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.