Merhaba,
Bu yazı ile birlikte HTML5 ile form nesneleri ve kullanımı serisinin 2. ve son yazısını tamamlamış olacağız. Önceki yazıda <form> ve <input> nesnelerinden genel olarak bahsetmiştim. Şimdi ise bunların haricinde kalan ve aşağıdaki görselde işaretlenmiş olan form ögeleri açıklamaya çalışacağım.
Not : Aşağıdaki görsellerde kırmızı kutu içerisine alınmış kısımlar, HTML5 ile gelen özelliklerdir.
1- <fieldset> ve <legend> kullanımı
<fieldset> nesnesi; form üzerinde birbirleri ile alakalı girişler(input), etiketler ve diğer kontrollerin gruplandırılmasını sağlar. <legend> nesnesi ise; <fieldset>‘in yani etiketler/elementler grubuna başlık tanımlanmasını sağlar.
Kullanım şekli:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html lang="tr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <fieldset> <legend>kod5 | eğitim, kodlama, paylaşım</legend> Ad:<br /> <input name="ad" type="text" placeholder="Avni" /><br /> Soyad:<br /> <input name="soyad" type="text" placeholder="Babaoğlu" /><br /> <br /> <input name="gonder" type="submit" value="GÖNDER" /> </fieldset> </body> </html> |
Kod Çıktısı:
2- <select> , <option> ve <optiongroup>kullanımı
<select> elementi açılır liste (drop-down list) oluşturulmasını sağlar. <option> ise açılır liste elemanlarını (items) ifade eder. <select> içinde tanımlanmak üzere her bir eleman için <option> kullanılması gerekmektedir. <optgroupt> ise birden çok açılır listenin, tek bir grup içinde gösterilebilmesini mümkün kılar.
Kullanım şekli:
|
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 |
<html lang="tr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <select name="acilirListe"> <optgroup label="kod5 | eğitim, kodlama, paylaşım"> <option>Avni Babaoğlu</option> <option>Karadeniz Teknik Üniversitesi</option> <option>İstatistik ve Bilgisayar Bilimleri</option> </optgroup> <optgroup label="Memleketler"> <option>İstanbul</option> <option>Rize</option> <option>Trabzon</option> </optgroup> </select> </body> </html> |
Kod Çıktısı:
3- <textarea> kullanımı
<textarea> elementi, tarayıcı üzerinde genişletilme özelliğinin bulunmasından dolayı ve uzun metinlerin girişini mümkün kılması sebebiyle kullanışlıdır. İletişim formları, yorum kutucukları vb. diğer araçların oluşturulmasında tercih edilir.
4- <datalist> kullanımı
Daha önceleri harici script ve tasarım ögeleri (css) ile oluşturulabilen, otomatik tamamlama özelliğinin kullanılmasını mümkün kılan ve içerisine veritabanı dahil dinamik kaynaklardan veri eklenebilen, liste biçimindeki HTML5 ile gelen yeni elementlerdendir. Safari dışındaki tüm tarayıcılar tarafından desteklenmektedir.
Kullanım Şekli:
|
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 |
<html lang="tr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <form> <input list="webDilleri" name="liste"> <datalist id="webDilleri"> <option value="ASP.NET"></option> <option value="PHP"></option> <option value="ASP"></option> <option value="HTML5"></option> <option value="CSS3"></option> <option value="Javascript"></option> </datalist> </form> </body> </html> |
Kod Çıktısı:
5- <keygen> kullanımı
İnternet üzerinden güvenli bir şekilde veri iletimini sağlamak için tarayıcılar tarafında kullanımı mümkündür. Verileri şifrelemek ve güvenliği sağlamak maksadıyla kullanılır. Internet Explorer dışındaki tüm tarayıcılar tarafından desteklenmektedir. HTML5 ile gelen elementlerdendir.
Kullanım Şekli:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html lang="tr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <form> Kullanıcı adı: <input type="text" name="kullaniciAdi"> Şifreleme: <keygen name="security"> <input type="submit"> </form> </body> </html> |
Kod Çıktısı:
6- <output> kullanımı
İnternet üzerinden güvenli bir şekilde veri iletimini sağlamak için tarayıcılar tarafında kullanımı mümkündür. Verileri şifrelemek ve güvenliği sağlamak maksadıyla kullanılır. Internet Explorer dışındaki tüm tarayıcılar tarafından desteklenmektedir. HTML5 ile gelen elementlerdendir.
Kullanım Şekli:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html lang="tr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form> </body> </html> |
Kod Çıktısı:
Bu yazı ile beraber HTML5 ile form kullanımı konusunu tamamlamış bulunmaktayız.
Bir sonraki yazıda görüşmek üzere.
