June 15, 2021

TechXlk

All About Technology

HTML FORMS Part II|TechXlk HTML Tutorial 08

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

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

ඔබට මතක ඇති පෙර ලිපියේදී අපි TEXT FIELDS පිලිබඳව කතා කලා ඉතින් අද අපි එ සමඟම භාවිතා වන RADIO BUTTON සහ CHECKBOX  පිලිබඳව කතා කරමු.    

Radio Buttons

හරි මුලින්ම අපි RADIO BUTTON එක පිලිබඳව කතා කරමු.

ඔබ දැක ඇති HTML FORM වල අපට click කිරීමට හැකි Buttons ආකාරයේ කොටස් අන්තර්ගතවී තිබෙනවා. මේවා අපි RADIO BUTTONS කියා හදුන්වනවා. ඉතින් සාමාන්‍යයෙන් මෙම  RADIO BUTTONS භාවිතා වන්නේ පිළිතුරු බොහෝමයක් තිබෙන අවස්ථා වකදී එයින් එක් පිලිතුරක් පමනක් ලබාගැනීමට අවශ්‍ය වන අවස්ථාවලදී. උදාහරණ වශයෙන් ස්ත්‍රී/පුරුෂ භාවය තේරීමට තිබෙන අවස්ථාවක් පෙන්වා දෙන්න පුලුවන්. ඉතින් ඔබට තේරෙනවා ඇති මෙවැනි අවස්ථාවකදී දත්ත ලබාගන්නා පුද්ගලයා එක් පිලිතුරක් පමනක් බලාපොරොත්තු වන බව, ඉතින් මෙම අවස්ථා වලදී අපි RADIO BUTTONS භාවිතා කරනවා.

හරි දැන් අපි බලමු RADIO BUTTONS වෙබ් පිටුවකට ඇතුලත් කරගන්නේ කෙසේද කියා.

<!DOCTYPE html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="calander.html" method="GET">
		Name:<input type="text" name='name'><p>
		password:<input type="password" name="pword"><p>
      
  <!-- RADIO BUTTON -->
		Gender:<input type="radio" name='gender' value="male">MALE <input type="radio" name="gender" value="female"> FEMALE<p>

			<input type="submit" name="ENTER DATA">
			<input type="reset" name="RESET DATA">


		
	</form>

</body>
</html>

ඉහත කේතයේ ප්‍රතිදානය පහත දැක්වේ.

RADIO BUTTON ඇතුලත් කිරීම සඳහා “input” ටැග් එකෙහි type attribute එක සඳහා “radio” යන නම යේදිය යුතුයි.

මෙම HTML කේතයේ ඇති වැදගත්ම දෙයනම් NAME සහ VALUE යන attributes  2යි. ඉතින් අපි දැන් එම attributes පිලිබදව වැඩිදුරටත් කතා කරමු.

1.NAME: අපට ඉහත කේතයේ වගේ ස්ත්‍රී/පුරුෂ භාවය තෙරීමට  ඇති අවස්ථාවකදී එහි තෝරා ගැනීමට අවස්ථාව ලබාදිය යුත්තේ එක් පිලිතුරක් පමනයි. ඉතින් එවැනි අවස්ථාවකදී මෙහි NAME attribute එක සඳහා එකම නමක් ලබාදීම අත්‍යවශ්‍ය වනවා. එසේ නොමැති වුවහොත් මෙම පිලිතුරු 2ම තෝරාගැනීමට හැකියාව ලැබෙනවා. ඉතින් පහත රූපයේ දැක්වෙන්නේ එවැනි අවස්ථාවක්.

HAVING DIFFERNT NAMES IN NAME ATTRIBUTE

2. VALUE: මෙයද ඉතා වැදගත් attribute එකක් ලෙස හදුන්වා දෙන්න පුලුවන්. එයට හේතුව නම් අපි DATABASE එකත් එකක් ගණුදෙනු කිරීමේදී PHP කේත භාවිතා කරනවා. (මම පෙර ලිපියෙන් ඒ පිලිබදව කතා කල ඔබට මතක ඇති.). ඉතින් මෙම PHP කේතය මගින් අපි DATBASE එකට දත්ත ගබඩා කිරීමේදී මෙම VALUE කියන attribute එකේහි ඇති නාමය මගින් එය DATABASE එකේහි ගබඩාවේ.ඉතින් මෙම attribute එක සඳහා ලබාදෙන නාමය එකින් එකට වෙනස් නාමයන් ලෙස ලබාදීමට කටයුතු කලයුතුයි, තවද එය DATABASE එක භාවිතා කරනු ලබන ඔනෑම කෙනෙකු හට තේරුම් ගැනීමට හැකි වන ලෙස නාම කරනය කිරීමටද වග බලාගත යුතුයි.

