html පමනක් use කරල dropdown list එකක් හදමුද?
Step 01
html file එකේ body එක ඇතුලෙ
<lable> කියන tag එක යොදා අපට අවශ්‍ය lable එක සකසා ගත යුතුයි. උදාහරනයක් ලෙස අපි country එකක් select කරගන්නවනම් පහත දැක්වෙන පරිදි lebal එකක් ලෙස choose
your Country එක යෙදිය හැක.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drop Down</title>
</head>
<body>
<label for="Country-name">Choose Your Country :</label>
</body>
</html>
Step 02
පසුව රූපයේ පරිදී <select>
tag එක යොදා එහි opening
tag එක මත name එක සහ id එකක් දිය යුතු වේ. එම id එක lable එකේ යෙදූ for
attribute එකට සමාන විය යුතුය.
<select name="Country-name" id="Country-name" ></select>
Step 03
අවසාන වශයෙන් country
names add කිරීම සදහා පහත රූපයේ පරිදි <select>
open tag
එක සහ closing tag එක අතර
<option> tag එක භාවිතා කරමින් dropdown
list එක සකසා ගැනීමට හැක.මෙහිදී හැකිතරම option tag use කරමින් countries එකතු කර ගැත හැකි අතර. එහි පහත පරිදි opening tag එක මත value එකක්ද යෙදිය හැක.
<select name="Country-name" id="Country-name" >
<option>Sri Lanka</option>
<option>India </option>
<option>Japan </option>
</select>
ඉහත දැක්වූ ආකාරයට program කිරීම මගින් අපට පහත පරිදි dropdown list එකක් සකසා ගත හැක.
.png)
.png)
Final completed code
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drop Down</title>
</head>
<body>
<label for="Country-name">Choose Your Country :</label>
<select name="Country-name" id="Country-name" >
<option>Sri Lanka</option>
<option>India </option>
<option>Japan </option>
</select>
</body>
</html>
Comments
Post a Comment