HTML 5 Dersleri – Bölüm 9 – Form ve input özellikleri

HTML 5 Dersleri – Bölüm 9 – Form ve input özellikleri

Form attributes yani;

Yeni form özellikleri;

• autocomplete,
• novalidate

Yeni input özellikleri;

• autocomplete,
• autofocus,
• form,
• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget),
• height and width,
• list,
• min, max and step,
• multiple,
• pattern (regexp),
• placeholder,
• required,

Tarayıcı desteği;

autocomplete Özelliği

Form ya da giriş alanının(input field) autocomplete ile otomatik tamamlama özelliğine sahip olmasını sağlar.

Not; Form etiketi ile çalışır autocomplete. Ayrıca; input->text, search, url, telephone, email, password, datepickersi range ve color ile de kullanılır.

Bu özelliğe sahip olan bir alanda yazmaya başlayan kullanıcı, tarayıcı alandaki verileri doldurabilecek şeylere dair ayarları göstermeye başlayacaktır.

Örnek ve deneme adresi için;

<form action="demo_form.asp" method="get" autocomplete="on">
 First name: <input type="text" name="fname" /><br />
 Last name: <input type="text" name="lname" /><br />
 E-mail: <input type="email" name="email" autocomplete="off" /><br />
 <input type="submit" />
 </form>

Not; bazı tarayıcılarda aktif etmeniz gerekebilir bu özelliği.

 autofocus Özelliği

Sayfa yüklendiğinde otomatik olarak focus özelliği alır bu özelliği sahip olan input alanı.

Not; Tüm input elemanları ile çalışır.

Örnek ve deneme adresi için;

User name: <input type="text" name="user_name"  autofocus="autofocus" />

form Özelliği

Bu özellik kendisinin içinde olsa da olmasa da input alanları aitmiş gibi davranmasını sağlar id verilerek.

Not; tüm input türleri ile çalışır.

Örnek ve deneme adresi için;

<form action="demo_form.asp" method="get" id="user_form">

First name:<input type="text" name="fname" />

<input type="submit" />

</form>

Last name: <input type="text" name="lname" form="user_form" />

 Not; birden fazla forma yol vermek için, boşlukla ayrılmış liste kullanmalısınız.

 form override özellikleri

Bazı  özellik ayarlarında üst üste bindirme yapmanızı sağlar. Bunun aldığı özellikler ise;

• formaction – formaction özelliğinin üstüne biner
• formenctype –  form enctype özelliğinin üstüne biner
• formmethod – form method özelliğinin üstüne biner
• formnovalidate – form novalidate özelliğinin üstüne biner
• formtarget – form target özelliğinin üstüne biner

Örnek ve deneme adresi için tıklayın; 

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true"
value="Submit without validation" />
<br />
</form>

Not; override özelliği input girişlerindeki submit ve image ile beraber kullanılır. Ve farklı onay butonları oluşturmada işe yarar.

height ve width özellikleri

input type girişindeki image için yükseklik ve genişlikatamasını sağlarlar.

Not; sadece input type içindeki image’da çalışır.

Örnek ve denemek için adresi;

<input type="image" src="img_submit.gif" width="24" height="24" />

list özelliği

Bir input alanı için bir datalist açar. Bir datalist de bir seçenekler listesi içerir bir veri alanı için yani input alanı için.

Not; <input> types içindeki text, search, url, telephone, email, date pickers, number, range ve color ile beraber çalışır list.

Örnek ve deneme adresi için;

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

 min, max ve step özellikleri

Input türlerinden tarih ve sayı girişlerine sınırlamalar getirmek için kullanılırlar.

Max; girilebilecek maksimum değer,

Min; izin verilen girilebilecek en düşük değer,

step özelliği sayı artış ya da azalış aralığını belirler.

Not;<input type özelliklerinden tarih toplayıcıları, sayılar ve range ile kullanılır.

Örnek ve denemek için adresi;

Points: <input type="number" name="points" min="0" max="10" step="3" />

multiple özelliği

multiple özelliği bir input alanı için seçilebilen çoklu değerler sağlar.

Not; input types içindeki; email ve file ile kullanılır.

Örnek ve denemek için adresi;

Select images: <input type="file" name="img" multiple="multiple" />

novalidate

Bu özellik, onaya basıldığında verinin doğrulanmamasının gerektiğini belirtir.

Not; <form> ve devamındaki <input> türlerinden text, search, url, telephone, email, password, date pickers, range ve color ile çalışır.

Örnek ve denemek için adresi;

<form action="demo_form.asp" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

pattern özelliği

Bir kalıp, örnek kullanılarak bir input alanını doğrulamak için kullanılır.

Düzenli bir ifadedir pattern. Yani Javascript ile ilintilidir.

Not; <input> türlerinden text, search, url, telephone, email, ve password ile çalışır.

Örnek ve denemek için adresi;

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />

Placeholder Özelliği

Input giriş alanının umulan değerine dair ipucu verir.

Not; <input> türlerinden text, search, url, telephone, email, ve password ile çalışır. Alan boşken ipucu gözükür odaklanıldığında kaybolur.

Örnek ve denemek için adresi;

<input type="search" name="user_search"  placeholder="Search W3Schools" />

required özelliği

Onaylamadan önce doldurulma zorunluluğu olduğunu gösterir.

Not; Bu özellik <input> text, search, url, telephone, email, password, date pickers, number, checkbox, radio ve file ile kullanılır.

Örnek ve deneme için adresi;

Name: <input type="text" name="usr_name" required="required" />