If you don’t know what an element is or how you must use it, I recommend you read the ” HTML tags and attributes” tutorial that you can find in the HTML tutorials section.
In contrast to radio buttons that conform groups where only one option can be checked at a time, checkbox controls are independent.
The state of a checkbox control is decided by the presence of the boolean attribute checked (if it’s present, the checkbox is checked). But when the form is submitted, what’s sent of this element to the processing agent isn’t the checked state, but the name/value pair. In the submission, the state of the checkbox decides wether the control’s value should be sent with the form. In other words, the control is submitted only if it’s checked.
The input element, having the “checkbox” value in its type attribute, represents a two-states control that allows users to mark it as selected or deselected. This control may be used to collect information that answers simple true/false questions like “do you want/accept/deny this?”.
Examples
Our first example shows a basic interests list where the user can check any of the options he enjoys doing in his free time. Here we’ll be using the value attribute, a very rare practice in real cases, thanks to the fact that a checkbox is only submitted when it’s checked.
When working with checkboxes, the value attribute can be safely omitted thanks to the possibility of knowing the state of a checkbox by verifying its presence/absence among the submitted fields.
<form
action=
"../../form-result.php"
method=
"post"
target=
"_blank"
>
<p>
Interests:
<br>
<input
type=
"checkbox"
name=
"cb-cars"
value=
"likes"
> Cars<br>
<input
type=
"checkbox"
name=
"cb-sports"
value=
"likes"
> Sports<br>
<input
type=
"checkbox"
name=
"cb-videogames"
value=
"likes"
> Videogames
</p>
<p>
<input
type=
"submit"
value=
"Send data"
></p>
</form>
Interests:
Cars
Sports
Videogames
As you may note in the previous example, the text beside each checkbox doesn’t respond to the clicks as anyone would expect. In the following example, we’ll solving this issue by converting this plain text into a label for the checkbox.
To achieve this, we’ll wrap both, the text and the corresponding input with a label element. This way, we’ll associate the checkbox with everything else inside the label.
<form
action=
"../../form-result.php"
method=
"post"
target=
"_blank"
>
<p>
Interests:
<br>
<label>
<input
type=
"checkbox"
name=
"cb-cars"
> Cars</label>
<br>
<label>
<input
type=
"checkbox"
name=
"cb-sports"
> Sports</label>
<br>
<label>
<input
type=
"checkbox"
name=
"cb-videogames"
> Videogames</label>
</p>
<p>
<input
type=
"submit"
value=
"Send data"
></p>
</form>
Interests:
Cars
Sports
Videogames
In our third example, we’re making use of the checked attribute, to indicate the browser it should mark the checkbox when the page loads and when the form is reset.
<form
action=
"../../form-result.php"
method=
"post"
target=
"_blank"
>
<p>
Interests:
<br>
<label>
<input
type=
"checkbox"
name=
"cb-html5"
checked>
HTML5</label>
<br>
<label>
<input
type=
"checkbox"
name=
"cb-css3"
checked>
CSS3</label>
<br>
<label>
<input
type=
"checkbox"
name=
"cb-javascript"
> Javascript</label>
</p>
<p>
<input
type=
"submit"
value=
"Send data"
>
<input
type=
"reset"
value=
"Reset form"
>
</p>
</form>
Interests:
HTML5
CSS3
Javascript
Lastly, we’re giving a try to the required attribute. When this boolean attribute is present, the browser won’t allow the submission of the form until the checkbox has been checked. This can be of use in conformance requirements.
Browser support for the attribute required is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.
<form
action=
"../../form-result.php"
method=
"post"
target=
"_blank"
>
<p>
To enter the program you must accept our terms of service
<br>
<label>
<input
type=
"checkbox"
name=
"cb-termsofservice"
required>
I accept the terms of service</label>
<br>
</p>
<p>
<input
type=
"submit"
value=
"Send data"
></p>
</form>
To enter the program you must accept our terms of service
I accept the terms of service
