autofocus etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
autofocus etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

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.

Copyright 2013-2017 | İbrahim BAYRAKTAR /dev/null Web Günlüğü