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.
<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.
Hiç yorum yok:
Yorum Gönder