23 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>

   

http://i1.wp.com/i.imgur.com/0YLZTVs.jpg?w=665
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 />

 

License

Icon for the Creative Commons Attribution-ShareAlike 4.0 International License

எளிய தமிழில் HTML by து. நித்யா is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, except where otherwise noted.

Feedback/Errata

Leave a Reply

Your email address will not be published.