Gender:<input type="radio" name='gender' value="male"> MALE 
<input type="radio" name="gender1" value="female"> FEMALE

තවද RADIO BUTTON එක වෙබ් පිටුවේ නිරූපනය කරන නම ප්‍රදර්ශනය කිරීම සඳහා input tag එකට පසුව එම නම යෙදිය යුතුයි( උදා: MALE). 

හරි දැන් අපි RADIO BUTTON පිලිබඳව යම්කිසි අවබෝධයක් ලබාගත්තා දැන් අපි අනිත් කොටස පිලිබඳව බලමු.

CHECKBOX

RADIO BUTTON එකක් භාවිතා කරන්නේ කුමකටද කියා දැන් ඔබ හොඳින් දන්නවා ඉතින් දැන් අපි බලමු CHECKBOX එකක් අපි භාවිතා කරන්නේ කුමකටද කියා.

RADIO BUTTON එක භාවිතයේදී අපි දැක්කා ඔබට තේරීමට හැක්කේ එක් වරණයක් පමනක් බව නමුත් අපි හිතමු ඔබට තේරීම් කිහිපයක් කිරීමට අවශ්‍යතාව තිබෙන අවස්ථවක අපට ඉතා පහසුවෙන් මෙම CHECKBOX භාවිතයේන් එම කටයුත්ත කරගැනීමට පුලුවන්.

හරි දැන් අපි බලමු CHECKBOX එකක් වෙබ් පිටුවකට ඇතුලත් කරගන්නේ කෙසේද කියා.

<!DOCTYPE html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="calander.html" method="GET">
		Name:<input type="text" name='name'><p>
		password:<input type="password" name="pword"><p>
		CHECKBOX<p>	
        <!-- CHECKBOX -->
        	HOBBY:<input type="checkbox" name="CRICKET"> CRICKET 
        	<input type="checkbox" name="READING"> READING BOOKS
        	<input type="checkbox" name="CYCLING"> RIDING BICYCLE<p>
			<input type="submit" name="ENTER DATA">
			<input type="reset" name="RESET DATA">


		
	</form>

</body>
</html>

ඉහත කේතයේ ප්‍රතිදානය පහත දැක්වේ.

ඉතින් මෙහිදී ඔබට පෙනේනවා ඇති අපි තෝරාගැනීම් කිහිපයක් කර ඇති බව. ඉතින් CHECKBOX එකක් වෙබ් පිටුවට ඇතුලත් කිරීම සඳහා අපට පෙර පරිදිම input ටැග් එකේහි TYPE attribute එක සඳහා “CHECKBOX” යන්න යේදීමෙන් ඉතා පහසුවෙන් එය සිදු කරගන්න පුලුවන්.

එහිදීද අපට පෙර පරිදිමන් NAME යන attribute එක භාවිතා කරන්න සිදු වෙනවා. එහිදී අපි NAME එක සඳහා එකිනෙකට වෙනස් වූ නම් යෙදීම මගින් අපිට තෝරාගැනීම් කිහිපයක් කිරීමට අවස්ථාව සැලසෙනවා. එහිදී ද පෙර පරිදිම DATABASE එක භාවිතා කරන ඕනෑම කෙනෙකු හට තේරුම්ගැනීමට හැකි පරිදි එම නම් යෙදීමට වගබලාගත යුතුයි. ඉන් පසු RADIO BUTTON වල ලෙසම CHECKBOX එක නිරූපනය කරන නම input ටැග් එකට පසුව ඇතුලත් කරන්න(උදා:CRICKET,BADMINTON ).

HOBBY:<input type="checkbox" name="CRICKET"> CRICKET 
        	<input type="checkbox" name="READING"> READING BOOKS
        	<input type="checkbox" name="CYCLING"> RIDING BICYCLE

දැන් ඔබට RADIO BUTTON සහ CHECKBOX පිලිබඳව යම්කිසි දැනුමක් ඇතැයි කියා මම සිතනවා. ඉතින් HTML FORM පිලිබඳව තවත් මේවැනිම ලිපියකින් ඔබව හමු වෙන්නම් එතේක් ඔබට සුබ දවසක්.