EN
HTML - check box example
17 points
Using HTML it is possible to create combo box field in few ways.
xxxxxxxxxx1
2
<html>3
<body>4
<form name="my-form">5
<label>My goals: </label><br />6
<input type="checkbox" name="friends" value="friends" /> Friends<br />7
<input type="checkbox" name="enjoy" value="enjoy" /> Enjoy<br />8
<input type="checkbox" name="learning" value="learning" /> Learning<br />9
</form>10
</body>11
</html>xxxxxxxxxx1
2
<html>3
<body>4
<form name="my-form">5
<label>My goals: </label><br />6
<input type="checkbox" name="friends" value="friends" /> Friends<br />7
<input type="checkbox" name="enjoy" value="enjoy" checked /> Enjoy<br />8
<input type="checkbox" name="learning" value="learning" checked /> Learning<br />9
</form>10
</body>11
</html>xxxxxxxxxx1
2
<html>3
<body>4
<form name="my-form">5
<label>My goals: </label><br />6
<input type="checkbox" name="friends" value="friends" /> Friends<br />7
<input type="checkbox" name="enjoy" value="enjoy" disabled /> Enjoy<br />8
<input type="checkbox" name="learning" value="learning" checked disabled /> Learning<br />9
</form>10
</body>11
</html>In this approach we can change check box state by clicking on text too.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
label {7
cursor: pointer;8
}9
10
</style>11
</head>12
<body>13
<form name="my-form">14
<div>My goals:</div>15
<label><input type="checkbox" name="friends" value="friends" /> Friends</label>16
<br />17
<label><input type="checkbox" name="enjoy" value="enjoy" /> Enjoy</label>18
<br />19
<label><input type="checkbox" name="learning" value="learning" /> Learning</label>20
</form>21
</body>22
</html>Note:
inputelement should be placed togater with text insidelabelelement.
In this approach we can change check box state by clicking on text too.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
label {7
cursor: pointer;8
}9
10
</style>11
</head>12
<body>13
<form name="my-form">14
<div>My goals:</div>15
<input type="checkbox" name="friends" id="friends" value="friends" />16
<label for="friends">Friends</label>17
<br />18
<input type="checkbox" name="enjoy" id="enjoy" value="enjoy" />19
<label for="enjoy">Enjoy</label>20
<br />21
<input type="checkbox" name="learning" id="learning" value="learning" />22
<label for="learning">Learning</label>23
</form>24
</body>25
</html>
