February 2, 2021

TechXlk

All About Technology

HTML FORMS Part I|TechXlk HTML Tutorial 07

තවත් අලුත්ම ලිපියකට ඔබව සාදරයෙන් පිලිගන්නවා. මෙ ලිපියේදී අපි බලමු HTML වල FORM භාවිතා කරන්නේ කෙසේද කියා.

FORMS

වෙබ් පිටුවක දත්ත ඇතුලත් කිරීම සඳහා අත්‍යවශ්‍යම වන දෙය නම් FORMඑකකි. ඉතින් අද අපි බලමු මේ FORM එකක් නිර්මානය කරගන්නේ කෙසේද කියා.දත්ත එක් රැස් කිරීම සඳහා මෙය ඉතාමත් වැදගත් බව හොඳින් මතක තබා ගන්න.

දත්ත එක් රැස් කිරීම

දත්ත එකතු කිරීමේදී අපට අවශ්‍යම වන දෙයක් වන්නේ එම දත්ත ගබඩා කිරීමට DATABASE එකක්. ඉතින් මෙම DATABASE එක සමඟ ගණුදෙනු කිරීම සඳහා අපට PHP වැනි BACK END පරිගණක භාශාවක් අත්‍යවශ්‍ය වනවා.කෙසේ වෙතත් PHP නොමැතිව HTML හරහා අපට වෙබ් FORM එකක් නිර්මානය කළ හැක නමුත් එමගින් DATABASE එකක් සමඟ ගණුදෙනු කිරීමට අපට නොහැකිය.     

දැන් අපි බලමු කුඩා HTML FORM එකක් නිර්මාණය කිරීම සඳහා යොදා ගන්නා HTML කේතයක් පිලිබඳව.

<!DOCTYPE html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="calander.html" method="POST">
		Name:<input type="text" name='name'><p>
		Age:<input type="text" name="age"><p>
		password:<input type="password" name="pword"><p>
		<input type="submit" name="ENTER DATA">


		
	</form>

</body>
</html>

ඉහත කේතයේ ප්‍රතිදානය පහත දැක්වේ.(මෙහිදී “<p>”ටැග් එක භාවිතා කර ඇත්තේ Line Break එකක් සඳහාය.)

දැන් අපි මෙම HTML කේතයේ එක් එක් කොටස පිලිබදව අවධාන යොමු කරමු.

FORM ටැග් එක

අප මෙම වෙබ් පිටුව තුල HTML FORM එකක් භාවිතා කරන බව බ්‍රව්සරයට දැනුම් දීම සඳහා මෙම ටැග් එක අප භාවිතා කරනවා.ඉතින් මෙම ටැග් එක යටතේ එන සියලුම කොටස් HTML FORM එකට සම්බන්ඳ බව බ්‍රව්සරය තෙරුම් ගන්නවා.

හරි දැන් අපි මෙම ටැග් එක සමඟ භාවිතා වන attributes පිලිබඳව අවධානය යොමු කරමු.

1.ACTION – මෙය තුල ඇත්තේ අප මෙම HTML FORM එක තුල ඇති Button එක click කල පසු අපව කුමන වෙබ් පිටුවකට ගෙනයා යුතුද යන්න පිලිබඳව තොරතුරුය. ඉතින් එම ගමනාන්තය එකම HTML පිටුව, වෙනත් HTML පිටුවක්, PHP පිටුවක්  වන ඕනෑම දෙයක් විය හැක.තවද අප PHP භාවිතා කරන්නේ නම් සාමන්‍යයෙන් නම් අප මෙම ගමනාන්තය ලෙස එම PHP කේතය අඩංගු වෙබ් පිටුව යෙදීම සිදු කරනවා.   

2.METHOD- මෙහි ඇතුලත් වන්නේ අප PHP හරහා දත්ත හුවමාරු කිරීමේදී දත්ත යැවිය යුතු ක්‍රමය පිලිබදවයි. එම ක්‍රියාව සඳහා අපට ක්‍රම 2ක් තිබෙනවා, එනම් GET සහ POST යන ක්‍රම 2යි. මෙහිදී POST ක්‍රමය මගින් වඩාත් ආරක්ෂාකාරී දත්ත හුවමාරු කිරීමට අපට පුලුවන්. නමුත් GET ක්‍රමය තුලදී එවැනි ආරක්ෂාකාරී දත්ත හුවමාරුවක් සිදු වන්නේ නැත. එම නිස අප HTML FORM එක තුලින් ලබා ගන්නා දත්ත රහසිගත එවානම්(උදා: මුරපද ) එම ක්‍රියාවලිය සඳහා POST ක්‍රමය භාවිතා කිරීම වඩාත් සුදුසු වේ. නමුත් ඉගෙනීම සඳහා කේත කරනයේදී අපට කැමති ක්‍රමයක් භාවිතා කිරීමේ හැකියාව ඇත. 

