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.
<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.
<input> formmethod özelliği: <input> elementinin formun method özelliğini değiştirmesini sağlar. eylem URL'sine form-data göndermek için HTTP yöntemini tanımlar. Bu özellik type="submit" ve type="image" ile kullanılır.
<!DOCTYPE html> <html> <body> <form action="form.php" method="get"> isim: <input type="text" name="ad"><br> Soyisim: <input type="text" name="soyad"><br> <input type="submit" value="Submit"> <input type="submit" formmethod="post" formaction="post.php" value="Submit using POST"> </form> </body> </html>
Bu özellik Chrome, Firefox, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.
<input> formnovalidate özelliği: Bir boolean özelliktir. Var olduğunda, <input> elementinin doğrulanıp doğrulanmayacığını belirler. Formnovalidate özelliği type="submit" ile kullanılabilir.
<!DOCTYPE html> <html> <body> <form action="form.php"> E-Posta: <input type="email" name="userid"><br> <input type="submit" value="Submit"><br> <input type="submit" formnovalidate value="Submit without validation"> </form> </body> </html>
Bu özellik Chrome, Firefox ve Opera tarafından desteklenmektedir. Safari ve IE tarafından v9 öncesinde desteklenmemektedir.
<input> formtarget özelliği: <input> elementinin formun target özelliğini değiştirmesini sağlar. 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="Normal Gönder"> <input type="submit" formtarget="_blank" value="Yeni Pencerede/Sekmede Aç"> </form> </body> </html>
Bu özellik Chrome, Firefox, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.
<input> height (yükseklik) ve width (genişlik) özelliği: <input> elementinin genişliğini ve yüksekliğini belirler. height ve width özelliği sadece <input type="image"> ile kullanılabilir.
<!DOCTYPE html> <html> <body> <form action="form.php"> İsim: <input type="text" name="ad"><br> Soyisim: <input type="text" name="soyad"><br> <input type="image" src="submit.png" alt="Submit" width="48" height="48"> </form> </body> </html>
<input> list özelliği: Önceden hazırlanmış <datalist> opsiyonlarını kullanmasını belirler.
<!DOCTYPE html> <html> <body> <form action="form.php" method="get"> <input list="browsers" name="Tarayıcı"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> </body> </html>
Bu özellik Chrome, Firefox, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.
<input> min ve max özelliği: <input> elementinin minimum ve maximum değerlerini belirler. Min ve Max özelliği sadece belli input tipleri ile çalışır: number, range, date, datetime, datetime-local, month, time and week.
<!DOCTYPE html> <html> <body> <form action="form.php"> 01-01-1982'den önce bi tarih girin: <input type="date" name="bday" max="1981-12-31"><br> 01-01-2015'den sonra bir tarih girin: <input type="date" name="bday" min="2015-01-02"><br> 10 ile 50 arasında bir değer girin: <input type="number" name="quantity" min="10" max="50"><br> <input type="submit"> </form> </body> </html>
max and min özelliği IE v9 öncesinde ve ve Firefox tarafından desteklenmemektedir.
max and min özelliği, tarih ve saat için IE v10 tarafından desteklenmemektedir.
max and min özelliği, tarih ve saat için IE v10 tarafından desteklenmemektedir.
<input> multiple özelliği: Bir boolean özelliktir. <input> elementinin birden fazla değer alabileceğini belirler.
<!DOCTYPE html> <html> <body> <form action="form.php"> Lütfen Resimleri seçiniz: <input type="file" name="img" multiple> <input type="submit"> </form> <p>Birden fazla dosya seçiniz...</p> </body> </html>
Bu özellik Chrome, Firefox, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.
<input> pattern özelliği: <input> elementlerinin değerinin standart bir değere karşı kontrol edilmesini belirler.
<!DOCTYPE html>
<html>
<body>
<form action="form.php">
Ülke kodu: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Üç karakterli ülke kodu">
<input type="submit">
</form>
</body>
</html>
Bu özellik Chrome, Firefox, ve Opera tarafından desteklenmektedir. Safari ve IE v9 öncesinde desteklenmemektedir.
<input> placeholder özelliği: input, textarea gibi form elemanlarının içine açıklama girebilir kullanıcı veri girişine başladığı an açıklamanın kaybolmasını sağlayabilirsiniz.
<!DOCTYPE html> <html> <body> <form action="form.php"> <input type="text" name="fname" placeholder="İsim Giriniz"><br> <input type="text" name="lname" placeholder="Soyisim Giriniz"><br> <input type="submit" value="Submit"> </form> </body> </html>
Bu özellik Chrome, Firefox, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.
<input> required özelliği: Form elementinin boş bırakılmasını önleyebilirsiniz. Bir boolean özelliktir.
<!DOCTYPE html> <html> <body> <form action="form.php"> Kullanıcı adı: <input type="text" name="usrname" required> <input type="submit"> </form> </body> </html>
Bu özellik Chrome, Firefox, ve Opera tarafından desteklenmektedir. Safari ve IE v9 öncesinde desteklenmemektedir.
<input> step özelliği: <input> elementinin sayı aralıklarını belirler. Bir gerçek değerler aralığı oluşturmak için step özelliği max and min özellikleri ile kullanılabilir.
<!DOCTYPE html> <html> <body> <form action="form.php"> Kullanıcı adı: <input type="text" name="usrname" required> <input type="submit"> </form> </body> </html>
Bu özellik Chrome, Safari, ve Opera tarafından desteklenmektedir. Firefox ve IE v9 öncesinde desteklenmemektedir.
Hiç yorum yok:
Yorum Gönder