அறிமுகம்
இந்த
கட்டுரையில் html5 –ல் இன்புட் எலெமென்ட்ஸ் பற்றி காண இருக்கின்றோம்
Input
Type Range
input type=range ஆனது இன்புட்டை குறிப்பிட்ட வரையரைக்குள் கொடுக்க செய்கின்றது.
உதாரணமாக ஒருவரின் வயதை இன்புட் வாங்குகின்றோம். அவ்வாறு வாங்கும் பொழுது அது
18-ல் இருந்து 35-க்குள் இருக்க வேண்டுமென்றால் கீழே உள்ளவாறு எழுதலாம்.
<input type="range" name="age" min="18" max="35" />
Input
Type URL
Url
டைப்பானது இண்டெர்னெட் தள முகவரிகளை இன்புட் வாங்க பயன்படுகின்றது, மேலும் அது url
ஃபார்மட்டில் இல்லையென்றால் பிழை சுட்டப்படுகின்றது.
1.
<input type="url" name="mainpage" />
Input
Type email
Email
டைப்பானது
இமெயில் முகவரியை உள்ளீடு பெற
பயன்படுகின்றது.உள்ளீடு இமெயில் ஃபார்மட்டில் இல்லை என்றால் பிழை சுட்டப்படுகின்றது.
1.
<input type="email" name="emailid" />
Input
Type number
Number
டைப்பானது
எண்களை மட்டும் உள்ளீடாக பெற பயன்படுகின்றது. மேலும் அதன் மினிமம்வேல்யூ,
மேக்ஸிமம் வேல்யூ இரண்டையும்
குறிப்பிடலாம்.
<input type="number" name="quantity" min="1" max="5" />
Input
Type Tel
இந்த
டைப்பானது தொலைபேசி எண்களை இன்புட் ஆக பெற பயன்படுகின்றது. மேலும் நாம் இன்புட்
கொடுப்பது தொலைபேசி எண் தானா என்பதையும் வேலிடேட் செய்கின்றது.
1.
<input type="tel" name="usrtel" />
Form
Element <datalist>
Datalist
எலெமெண்ட்
ஆனது ஆட்டோ கம்ப்ளீட் தன்மையை இன்புட் எலெமென்டிற்கு தர உதவுகின்றது. நாம்
கொடுக்கும் உள்ளீடு டிராப் டவுன் லிஸ்டில் இருந்தால் அதை ஆட்டோ கம்ப்ளீட்
செய்கின்றது.
இன்புட்
எலெமெண்டின் list ஆட்ரிபுயூட் ஆக datalist குறிப்பிட படுகின்றது.
1.
<input type="text" name="srch" id="srch" list="datalist1"/>
2.
<datalist id="datalist1">
3.
<option value="India">
4.
<option value="Indonesia">
5.
<option value="USA">
6.
<option value="UK">
7.
<option value="Uganda">
8.
<option value="Russia">
9.
<option value="Brazil">
10.
</datalist>
Form
Element <keygen>
இந்த
எலெமெண்ட் ஆனது பயனர்களை ஆதண்டிகேட் செய்ய
பயன்படுகின்றது. இந்த டேக் ஆனது ஒரு key-pair ஜெனரேட்டட்ர் ஃபீல்டை
குறிப்பிடுகின்றது. ஃபார்ம் ஆனது சப்மிட் செய்யும் பொழுது இரண்டு கீ ஆனது
உருவாக்கப்படுகின்றது. ஒன்று பப்ளிக் மற்றொன்று பிரைவேட்.பிரைவேட் கீ ஆனது லோக்கலிளும்
பப்ளிக் கீ ஆனது சர்வரிலும் சேமிக்கப்படுகின்றது.எதிர்காலத்தில் பப்ளிக் கீ ஆனது
பயனரை ஆதண்டிகேட் செய்ய கிளையண்ட் சர்டிஃபிகேட்டை ஜெனரேட் செய்கின்றது.
1.
<input type="text" name="usr_name" /> Encryption: <keygen name="security" />
<input>
autofocus Attribute
இந்த பண்பானது
வெப் பக்கம் லோட் ஆகும் பொழுது ஃபோக்கஸ் அந்த எலெமெண்டின் மீது வர பயன்படுகின்றது.
1.
<input type="text" name="firstname" id="firstname" required="required" autofocus="true"/>
<input>
placeholder Attribute
இந்த பண்பானது
ஒரு எலிமெண்டின் உள்ளீடாக எதை தர வேண்டும் என்ற ‘hint’ தர பயன்படுகின்றது. இந்த
hint ஆனது இன்புட் எலெமென்டின் மீது அதில் இன்புட் கொடுப்பதற்கு முன்னால்
காண்பிக்கப்படுகின்றது.
1.
<input type="number" name="age" min="18" max="25" placeholder="18-35"/>
<input>
required Attribute
இந்த
பண்பானது பூலியன் மதிப்பை பயன்படுத்துகின்றது, இது true எனில் அந்த எலெமெண்டிற்கு
கட்டாயம் இன்புட் கொடுத்தே ஆக வேண்டும்.இது பின் வரும் எலெமெண்டுகளில் பயன்
படுகின்றது.
:
text, search, URL, tel, email, password, date pickers, number, checkbox, radio,
and file.
1.
<input type="text" name="firstname" id="firstname" required="required" autofocus="true"/>
இப்பொழுது நாம் பார்த்த எல்லா எலெண்டுகளையும் நிரலாக்
எழுது வோம்.
1.
<body>
2.
<form action="mainpage.htm">
3.
<h1 style="margin-left: 680px">HTML5 Forms</h1>
4.
<table id="table1"; cellspacing="5px" cellpadding="5%"; align="center" >
5.
<tr>
6.
<td align="right" >First Name:*</td>
7.
<td class="style3" ><input type="text" name="firstname" id="firstname" required="required" autofocus="true"/></td>
8.
</tr>
9.
<tr>
10.
<td align="right">Last Name:*</td>
11.
<td class="style3"><input type="text" name="lastname" id="lastname" required="required"/></td>
12.
</tr>
13.
<tr>
14.
<td align="right">Fathers Name:</td>
15.
<td class="style3" ><input type="text" name="fname" id="fname" /></td>
16.
</tr>
17.
<tr>
18.
<td align="right" >Age:</td>
19.
<td class="style3" ><input type="number" name="age" min="18" max="25" placeholder="18-35"/></td>
20.
</tr>
21.
<tr>
22.
<td align="right" >Username:</td>
23.
<td class="style3" ><input type="text" name="usr_name" /> Encryption:<keygen name="security" /></td>
24.
</tr>
25.
<tr>
26.
<td align="right">Email</td>
27.
<td class="style3"> <input type="email" name="usremail" />
28.
</td>
29.
</tr>
30.
<tr>
31.
<td align="right">Mobile Number</td>
32.
<td class="style3"> <input type="tel" name="usrtel" />
33.
</td>
34.
</tr>
35.
<tr>
36.
<td align="right" >Country:</td>
37.
<td class="style3" ><input type="text" name="srch" id="srch" list="datalist1"/>
38.
<datalist id="datalist1">
39.
<option value="India">
40.
<option value="Indonesia">
41.
<option value="USA">
42.
<option value="UK">
43.
<option value="Uganda">
44.
<option value="Russia">
45.
<option value="Brazil">
46.
</datalist></td>
47.
</tr>
48.
<tr>
49.
<td align="right" >Homepage</td>
50.
<td class="style3"> <input type="url" name="homepage" />
51.
</td>
52.
</tr>
53.
<tr>
54.
<td>
55.
<input type="submit" name="Submit" style="width: 88px" /></td>
56.
</tr>
57.
</table>
58.
</form>
59.
</body>
நன்றி.
முத்து
கார்த்திகேயன்,மதுரை.
contact number: 91 96293 29142.
Ellis nagar,Madurai
No comments:
Post a Comment