POST METHOD
GET METHOD

මෙහිදී ඔබට මෙහි ඇති වෙනස හොදින් පෙනේනවා ඇති. GET ක්‍රමය මගින් ‘pword’ කිය මුර පදය පෙන්නුම් කරනවා නමුත් POST METHOD එකේදී එය සිදු වන්නේ නැත.

හරි දැන් අපි FORM එක නිර්මාණය කිරීම පිලිබඳව අපගේ අවධානය යොමු කරමු.

එහිදී ඔබට පෙනෙනවා ඇති ප්‍රථමයෙන්ම මම ‘NAME’ යන්න ඇතුලත් කර ඇති බව. ඉතින් වෙබ් පිටුව තුළදී ඔබට පෙනෙනවා ඇති එය එ ලෙසින්ම වෙබ් පිටුව තුලද entry field එකකට පෙර ඇති බව. ඉතින් මෙහිදී HTML කේතය දෙස බැලුවහොත්  ඔබට පෙනෙනවා ඇති “input” කියා ටැග් එකක් ඇති බව ඉතින් මෙය භාවිතා වන්නේ entry box එක වෙබ් පිටුවට ඇතුලත් කිරීම සඳහාය.

දැන් අපි input ටැග් එකේ ඇති attributes පිලිබඳව අවධානය යොමු කරමු.

1.TYPE:මේ සඳහා මෙම HTML කේතයේදී අප විවිධ “values” භාවිතා කර තිබෙනවා. ඒ සඳහා අපට පහත රූපයේ දැක්වෙන සියලුම “values” භාවිතා කිරීමේ හැකියාව තිබෙනවා.

මෙහිදී විශේෂිත values වන්නේ:

*TEXT

*PASSWORD

*EMAIL

TEXT: මෙය භාවිතා වන්නේ අංක සහ අකුරු ඇතුලත් කිරීමට ඇති fields වලදීය(උදා:NAME.ADDRESS,etc)

PASSWORD:මෙය භාවිතා වන්නේ මුර පද වැනි රහසිගත තොරතුරු ඇතුලත් කිරීමට ඇති fields වලදීය.

EMAIL: මෙය භාවිතා වන්නේ විද්‍යුත් තැපෑල ඇතුලත් කිරීමට ඇති fields වලදීය.

ඉතින් values පිලිබදව යම් කිසි අවබෝධයක් ඔබට ලැබෙන්නට ඇතැයි මම සිතනව.

ඉන් පසු අපි බලමු Name attribute එක පිලිබඳව.

මෙය භාවිතා වන්නේ දත්ත හුවමාරු කිරීමේදී PHP කේතයට දත්ත ලබා දීමට අවශ්‍ය වනවා ඉතින් එම අවස්ථාවේදී එම දත්ත සඳහා ආමන්ත්‍රණය කිරීමට මෙම Name Attribute එක සඳහා ලබා දෙන value එක භාවිතා කරනවා.

BUTTON

අවසාන වශයෙන් ඔබට පෙනෙනවා ඇති මෙම FORM එක තුල Button එකක් ඇතුලත් වී ඇති බව ඉතින් මෙය භාවිතා වන්නේ අප FORM එක පිරවීමෙන් පසු එය SUBMIT කිරීම සඳහාය තවද එය අප FORM එක තුල ඇතුලත් කර ඇති දත්ත මකා දැමීම සඳහාද භාවිතා කළ  හැක. ඉතින් අපි දැන් බලමු  Button ඇතුලත් කිරීමේදී භාවිතා වන values පිලිබඳව.

1. TYPE: Type සඳහා අපට “SUBMIT” සහ “RESET” යන values 2ක බහුලව භාවිතා වන බව කියන්න පුලුවන් ඉතින් එය HTML කේතයේදී භාවිතා වන්නේ කෙසේ දැයි කියා අපි පසුව බලමු.

2. VALUE: මෙමගින් නිරූපනය වන්නේ එම Button එක මත තිබිය යුතු වචනය හෝ වචන කිහිපය පිලිබඳවය.

<--SUBMIT BUTTON-->
<input type="submit" value="SUBMIT YOUR DATA"><P>
<--RESET BUTTON-->
<input type="reset" value="CLEAR DATA"><P>

ඉතින් අද අපි මූලික HTML FORM එකක ඇති දේවල් පිලිබදව කතා කලා මේ පිලිබදව වැඩිදුර තොරතුරු මීළඟ ලිපියෙන් ගෙන ඒමට බලපොරොත්තු වෙමි.එතෙක් ඔබට සුබ දවසක්.