Checkboxes Controls -
මේ අවස්ථාව ඔබ forms fill කිරීමේදී දැක ඇති. අවස්ථා (options) එකට වැඩි ගණනක් තේරීමට අවශ්‍ය විට කුඩා කොටු වලට හරි ලකුණක් දැමීමේ හැකියාව ලබාදෙන්නේ මෙම Checkboxes මඟින් වේ.
උදාහරණයක් විට ඔබ ගැන කිසියම් වෙබ් අඩවියක නව ගිණුමක් ආරම්භ කරනවිට දී ඇති අවස්ථා වලින් ඔබ කැමති දේවල් සඳහන් කරන්න යයි පැවසුවහොත් මෙම Checkboxes Controls වලින් ඔබ කැමති දේවල්ව ලට අදාළ කොටු මත click කල හැකිය.
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form >
<input type="checkbox" name="English" value="on"> English
<input type="checkbox" name="ICT" value="on"> ICT
</form >
</body>
</html>
Radio Button Control -
ඔබට අවස්ථා කිහිපයක් ලබාදී ඇතිවිට ඉන් එකක් පමණක් තේරීම සඳහා මෙය යොදාගනී. මෙය බොහෝවිට භාවිතා කරන අවස්තාවක් වන්නේ කිසියම් වෙබ් අඩවියක ගිණුමක් සාදන විට ස්ත්‍රී පුරුෂ භාවය සඳහන් කිරීමට යොදාගත හැකිය.
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form >
<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female"> Female
</form >
</body>
</html>
Select Box Control -
මෙයත් වෙබ් අඩවි වල බොහෝවිට භාවිතාවන අවස්ථාවක්. මෙයට drop down box කියලත් කියනවා. පහළට දිගහැරෙන ලැයිස්තුවක ඇති අවස්ථා එකකට වැඩි ප්‍රමාණයකින් කිහිපයක් තේරීමට මෙය යොදාගන්න පුළුවන්.
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form >
<select nam e="dropdown">
<option value="English" selected>English</option>
<option value="ICT">ICT</option>
<option value="Maths">Maths</option>
<option value="Science">Science</option>
</select>
</form >
</body>
</html>
මෙහි ඇති selected නම් attribute එක මඟින් පෝරමයේ මුල් අවස්ථාවේ තේරී තිබෙන අවස්ථාව ලෙස පිළිබිඹු කරයි.
File Upload Box -
නව ගිණුමක් සකසන විට බොහෝ වෙබ් අඩවි වලින් ඔබගේ ඡායාරූපයක් ගිණුමට එකතු කරන ලෙස පවසයි. එවිට ඡායාරූපය ඔබගේ පරිඝනකයෙන් හෝ දුරකතනයෙන් upload කිරීමට අවශ්‍ය පහසුකම් සපයන ක්‍රමවේදය ලෙස මෙම File Upload Box හැඳින්විය හැකිය.
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form >
<input type="file" name="fileupload" accept="im age/* " />
</form >
</body>
</html>
මෙහිදී භාවිතා කරන attributes දෙකක් වන්නේ name සහ accept යන්නයි. name මඟින් පාලකය හරහා server එකට හඳුනාගැනීම සඳහා වටිනාකමක් ලබාදෙන අතර, accept මඟින් server එකට කුමන ආකාරයේ files යැවිය යුතුද යන්න සඳහන් කරනු ලැබේ.
Button Controls -
වෙබ් අඩවි වල විවිධාකාරයේ buttons වර්ග ඔබ දැක ඇති. ඒවායින් කෙරෙන කාර්යයන්ද එකිනෙක වෙනස් වේ. මෙවැනි buttons, clickable buttons හෙවත් එබිය හැකි බොත්තම් ලෙස හැඳින්වේ. මෙහිදීද භාවිතා කරන එකිනෙකට වෙනස් attributes කිහිපයක් තිබේ.
submit - පෝරමය ඉබේම (automatically) submit වීම මෙමඟින් සිදුවේ.
reset - පෝරමයට ඇතුලත් කර තිබෙන සියලුම අගයන් ඉබේම ඉවත්වීමට (reset) මෙය යොදාගනී.
button - ok, click here වැනි විධාන යොදා පෝරමය ක්‍රියාත්මක වීමට යොදාගනී.
image - button එකක් ලෙස රූපයක් නිර්මාණය කිරීමට මෙම ක්‍රමය යොදාගනී.
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form >
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="/html/images/logo.png" />
</form >
</body>
</html>
Hidden Form Controls -
ඔබ සමහර විට අත්දැකීම් ලබලා ඇති පෝරමයක් පිරවීමට පිටු කිහිපයක්(pages) යාමට සිදු වෙනවා. එවිට මුල් පිටුවේ අදාළ කොටස් පිරවීමෙන් පසුව දෙවැනි පිටුවට ගමන් කර එහි කොටස් පිරවීමට සිදුවෙනවා. ඉන් පසුව තවත් පිටු තිබේ නම් ඒවත් පුරවා සියල්ල අවසන් වූ පසු සියලු දත්ත එකවර server එකට submit කිරීම සිදුවෙනවා. ඉතින් මෙවැනි අවස්ථාවන් Hidden Form Controls මඟින් තමයි සිදුවෙන්නේ.
මෙහිදී server එකට අදාළ දත්ත යන තුරු ඒවා save කරගැනීමට මෙමඟින් හැකියාව ලැබෙනවා.
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form >
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>
