HTML checkbox – checkbox in html and how to get checked values

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, 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.

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:

Using multiple checkboxes in a group

The following example shows using multiple checkboxes belonging to same group. You can select expertise in checkboxes.

Also see HTML form | HTML input type | HTML link | HTML table

Was this article helpful?

Related Articles

Leave A Comment?