Forms

இதுவரை எத்தகைய வடிவிலெல்லாம் தகவல்களை பயனர்களுக்கு வெளிப்படுத்துவது என்று பார்த்தோம். இப்போது படிவங்கள் மூலம் எவ்வாறு பயனர்களிடமிருந்து தகவல்களை பெற்றுக்கொள்வது என்று பார்க்கப்போகிறோம்.

<form> tag

ஒரு் படிவத்தை உருவாக்க <form> tag-ஐ <body>-க்குள் கொடுக்க வேண்டும். இதற்கான இணை tag படிவம் முடியும்போது இடம்பெறும். இந்த <form>-க்கு method மற்றும் action என்று இரண்டு பண்புகள் உள்ளன. method-க்கு post எனும் மதிப்பும், action-க்கு படிவத்தில் பூர்த்தி செய்யப்பட்ட விவரங்களை எங்கு அனுப்ப வேண்டும் எனும் மதிப்பும் பெற்றிருக்கும். இது பின்வருமாறு.

<form method=”post” action=”mailto:nithyadurai87@gmail.com“>

பொதுவாக action-ன் மதிப்பு ஒரு program-ஆகவோ அல்லது database-ஆகவோ இருக்கும். ஆனால் இங்கு நாம் சுலபமாகப் புரிந்து கொள்வதற்காக mailto எனும் command-ஐப் பயன்படுத்தியுள்ளோம். அதாவது படிவத்தில் பூர்த்திசெய்யப்பட்ட விவரங்கள் mailto command-ல் உள்ள மின்னஞ்சல் முகவரிக்குச் சென்றுவிடும்.

அடுத்தபடியாக பயனர்களிடமிருந்து விவரத்தைப் பெற்றுக்கொள்வதற்குப் பயன்படும் ஒவ்வொரு விதமான tags-ஐயும் பின்வருமாறு பார்க்கலாம்.

<input> tag

பயனர்களிடமிருந்து எழுத்துக்கள் எண்கள் போன்ற வகையான தகவல்களைப் பெற்றுக்கொள்ள <input> tag பயன்படும். இதற்கு type மற்றும் name என்று இரண்டு பொதுவான பண்புகள் உள்ளன. type-ஆனது பெற்றுக்கொள்ளப்போவது எவ்வகை விவரம் எனும் மதிப்பினையும், name-ஆனது பெற்றுக்கொண்ட விவரத்துக்கு ஒரு் பெயரையும் அளிக்கப் பயன்படுகிறது.

Text box

உதாரணத்துக்கு ஒருவரது பெயர் மற்றும் தொலைபேசி எண் போன்ற விவரத்தை பெற்றுக்கொள்வதற்கான இரண்டு input tags பின்வருமாறு அமையும்.

<input type=”text” size=”25″ name=”name”/>

<input type=”text” size=”10″ name=”ph”/>

இங்கு பெற்றுக்கொள்ளப்போகும் விவரம் எழுத்துக்கள் மற்றும் எண்கள் வடிவில் இருப்பதனால், இரண்டு input tag-க்கும் type-ன் மதிப்பு text என்று உள்ளது.

மேலும் முதல் input-க்கு name எனும் பெயரும், அடுத்த input-க்கு ph எனும் பெயரும் அளிக்கப்பட்டுள்ளது. அடுத்தபடியாக size எனும் பண்பு முதல் input-ல் ஒரு் பெயர் 25 எழுத்துக்கள் வரை இருக்கலாம் எனும் விவரத்தையும், அடுத்த input-ல் ஒரு் தொலைபேசி எண் 10 எண்கள் வரை இருக்கலாம் எனும் விவரத்தையும் அளிக்கிறது.

இங்கு ஒவ்வொரு input tag-ம் இணை tag ஏதுமின்றி அதனிறுதியில் / ஐப் பெற்று முடிக்கப்படுவதைக் காணலாம். எனவே இவை self closing tags என்றழைக்கப்படும்.

இதுபோன்று வெறும் இரண்டு input tags-ஐ மட்டும் program-ல் கொடுக்கும்போது அவை திரையில் வெறும் இரண்டு பெட்டிகளை மட்டும் வெளிப்படுத்தும். இந்த இரண்டு பெட்டிகளும் எதற்காக என்று பயனர்களுக்குத் தெரியாதல்லவா. அதற்காக ஒவ்வொரு input tag-ன் முன்னரும் பின்வருமாறு கொடுக்கலாம்.

Name <input type=”text” size=”25″ name=”name”/>

Phone Number <input type=”text” size=”10″ name=”ph”/>

