webdevlinux - logo Web Dev Linux

ආකෘති පත්‍ර (Forms)

HTML භාවිතා කර ආකෘති පත්‍ර (forms) නිර්මාණය කරන ආකාරය පිළිබඳව මෙහිදී සලකා බැලේ.

HTML forms HTML form element

වෙබ් පිටුවක ඇති ආකෘති පත්‍රයක් පුරවා submit කල පසු එහි ඇති දත්ත server එක වෙත යවනු ලැබේ. එහිදී එම දත්ත Database එකක ගබඩා කිරීම සිදු කල හැකිය. ඒ සඳහා PHP, JSP සහ ASP වැනි භාෂාවක් යොදා ගැනේ. ඉදිරියේදී මේ පිලිබඳව වැඩි විස්තර වෙනත් පාඩමකින් ඉගෙනගනිමු. HTML භාෂාවෙන් අපට සිදු කල හැක්කේ ආකෘති පත්‍ර නිර්මාණය කිරීම පමණි.

පහත උදාහරණය අත්හදා බලන්න.

FILE : forms.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Forms</title>
</head>
<body>
<form>
	Your Name : <input><br>
	Your Nick Name : <input type="text"><br>
	Your Favorite Color : <input type="color"><br>
	Your Linux Knowledge : Low <input type="range"> High<br>
	Upload Your Photo : <input type="file"><br>
	<input type="submit"> <input type="reset">
</form>
</body>
</html>

පැහැදිලිකිරීම

ඉහත උදාහරණයේ ඇති elements පිළිබදව පැහැදිලිකිරීම පහලින් දක්වා ඇත.

<form></form>
මෙය ආකෘති පත්‍රයක් නිරූපණය කිරීමට යොදාගනී.
<input>
මෙය බහුකාර්ය element එකකි. type attribute එකෙහි විවිධ අගයන් සඳහා මෙමගින් විවිධ වර්ගවල ආකෘති පත්‍ර අංග නිරූපණය වේ.
<input type="text">
මෙමගින් අකුරු ටයිප් කලහැකි තනි පේලියක කොටුවක් නිරූපණය වේ. ඉහත input element එක type attribute එක නොමැති විටදී මෙම element එකට සමාන වේ. එනම්, <input> = <input type=”text”>
<input type="color">
වර්ණ තෝරාගැනීමට මෙය භාවිතා වේ.
<input type="range">
පරාසයකින් අගයක් තෝරාගැනීමට මෙය භාවිතා වේ.
<input type="file">
ආකෘති පත්‍රයකදී file එකක් අමුණා යැවීමට අවශ්‍ය විට, file එකක් තෝරා ගැනීමට මෙය භාවිතාවේ. මෙම element එක සමඟ multiple attribute එක භාවිතයෙන් එක වර file කිහිපයක් තෝරාගත හැකිය. (file කිහිපයක් තේරීමේදී CTRL key එක භාවිතා කරන්න)
<input type="reset">
ආකෘති පත්‍රයේ පුරවා ඇති දත්ත reset කිරීමට යොදාගැනේ.
<input type="submit">
ආකෘති පත්‍රයක් submit කිරීමට (server එකක් වෙත යැවීමට) යොදාගැනේ.