HTML5 Yeni Form Elementleri

HTML Dersleri   
HTML5 Yeni Form Elementleri

Bu dersimizde HTML5'in yeni form elementleri olan <datalist>, <keygen> ve <output> elementlerini inceleyeceğiz.

<datalist> Elementi: Düzenlenebilir elementlere otomatik tamamlama (autocomplete) drop-down özelliği sağlamak için yani input elementlerine ön tanımlı değerler vermek için kullanılır. 
<!DOCTYPE html>
<html>
<head>
         <title>DATALIST ORNEK</title>
</head>

<body>
<p>
     <input type="text" name="ARA" id="ARA" placeholder="GIRIS YAP" list="ARA_LIST" autocomplete="off">
     <datalist id="ARA_LIST">
               <option>JAVA</option>
               <option>C SHARP</option>
               <option>PASCAL</option>
               <option>COBOL</option>
     </datalist>
</p>

</body>
Bu özellik Safari ve IE tarafından v9 öncesinde desteklenmemektedir. 

Örneğimizde <datalist> elementi bilgi girişinde kullanıcıya kolaylık sağlamak amacıyla bir drop down menu içinde bilgi giriş seçeneklerini listelemiştir. Ayrıca bir harf girilirse, menüdeki sadece o harf ile ilişkili seçenekler listelenecektir. <datalist> kullanmak için <datalist> elementinin id'si ile input etiketinin list özniteliği aynı değerlere sahip olmalıdır.

<keygen> Elementi: Formlar için bir çift anahtar oluşturur. Yani bir form içerisinde bir anahtar çifti (key-pair) jeneratörü belirtir. Daha basit açıklamak gerekirse kullanıcılara kimlik doğrulaması yapmak çin güvenli bir yol sağlar. Form gönderildiğinde 2 ayrı key üretilir, bir özel (private key) ve bir açık (public key). Özel key yerel olarak depolanırken, açık key sunucuya bir istemci sertifikası üretip kullanıcı doğrulaması yapması için gönderilir.
<!DOCTYPE html>
<html>
    <head>
        <title>Kullanıcı Kontrolü</title>
    </head>
    <body>
        <form action="keygen.php" method="post">
            Kullanici Adi: <input type="text" name="text">
            Kodlama: <keygen name="key">
            GONDER:<input type="submit" name="submit" >
        </form>
    </body>
</html>
Bu özellik Chrome, Safari, Firefox ve Opera tarafından desteklenmektedir. 

<output> Elementi: Bir işlemin sonucunu temsil eder. Yani formdaki elemanların değerleri kullanılarak bir hesaplama yapılır ve bu hesaplamanın sonucu yine formda kullanılacak olursa output elemanı kullanılır. 
<!DOCTYPE html>
<html>
<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>
Bu özellik Chrome, Safari, Firefox ve Opera tarafından desteklenmektedir.