இவை பயனர்களின் வசதிக்காக மட்டுமேயன்றி வேறு எதற்கும் கிடையாது. பயனர்கள் அளித்த விவரங்களெல்லாம் name எனும் பண்பில் உள்ள பெயரினால் மட்டுமே குறிக்கப்படும். உதாரணம்.

Name = Kaviyan

Ph = 4839403892

Radio button

இரண்டு விவரத்தைக் கொடுத்து அதில் ஏதேனும் ஒன்றை தேர்வு செய்ய radio button பயன்படும். உதாரணத்துக்கு ஒருவர் ஆணா பெண்ணா எனும் விவரத்தை அவர்களையே type செய்ய சொல்லுவதற்கு பதிலாக, “ஆண்” , “பெண்” எனும் இரண்டு radio buttons-ஐக் கொடுத்து அதில் ஏதேனும் ஒன்றை தேர்வு செய்யுமாறு சொல்லலாம். இதற்கான input tag பின்வருமாறு அமையும்.

<input type=”radio” name=”sex” value=”M”/>

<input type=”radio” name=”sex” value=”F”/>

இவை திரையில் வெறும் இரண்டு radio button-களை மட்டுமே வெளிப்படுத்தும். எனவே எந்த button எதற்காக எனப் பயனர்கள் புரிந்து கொள்ள ஒவ்வொரு tag-க்கும் முன்னர் பின்வருமாறு கொடுக்கலாம். இவையும் பயனர்களின் புரிதலுக்காக மட்டுமே.

Male <input type=”radio” name=”sex” value=”M”/>

Female <input type=”radio” name=”sex” value=”F”/>

இங்கு value எனும் பண்பு ஒவ்வொரு option-க்கும் உரிய மதிப்பினைக் கொண்டிருக்கும். உதாரணத்துக்கு இரண்டாவது option-ஐ தேர்வு செய்தால் “F” எனும் மதிப்பு name எனும் பண்பில் உள்ள பெயரினால் குறிக்கப்பட்டு மின்னஞ்சலில் பின்வருமாறு செலுத்தப்படும்.

sex = F

முதல் option-ஆனது default-ஆக தேர்வு செய்யப்பட்ட நிலையிலேயே இருக்குமாறு அமைக்க விரும்பினால், அதனிறுதியில் ‘checked’ எனும் வார்த்தையை மட்டும் இணைத்தால் போதுமானது. இது பின்வருமாறு.

Male <input type=”radio” name=”sex” value=”M” checked/>

Checkboxes

இரண்டுக்கும் மேற்பட்ட விவரங்களைக் கொடுத்து அதிலிருந்து ஒன்றுக்கும் மேற்பட்ட விவரங்களைத் தேர்வு செய்யுமாறு அமைக்க விரும்பினால் checkboxes-ஐப் பயன்படுத்தலாம். உதாரணத்துக்கு தமிழ், ஆங்கிலம், இந்தி எனும் 3 மொழிகளில் ஒருவருக்கும் எந்தெந்த மொழிகளெல்லாம் தெரியும் எனும் விவரத்தைப் பெற்றுக்கொள்ள விரும்பினால், அதற்கான input tag பின்வருமாறு அமையும்.

<input type=”checkbox” name=”Language” value=”Tamil” />

<input type=”checkbox” name=”Language” value=”English”/>

<input type=”checkbox” name=”Language” value=”Hindi”/>

இவை மூன்று குட்டி குட்டி பெட்டிகளை மட்டுமே திரையில் வெளிப்படுத்தும். எனவே எந்த பெட்டி எந்த மொழிக்காக எனக் குறிப்பிடும் வகையில் ஒவ்வொரு input tag-க்கும் முன்னர் அந்தந்த மொழிகளின் பெயர்களை குறிப்பிடலாம்.

இங்கும் value எனும் பண்பு ஒவ்வொரு checkbox-க்கும் உரிய மதிப்பினைக் கொண்டிருக்கும். உதாரணத்துக்கு முதல் இரண்டு checkboxes-ஐ தேர்வு செய்தால் அந்தத் தகவல்களெல்லாம் பின்வருமாறு செலுத்தப்படும்.

Language = Tamil

Language = English

முதல் checkbox-ஆனது default-ஆக தேர்வு செய்யப்பட்ட நிலையிலேயே இருக்குமாறு அமைக்க விரும்பினால், அதனிறுதியில் ‘checked’ எனும் வார்த்தையை மட்டும் இணைத்தால் போதுமானது. இது பின்வருமாறு.

<input type=”checkbox” name=”Language” value=”Tamil” checked/>

Submit & Reset buttons

