Site Rengi

HTML5 ile gelen yeni form elementleri hangileridir?

HTML5 ile gelen yeni form elementleri hangileridir?

HTML5 ile gelen yeni form elementleri hangileridir?
24.11.2021
3
A+
A-

HTML5 ile gelen yeni form elementleri hangileridir?

HTML5 ile yeni form etiketleri dâhil olmuştur. Bu yeni HTML etiketleriyle form elemanları çeşitlilik göstermektedir. Aşağıda yeni form elemanlarının bazıları verilmiştir:

HTML5 ile datalist, keygen, output gibi yeni form elementleri gelmiştir.

< datalist > elementi, bir < input > elementi ile beraber kullanılarak önceden belirlenmiş bir dizi seçeneğin listesini oluşturur. Hazır gelen bu liste içinden seçim yapılabilir.

< input list=”universiteler” >
< datalist id=”universiteler” >
< option value=”Atatürk Üniversitesi” >
< option value=”Gazi Üniversitesi” >
< option value=”İstanbul Üniversitesi” >
< option value=”Ege Üniversitesi” >
< /datalist >

Yukarıdaki örnekte görüldüğü üzere, < datalist > elemanı bilgi girişinde kullanıcıya kolaylık sağlamak amacıyla bir açılır menü içinde üniversite isimleri listelemiştir. Ayrıca bir harf girilirse, menüdeki sadece o harf ile ilişkili seçenekler listelenecektir. Örneğin G harfine basıldığından sadece Gazi Üniversitesi seçeneği görülecektir.

< keygen >, HTML5’te bu yeni form etiketi ile kimlik denetimi için güvenli bir yöntem oluşturulur. Form verisi gönderildiği zaman, biri özel biri genel iki anahtar üretilir. Özel anahtar sizin yerel bilgisayarınızda saklanır, genel olanı ise sunucuya gönderilir.

< form action=”sifreleme.php” method=”post” >
Kullanıcı Adı: < input type=”text” name=”ad” >
Kodlama: < keygen name=”sifrele” >
< br>GONDER:< input type=”submit” name=”gonder” >
< /form >

< output >, HTML5’te bu etiket ile hesaplamaların sonucu çıktı olarak görülebilir. Aşağıda range ve number tipinde iki adet girdi alanı örneği verilmiştir. Bu girdi alanlardan gelen veriler toplama işlemi yapıldıktan sonra sonucu yazdırılmaktadır.

< form oninput= “ab.value= parseInt(a.value)+parseInt(b.value)” > 0
< input type=”range” id=”a” value=”500″ >100 +
< input type=”number” id=”b” value=”500″ > =
< output name=”ab” for=”a b” >< /output >
< /form >

Yukarıdaki örnekte, 0-100 arasındaki değerler fare yardımıyla hareket ettirildiğinde değişecektir. Sonuç otomatik olarak en sağda verilecektir.

YORUMLAR

Henüz yorum yapılmamış. İlk yorumu yukarıdaki form aracılığıyla siz yapabilirsiniz.