HTML Web

HTML5 Form Nesneleri ve Kullanımı – 2

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.

html5-form-nesneleri-2

 

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:

 

Kod Çıktısı:

fieldset_legend_kod_2

 

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:

 

Kod Çıktısı:

option_select_kod_2

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:

 

Kod Çıktısı:

datalist_kod_1

 

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:

 

Kod Çıktısı:

html5-keygen

 

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:

 

Kod Çıktısı:

output_kod_1

 

Bu yazı ile beraber HTML5 ile form kullanımı konusunu tamamlamış bulunmaktayız.

Bir sonraki yazıda görüşmek üzere.


HTML 5 Müfredatı

  1. HTML5 Nedir ?
  2. HTM5 – Temel Etiketler ve Özel Karakterler
  3. Metin Biçimlendirme(Text Formatting)
  4. Bağlantı (Link) Yapısı
  5. Tablo (Table) Kullanımı
  6. Liste(Lists) Kullanımı
  7. Form Nesneleri ve Kullanımı ~ 1
  8. Form Nesneleri ve Kullanımı ~ 2
  9. Audio Kullanımı
  10. Video Kullanımı
Rize/Ardeşen doğumlu.
Karadeniz Teknik Üniversitesi, İstatistik ve Bilgisayar Bilimleri mezunu.

.NET teknolojileri alanında ihtisas yapma amacında.
İstatistik ve nevi ilimleri sevmekte, fırsat bulduğunda üzerine çalışmayı amaçlamakta.

Basın İlan Kurumunda yazılım geliştirme uzmanı olarak çalışmaktadır.