<input> tag-ன் type எனும் பண்பினை ‘Submit’ என்று கொடுக்கும்போது, படிவத்தில் நாம் பூர்த்தி செய்த விவரங்கள் அனைத்தும், படிவத்தின் action எனும் பண்பில் என்ன குறிப்பிடப்பட்டுள்ளதோ அதற்கேற்ப செயல்படும். ‘Reset’ என்று கொடுக்கும்போது படிவத்தில் பூர்த்தி செய்த விவரங்கள் அனைத்தும் நீக்கப்பட்டுவிடும்.

<input type=”submit”/>

<input type=”reset”/>

மேற்கூறியவாறு நாம் கொடுக்கும்போது, திரையில் வெறும் இரண்டு buttons மட்டும் வெளிப்படும். எனவே எந்த button எதற்காக எனப் பயனர்கள் புரிந்து கொள்வதற்காக value எனும் பண்பினை நாம் இணைக்க வேண்டும். இது பின்வருமாறு.

<input type=”submit” value=”ok”/>

<input type=”reset” value=”cancel”/>

இப்போது ஒரு button-ன் மேல் ‘OK’ என்றும், அடுத்த button-ன் மேல் ‘cancel’ என்றும் பயனர்களின் வசதிக்காக எழுதப்பட்டிருக்கும்.

<select> tag

ஒரு் drop-down list-ஐ உருவாக்கி அதிலிருந்து மதிப்புக்களை தேர்வு செய்ய விரும்பினால், <select> tag-ஐப் பயன்படுத்தலாம். இதற்கு இணை tag உண்டு. மேலும் name மற்றும் size என்று இரண்டு விதமான பண்புகளைப் பெற்றிருக்கும். name-ல் நாம் தேர்ந்தெடுக்கும் option-க்கு ஒரு் பெயரும், size-ல் எத்தனை option-களைக் கொடுக்கப் போகிறோம் எனும் எண்ணிக்கையும் இருக்கும். list-க்குள் இடம்பெறப்போகும் ஒவ்வொரு விவரமும் <option> எனும் இணை tag-க்குள் காணப்படும்.

உதாரணத்துக்கு 3 நகரத்தின் பெயர்களை ஒரு் drop-down list-ல் கொடுத்து, அதிலிருந்து ஒன்றை தேர்வு செய்வதற்கான code பின்வருமாறு அமையும்.

<select name=”city” size=”3″>

<option>Chengalpattu</option>

<option>Kanchipuram</option>

<option>Tambaram</option>

</select>

ஒன்றுக்கும் மேற்பட்ட விவரத்தை தேர்வுசெய்யுமாறு அமைக்க விரும்பினால், select tag-க்குள் multiple எனும் வார்த்தையை இணைத்தால் போதுமானது.

<select name=”city” size=”3″ multiple>

முதல் option-ஆனது default-ஆக தேர்வு செய்யப்பட்ட நிலையிலேயே இருக்குமாறு அமைக்க விரும்பினால், option tag-க்குள் selected எனும் வார்த்தையை இணைத்தால் போதுமானது.

<option selected>Chengalpattu</option>

<textarea> tag

ஒன்றுக்கும் மேற்பட்ட பல வரிகளைக் கொண்ட “கருத்துக்கள்” அல்லது “முகவரி” போன்ற விவரங்களைப் பயனர்களிடமிருந்து பெற்றுக்கொள்ள <textarea> tag பயன்படும். இதற்கு இணை tag உண்டு. மேலும் rows மற்றும் cols என்று இரண்டு பண்புகளைப் பெற்றிருக்கும். rows-ல் வரிகளின் எண்ணிக்கையும், cols-ல் அவற்றின் அகலமும் இடம்பெறும்.

மேற்கூறிய அனைத்து tag-ஐயும் பயன்படுத்தி உருவாக்கப்பட்ட ஒரு் program-ஐ பின்வருமாறு காணலாம்.

File: form.htm

<html>
<head><title></title></head>
<body>
<form method=”post” action=”mailto:nithyadurai87@gmail.com“>
<pre>
Name:<input type=”text” size=”25″ name=”name”/>
Phone:<input type=”text” size=”10″ name=”ph”/>

Sex:
Male<input type=”radio” name=”sex” value=”M” checked/>
Female<input type=”radio” name=”sex” value=”F”/>

Languages Known:
Tamil<input type=”checkbox” name=”Language” value=”Tamil” checked/>
English<input type=”checkbox” name=”Language” value=”English”/>
Hindi<input type=”checkbox” name=”Language” value=”Hindi”/>

City:
<select name=”city” size=”3″ multiple>
<option selected>Chengalpattu</option>
<option>Kanchipuram</option>
<option>Tambaram</option></select>

Address:
<textarea name=”address” rows=5 cols=25></textarea>

<input type=”submit” value=”ok”/>
<input type=”reset” value=”cancel”/>
</pre>
</form>
</body>
</html>