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.
1 2 | <input type="checkbox" name="kitap" id="kitap"> <label for="kitap">Kitap okumak</label> |
<input type=”text”>
Kullanıcının veri girebilmesini sağlar. En çok kullanılan form elemanlarından biridir.
1 | <input type="text" name="ad" placeholder="Adınız"> |
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ı.)
1 | <input type="number" name="yas" max="100" placeholder="Yaşınız"> |
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.
1 | <input type="email" name="mail" placeholder="Mail Adresiniz" required autocomplete="off"> |
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.
1 | <input type="password" name="sifre" placeholder="Şifreniz" pattern="(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{5,6}" required> |
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.
1 2 3 | <input type="checkbox" name="kitap" id="kitap"> <input type="checkbox" name="sinema" id="sinema" checked> <input type="checkbox" name="tiyatro" id="tiyatro"> |
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.
1 2 3 4 | <input type="radio" name="sinif" value="9"> 9. Sınıf <input type="radio" name="sinif" value="10"> 10. Sınıf <input type="radio" name="sinif" value="11"> 11. Sınıf <input type="radio" name="sinif" value="12" checked> 12. Sınıf |
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.
1 | <input type="range" name="egilim" min="0" max="100" value="25" step="5"> |
min ve max parametreleri, number elemanındaki kullanım ile aynı amacı taşır.
oninput parametresi
1 | oninput="egilim_degeri_id.value = egilim_id.value; egilim_progress_id.value = egilim_id.value; egilim_meter_id.value = egilim_id.value" |
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.
1 2 3 4 5 6 7 8 | <input list="ilgi_alani" name="ilgi_alani" placeholder="Temel alan"> <datalist id="ilgi_alani"> <option value="Yazılım"> <option value="Donanım"> <option value="İşletim Sistemleri"> <option value="Grafik"> <option value="Internet"> </datalist> |
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.
1 2 3 4 5 6 7 8 9 10 11 | <select name="proje"> <optgroup label="Meslek Dersleri"> <option value="gelismis_internet">Gelişmiş Internet Uygulamaları</option> <option value="internet_programciligi">Internet Programcılığı</option> </optgroup> <optgroup label="Kültür Deresleri"> <option value="dil_anlatim">Dil ve Anlatım</option> <option value="beden_egitimi">Beden Eğitimi</option> <option value="matematik">Matematik</option> </optgroup> </select> |
<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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <!doctype html> <html lang="tr"> <head> <meta charset="utf8"> <title>Form Elemanları</title> </head> <body> <form action="form-isle.php" method="post"> <fieldset> <legend>Kişisel Bilgiler</legend> <input type="text" name="ad" placeholder="Adınız"> <br> <input type="number" name="yas" max="100" placeholder="Yaşınız"> </fieldset> <fieldset> <legend>Kullanıcı Bilgileri</legend> <input type="email" name="mail" placeholder="Mail Adresiniz" required autocomplete="off"> <br> <input type="password" name="sifre" placeholder="Şifreniz" pattern="(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{5,6}" required> </fieldset> <fieldset> <legend>İlgi Alanları</legend> <input list="ilgi_alani" name="ilgi_alani" placeholder="Temel alan"> <datalist id="ilgi_alani"> <option value="Yazılım"> <option value="Donanım"> <option value="İşletim Sistemleri"> <option value="Grafik"> <option value="Internet"> </datalist> <br> <fieldset> <legend>Hobiler</legend> <input type="checkbox" name="kitap" id="kitap"> <label for="kitap">Kitap okumak</label> <br> <input type="checkbox" name="sinema" id="sinema"> <label for="sinema">Sinema</label> <br> <input type="checkbox" name="tiyatro" id="tiyatro"> <label for="tiyatro">Tiyatro</label> </fieldset> </fieldset> <fieldset> <legend>Sınıf</legend> <input type="radio" name="sinif" value="9"> 9. Sınıf <br> <input type="radio" name="sinif" value="10"> 10. Sınıf <br> <input type="radio" name="sinif" value="11"> 11. Sınıf <br> <input type="radio" name="sinif" value="12" checked> 12. Sınıf </fieldset> <fieldset> <legend>Talep Edilen Proje Ödevi</legend> <select name="proje"> <optgroup label="Meslek Dersleri"> <option value="gelismis_internet">Gelişmiş Internet Uygulamaları</option> <option value="internet_programciligi">Internet Programcılığı</option> </optgroup> <optgroup label="Kültür Deresleri"> <option value="dil_anlatim">Dil ve Anlatım</option> <option value="beden_egitimi">Beden Eğitimi</option> <option value="matematik">Matematik</option> </optgroup> </select> </fieldset> <fieldset> <legend>Sosyal Medya Kullanımı</legend> <select name="sosyal_medya[]" multiple> <option value="twitter">Twitter</option> <option value="facebook">Facebook</option> <option value="instagram">Instagram</option> </select> </fieldset> <fieldset> <legend>Belirtmek İstedikleriniz</legend> <textarea name="gorus" placeholder="Görüşünüzü yazınız." rows="5" cols="50"></textarea> </fieldset> <fieldset> <legend>Puanlama</legend> <input type="range" name="egilim" id="egilim_id" oninput="egilim_degeri_id.value = egilim_id.value; egilim_progress_id.value = egilim_id.value; egilim_meter_id.value = egilim_id.value" min="0" max="100" value="25" step="5"> <output name="egilim_degeri" id="egilim_degeri_id"></output> <br> <meter name="egilim_meter" id="egilim_meter_id" min="0" max="100" value="5"></meter> <br> <progress name="egilim_progress" id="egilim_progress_id" min="0" max="100"></progress> </fieldset> <br> <input type="submit" value="GÖNDER"> <input type="reset" value="TEMİZLE"> </form> </body> </html> |
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.
