/dev/null Web Günlüğü: HTML5 Yeni Form Elementleri

25 Temmuz 2015 Cumartesi

HTML5 Yeni Form Özellikleri

HTML Dersleri
HTML5 Yeni Form Özellikleri

HTML5 <form> ve <input> için birkaç yeni özellik içerir.

HTML5 <form> için yeni özellikler:

<form> ve <input> autocomplete özelliği: Bir form yada input alanının autocomplete'sinin açık olup olmadıgını kontrol eder. autocomplete açık olduğunda, tarayıcı kullanıcının önceden girdiği değerlere göre alanları tamamlar. Autocomplete özelliği <form> ve takip eden <input> tipleri ile çalışır:text, search, url, tel, email, password, datepickers, range ve color.

<!DOCTYPE html>
<html>
<body>

<form action="#" autocomplete="on">
  İsim:<input type="text" name="isim"><br>
  Soyisim: <input type="text" name="soyad"><br>
  E-Posta: <input type="email" name="eposta" autocomplete="off"><br>
  <input type="submit">
</form>

</body>
</html>

Bu özellik Chrome, Safari, Firefox ve IE tarafından desteklenmektedir.

NOT: Bazı tarayıcılarda bu örneğin çalışması için "otomatik tamamlama" özelliğini aktifleştirmeniz gerekebilir.

<form> novalidate özelliği: Bir boolean özelliktir. (TRUE - FALSE) Var olduğunda, form gönderildiğinde <input> elementinin doğrulanıp doğrulanmayacağını belirler.

<!DOCTYPE html>
<html>
<body>

<form action="#" novalidate>
E-Posta: <input type="email" name="user_email">
<input type="submit">
</form>

</body>
</html>

Bu özellik Safari ve IE tarafından v9 öncesinde desteklenmemektedir.

HTML5 <input> için yeni özellikler:

<input> autofocus özelliği: Bir boolean özelliktir. (TRUE - FALSE) Var olduğunda, tarayıcının <input> elementine sayfa yüklendiğinde otomatik olarak odaklanmasını belirler.

<!DOCTYPE html>
<html>
<body>

<form action="#">
  İsim:<input type="text" name="ad" autofocus><br>
  Soyisim: <input type="text" name="soyad"><br>
  <input type="submit">
</form>

</body>
</html>

Bu özellik IE tarafından v9 öncesinde desteklenmemektedir.

<input> form özelliği: Bir <input> elementinin hangi form ya da formlara ait olduğunu belirtir.

<!DOCTYPE html>
<html>
<body>

<form action="#" id="form1">
İsim: <input type="text" name="ad"><br>
<input type="submit" value="Submit">
</form>
Soyisim: <input type="text" name="soyad" form="form1">

</body>
</html>

Bu özellik Chrome, Safari, Opera ve Firefox tarafından desteklenmektedir.

<input> formaction özelliği: <input> elementinin formun action özelliğini değiştirmesini sağlar. bir form gönderildiğinde giriş denetimi (input control) işleyecek bir dosyanın url'ni belirtir. Bu özellik type="submit" ve type="image" ile kullanılır.

<!DOCTYPE html>
<html>
<body>

<form action="form.php">
  İsim: <input type="text" name="ad"><br>
  Soyisim: <input type="text" name="soyad"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="admin.php" value="Submit as admin">
</form>

</body>
</html>

Bu özellik Chrome, Firefox, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.

<input> formenctype özelliği: form-data'nın sunucuya gönderilirken nasıl şifrelenmesi gerektiğini belirtir. formun enctype özelliğini değiştirmesini sağlar. Bu özellik type="submit" ve type="image" ile kullanılır.

<!DOCTYPE html>
<html>
<body>

<form action="post_enctype.php" method="post">
  İsim: <input type="text" name="ad"><br>
  <input type="submit" value="Gönder">
  <input type="submit" formenctype="multipart/form-data" value="Multipart/form-data Olarak Gönder">
</form>

</body>
</html>

Bu özellik Chrome, Firefox, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.

Devamı »

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.

Sayfalar

25 Temmuz 2015 Cumartesi

HTML5 Yeni Form Özellikleri

HTML5 Yeni Form Elementleri