Quick Reach
HTML Checkbox
The HTML checkbox is way to allow users making multiple choices from a given set of options. For example allowing customers to select color of T-shirts for placing an order. Similarly in shopping carts you might seen multi-item carts with checkboxes to let remove after selecting one or more items.
HTML checkboxes are used in HTML forms with <input type> element. You can include as many checkboxes as required by giving checkboxes same name. We will show you examples how to create one and multiple checkboxes in HTML, let us first look at syntax of checkbox.
Basic syntax of creating a checkbox
The general syntax of creating a checkbox in HTML is:
<input type=”checkbox” name=”checkbox_name” value=”checked_value”>
As you can see checkbox is an input type used to submit with form. The name is used to group multiple checkboxes together. While value is passed on to submitted form where a script (PHP, Ruby on Rails, ASP.net etc.) can get selected checkboxes. That information you can save to database or use as per requirement.
Following are few examples of checkboxes in HTML.
HTML single checkbox example with script
The following example uses a single checkbox in an HTML form. After checkbox is checked and you click on submit the next page will show you checkbox checked value by using PHP script.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Checkbox</title>
<style>
.submitstyle{
font-size:16px;
color:red;
border: 1px solid green;
}
</style>
</head>
<form action=“” method=“post”>
Single checkbox example: <br />
<input type=“checkbox” name=“checktest” value=“checkbox example”> Check and submit <br>
<input type=“submit” value=“Submit” class=“submitstyle”>
</form>
</body>
</html>
===============================================
The PHP code after Submit:
===============================================
if( $_POST[“checktest”] )
{
echo “Checkbox Value is: “. $_POST[“checktest”]. “<br />“;
exit();
}
else
{
echo “checkbox is not selected!”. “<br />“;
}
|
Checkbox checked example
You can use checked attribute of HTML to make checkbox pre-selected. That is when page is loaded the checkbox is already checked. The following example shows how to use this:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<html>
<head>
<title>HTML Checkbox</title>
<style>
.submitstyle{
font-size:16px;
color:red;
border: 1px solid green;
}
</style>
</head>
<form action=“” method=“post”>
Single checkbox example: <br />
<input type=“checkbox” name=“checktest” value=“checkbox example” checked> Check and submit <br>
<input type=“submit” value=“Submit” class=“submitstyle”>
</form>
</body>
</html>
|
Using multiple checkboxes in a group
The following example shows using multiple checkboxes belonging to same group. You can select expertise in checkboxes.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
<style>
.submitstyle{
font-size:16px;
color:red;
border: 1px solid green;
}
</style>
</head>
<form action=“” method=“post”>
Your expertise: <br />
<input type=“checkbox” name=“expertise” value=“HTML”> HTML <br>
<input type=“checkbox” name=“expertise” value=“PHP”> PHP <br>
<input type=“checkbox” name=“expertise” value=“MySQL”> MySQL<br>
<input type=“checkbox” name=“expertise” value=“Java”> Java<br>
<input type=“submit” value=“Submit my Expertise” class=“submitstyle”>
</form>
</body>
</html>
|
Also see HTML form | HTML input type | HTML link | HTML table
Leave A Comment?