HTML

HTML5 Form Elementleri

HTML5 Yeni Form Elementleri

HTML5 aşağıdaki yeni form elementlerine sahiptir:

  • <datalist>
  • <keygen>
  • <output>
Note Tüm tarayıcılar yeni form elementlerini desteklemeyebilir. Ancak, yine de kullanabilirsiniz, sadece sıradan metin giriş alanı olarak davranacaklardır.

 



HTML5 <datalist> Elementi

<datalist> elementi, bir <input> elementi için önceden belirlenmiş bir dizi seçeneğin listesini belirtir.

<datalist> elementi <input> elementleri için bir “autocomplete” özelliği sağlar. Kullanıcılar, input verisi için önceden tanımlanmış bir açılır kutu listesi göreceklerdir.

Bir <datalist> elemanı ile birlikte bağlamak için <input> elemanının “list” özelliğini kullanın.

 

Örnek

Bir <datalist> ile önceden değerleri belirlenmiş bir <input> elementi:

<input list=”browsers”>

<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>

HTML5 <keygen> Elementi

<keygen> elementinin amacı, kullanıcıları yetkilendirmek için güvenli bir yol kullanmaktır.

<keygen> etiketi, bir form içerisinde bir anahtar çifti (key-pair) jeneratörü belirtir.

Form gönderildiğinde, iki anahtar oluşturulur, biri özel biri ise genel.

Özel anahtar sizin lokalinizde saklanır, genel olanı ise sunucuya gönderilir. Genel anahtar, kullanıcının ileride tekrar kullanabilmesi için bir istemci sertifikası oluşturmak için kullanılır.

Örnek

Keygen alanı olan bir form:

<form action=”demo_keygen.php” method=”get”>
Kullanıcı adı: <input type=”text” name=”usr_name”>
Şifreleme: <keygen name=”security”>
<input type=”submit”>
</form>

HTML5 <output> Elementi

<output> elementi bir hesaplamanın sonucunu gösterir (bir script gibi)

Örnek

Bir hesaplama yapmak ve sonucu <output> elementi içinde göstermek:

<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>

Related Articles

Leave a Reply

Check Also

Close
Close

Reklam Engelleme

Please consider supporting us by disabling your ad blocker