EN
HTML - check box example
17
points
Using HTML it is possible to create combo box field in few ways.
1. Combo box example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<form name="my-form">
<label>My goals: </label><br />
<input type="checkbox" name="friends" value="friends" /> Friends<br />
<input type="checkbox" name="enjoy" value="enjoy" /> Enjoy<br />
<input type="checkbox" name="learning" value="learning" /> Learning<br />
</form>
</body>
</html>
2. Combo box with default selection example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<form name="my-form">
<label>My goals: </label><br />
<input type="checkbox" name="friends" value="friends" /> Friends<br />
<input type="checkbox" name="enjoy" value="enjoy" checked /> Enjoy<br />
<input type="checkbox" name="learning" value="learning" checked /> Learning<br />
</form>
</body>
</html>
3. Combo box with disabled fields example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<form name="my-form">
<label>My goals: </label><br />
<input type="checkbox" name="friends" value="friends" /> Friends<br />
<input type="checkbox" name="enjoy" value="enjoy" disabled /> Enjoy<br />
<input type="checkbox" name="learning" value="learning" checked disabled /> Learning<br />
</form>
</body>
</html>
4. Combo box inside label element example
In this approach we can change check box state by clicking on text too.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
label {
cursor: pointer;
}
</style>
</head>
<body>
<form name="my-form">
<div>My goals:</div>
<label><input type="checkbox" name="friends" value="friends" /> Friends</label>
<br />
<label><input type="checkbox" name="enjoy" value="enjoy" /> Enjoy</label>
<br />
<label><input type="checkbox" name="learning" value="learning" /> Learning</label>
</form>
</body>
</html>
Note:
inputelement should be placed togater with text insidelabelelement.
5. Combo box assigned with label example
In this approach we can change check box state by clicking on text too.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
label {
cursor: pointer;
}
</style>
</head>
<body>
<form name="my-form">
<div>My goals:</div>
<input type="checkbox" name="friends" id="friends" value="friends" />
<label for="friends">Friends</label>
<br />
<input type="checkbox" name="enjoy" id="enjoy" value="enjoy" />
<label for="enjoy">Enjoy</label>
<br />
<input type="checkbox" name="learning" id="learning" value="learning" />
<label for="learning">Learning</label>
</form>
</body>
</html>