HTML CheckBox

Rumman Ansari   Software Engineer   2023-03-27   6097 Share
☰ Table of Contents

Table of Content:


Check boxes are used when you want the user to turn a particular choice on or off.

Each check box represents a true or false value that can be selected or not selected, and the status of each check box is completely independent from the others. The user can check none of the options, all of them, or any combination.

This code shows that check boxes use your old friend the <input> tag:



<p> <input type = "checkbox" id = "chkPeace" value = "peace">World peace </p>
<p> <input type = "checkbox" id = "chkHarmony" value = "harmony">Harmony and brotherhood </p>
<p> <input type = "checkbox" id = "chkCash" value = "cash">Cash </p>


Live Preview

Sometimes, the value of a form element is visible to users, and sometimes it is hidden. Sometimes, the text the user sees is inside the tag, and sometimes it's little confusing. The standards evolved over time, and they honestly could have been a little more consistent. Still, this is the set of elements you have, and they are not really that hard to understand. Write forms a few times, and you'll remember. You can always start by looking over my code and borrowing it as a starting place.

You're using the same attributes of the <input> tag, but they work a bit differently than the way they do in a plain old text box

  • The type is checkbox: That's how the browser knows to make a check box, rather than a text field.
  • The checkbox still requires an ID: If you'll be writing programming code to work with this thing (and you will, eventually), you'll need an ID for reference.
  • The value is hidden from the user The user doesn't see the actual value. That's for the programmer (like the select object). Any text following the check box only appears to be the text associated with it.


<form action="http://www.example.com/cv.php" method="get" name="frmCV" >
Which of the following skills do you possess? Select all that apply.
<input type="checkbox" name="chkSkills" value="xhtml"> XHTML <br>
<input type="checkbox" name="chkSkills" value="CSS"> CSS <br>
<input type="checkbox" name="chkSkills" value="JavaScript"> JavaScript <br>
<input type="checkbox" name="chkSkills" value="aspnet"> ASP.Net <br>
<input type="checkbox" name="chkSkills" value="php"> PHP
</form >



Live Preview

Attribute Reasons
type type Indicates that you want to create a checkbox.
name Gives the name of the control. Several checkboxes may share the same name, but this should happen only if you want users to have the option of selecting several items from the same list — in which case, they should be placed next to each other on the form.
value The value that will be sent to the server if the checkbox is selected.
checked Indicates that when the page loads the checkbox should be selected.

Checkboxes can also carry the following attributes:

  • All universal attributes
  • disabled , readonly , tabindex , and accesskey
  • UI event attributes

Another Example of Checkbox



<form action="/accept.php" name="frmTandC" method="get" >

<input type="checkbox" name="chkAcceptTerms" checked="checked">

I accept the <a href="terms.htm" > terms and conditions </a >. <br>

<input type="submit">

</form>


Live Preview