In This Tutorial
Checkbox with checked value
Sometimes you need checkboxes that are already ticked or checked as the web page loads that contains an HTML form. You can use the checked attribute to make the checkbox as pre-checked. The following example shows how to use the checked attribute of the 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
|
<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>
|
The experience this online option also shows the PHP script to get the checkbox value.
Checkbox checked in multi-checkboxes example
The following example uses multiple checkboxes and out of five, two are already ticked by using the “checked” attribute of the checkbox.
|
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” checked> 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” checked> Java<br>
<input type=“submit” value=“Submit my Expertise” class=“submitstyle”>
</form>
</body>
</html>
|
You can see a few options to select the expertise. Two options are already checked as the example page loads, i.e. HTML and Java.
Also see HTML form | HTML input type | HTML link | HTML table
Leave A Comment?