HTML 5 ile Gelen Form Etiketleri

HTML 5 ile Gelen Form Etiketleri
  • 21
    Nis

HTML 5 ile gelen etiketlerin ikinci kısmında form etiketlerine yer vereceğiz. Medya etiketlerine göre kullanım mantığı hemen hemen aynı olsa da kullanım alanları farklı. Form etiketleri web sitenizde iletişim, sipariş veya teklif içeren formlarda kullanılan temel etiketlerdir. HTML 5 ile bakalım bu etiketlere neler eklendi.

<datalist>

<input list="dersler">
<datalist id="dersler">
<option value="Türkçe">
<option value="Matematik">
<option value="İngilizce">
<option value="Beden Eğitimi">
</datalist>

Aşağıdaki görselde de gördüğünüz gibi herhangi birşey yazmayıp çift tıkladığımızda varolan seçenekler çıkıyor. Fakat bir harf yazdığımızda sadece o harfin içinde bulunduğu seçenekleri bize sunuyor.

<keygen>

Şifreleme : <keygen name="sifre">

keygen etiketi web sitesini ziyaret eden kullanıcılara güvenli yetkilendirme imkanı sunar. “private ve public” yani açık ve kapalı olmak üzere anahtar oluşturup birini sunucuya diğerini ise tarayıcıya gönderir. Bir formun içerisinde yukarıdaki gibi bir keygen etiketi varsa form gönderildiğinde sunucuda “sifre” diye bir değişken oluşacaktır. keytype özelliği ile farklı türkleri de belirlenebilir.

ornekler

<output>

<form oninput="sonuc.value=parseInt(bir.value)+parseInt(iki.value)">
<input type="number" id="bir" value="50">+
<input type="number" id="iki" value="51">=
<output name="sonuc" for="bir iki"></output>
</form>

outout etiketi tıpkı javascript gibi hesaplama işleminin sonucu bize verir. Ayıca değerlerle yukarı aşağı oynama yaparak da anında sonuç alabiliriz. Matematik işlemlerini yukarıdaki kodu daha da geliştirerek sağlayabiliriz bu yapı sayesinde.

Yukarıda verilen örneklerle HTML 5 e yeni eklenen form etiketlerini de uygulamalı olarak göstermiş olduk. HTML 5 ile ilgili bir sonraki yazımızda ise yapısal etiketleri anlatacağız ve böylece html 5 ile gelenler kısmını sonlandıracağız.


Bir önceki yazımız olan HTML 5 Yeni Medya Etiketleri başlıklı makalemizde html5 media etiket ve yeni media etiketleri hakkında bilgiler verilmektedir.