HTML5-ன் புது input வசதிகள்:
<form>-க்குள் <input> என்பது பயனர்களிடமிருந்து விவரங்களை உள்ளீடாகப் பெற உதவும் ஓர் வகை ஆகும். HTML5-ல் பின்வரும் பல <input> வகைகள் அறிமுகப்படுத்தப்பட்டுள்ளன.
color: பல்வேறு நிறங்களை கொடுத்து அதிலிருந்து ஒரு நிறத்தை தேர்ந்தெடுக்க உதவும் நிறக்கருவி
date: calender-ஐ வெளிப்படுமாறு செய்து அதிலிருந்து ஒரு தேதியை தேர்ந்தெடுக்க உதவும் கருவி
datetime: தேதி மற்றும் நேரத்தை தேர்ந்தெடுக்க உதவும் கருவி
email: மின்னஞ்சல் முகவரியை மட்டும் பெற உதவும் வகை
month: மாதம் வருடம் மற்றும் தேதி பெற உதவும் வகை
number: எண்களை மட்டும் உள்ளீடாகப் பெறும் வகை. min, max மதிப்புகளைத் தரலாம்.
range: min, max மதிப்புகளுக்கிடையே உள்ள எண்களை மட்டும் ஒரு தொகுப்பாகப் பெற உதவும் வகை.
search: தேடு பெட்டி அமைக்க உதவும் வகை
tel: தொலைபேசி எண் மட்டும் பெற உதவும் வகை
time: நேரம் மட்டும் பெற உதவும் வகை
url : இணையதள/பக்க முகவரிகள் மட்டும் பெறும் வகை
week : வாரம் வருடம் மட்டும் பெறும் வகை
உதாரணம் :
<div>
<h3>type="color"</h3>
<input type="color" name="color">
</div>
<div>
<h3>type="date"</h3>
<input type="date" name="date">
</div>
<div>
<h3>type="datetime"</h3>
<input type="datetime" name="datetime">
</div>
<div>
<h3>type="datetime-local"</h3>
<input type="datetime-local" name="datetime-local">
</div>
<div>
<h3>type="email"</h3>
<input type="email" name="email">
</div>
<div>
<h3>type="month"</h3>
<input type="month" name="month">
</div>
<div>
<h3>type="number"</h3>
<input type="number" name="number">
</div>
<div>
<h3>type="range"</h3>
<input type="range" id="range" name="range">
<output for="range" id="output"></output>
</div>
<div>
<h3>type="search"</h3>
<input type="search" name="search" results="5" autosave="saved-searches">
</div>
<div>
<h3>type="tel"</h3>
<input type="tel" name="tel">
</div>
<div>
<h3>type="time"</h3>
<input type="time" name="time">
</div>
<div>
<h3>type="url"</h3>
<input type="url" name="url">
</div>
<div>
<h3>type="week"</h3>
<input type="week" name="week">
</div>
<div>
<input type="submit" value="Send">
</div>
HTML5-ல் புது input attributes சேர்க்கப்பட்டுள்ளன.
1. Autofocus – ஒரு இணைய பக்கத்தை திறந்தவுடன் mouse cursor-ஐ வைத்திருக்கும் பெட்டியை குறிப்பிடுகிறது.
2. Placeholder – பயனர் தர வேண்டிய தகவல் பற்றிய விவரம் தரும் வகை.
required : இதைக் குறிப்பிட்டுள்ள பெட்டியில் பயனர் கண்டிப்பாகத் தகவலைத் தர வேண்டும்.
form : input பெட்டியானது எந்த form-ஐ சேர்ந்தது எனக் குறிப்பிட உதவுகிறது.
height : உயரம்
width : அகலம்
pattern : ஒரு regular expression தந்து அதன்படி மட்டுமே தகவலைப் பெற உதவுகிறது.
சில Boolean வகையான attribute-களுக்கு வெறும் பெயர் மட்டும் தந்தாலே போதும். True, False என்று சொல்ல வேண்டியதில்லை. autofocus=’autofocus’ என்று சொல்லாமல் வெறும் autofocus என்று சொன்னாலே போதும்..
உதாரணங்கள்
<input type="text" autofocus />
<input type="text" placeholder =”some text” />
<input type="text" required />