HTML5

2. Bölüm : Yeni form tagları ve form doğrulama

Yeni form özelliği (form attribute)

Form giriş elemanlarının artık <form> tagı içinde olma zorunluluğu yok.

<form id="html5Form">
   <input type="text"></input>
   <input type="submit" value="Gönder"></input>
</form>
<input type="text" form="html5Form"></input>
Number form elemanı
(min="0" max="100" step="5")

<input type="number" required="true" min="0" max="100" step="5" />
Range form elemanı


<input type="range" min="0" max="10" id="rangeInp" />
Date, Time ve DateTime form elemanları
Date :
Time :
DateTime :

<input type="date" required="true" />
<input type="time" required="true" />
<input type="datetime" required="true" />
Month ve Week form elemanı



<input type="month" required="true" />
<input type="week" required="true" />
Email form elemanı


<input type="email" multiple="true" required="true" />
Url form elemanı


<input type="url" required="true" />
Tel form elemanı


<input type="tel" placeholder="+90.2129999999" pattern="^\+([\d]{0,3})\.([\d]{7,10})$" />
Color form elemanı


<input type="color" />
Search form elemanı


<input type=search results=5 name=search1 autosave="merhanersoy.net" />
Output form elemanı



<input type="range" min="0" max="10" name="range1" />
<output form="outputForm" onforminput="this.value=range1.value;"></output>
DataList elemanı ve list özelliği

<input type="text" list="searchList" />
<datalist id="searchList">
   <option label="html5" value="html5">
   <option label="css3" value="css3">
</datalist>
Form elemanlarına yeni özellikler
Doğrulama APIsi






<input name="url1" type="url" required="true" />
<button onclick="alert('Url form elemanı doğrulanacak mı : ' + url1.willValidate); return false;">Url elemanı doğrulanacak mı ?</button>
<button onclick="url1.setCustomValidity(url1.value + ' uygun bir URL değil.');return false;">Doğrulama mesajını değiştir</button>
<button onclick="alert('Girilen değer uygun mu : ' + url1.checkValidity()); return false;">Girilen değer uygun mu ?</button>
<button onclick="alert('Url form elemanının uygunluk durumu : ' + url1.validity.valueMissing); return false;">Uygunluk durumu</button>

validity özelliği aşağıdaki değerleri alabilen ValidityState nesnesi döner :
Linkler

1. Modernizr