Handling Checkbox Data With In HTML: Here’s How »

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page.

Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Value of

How To Define Input Type In HTML (All The Values And Attributes)

What does Handling Checkbox Data With In HTML: Here's How do?

Defines a checkbox, which the user can toggle on or off.

Code Example

<form>
 <input type="checkbox" name="love" value="love" id="love"><label for="love"> Check if you love this website!</label>
</form>

Check if you love this website!

Handling checkbox data

Checkboxes are a little unwieldy from a data standpoint. Part of this is that there are essentially two different ways to think about their functionality. Frequently, a set of checkboxes represents a single question which the user can answer by selecting any number of possible answers. They are, importantly, not exclusive of each other. (If you want the user to only be able to pick a single option, use radio boxes or the <select> element.)

<form>  <p>Check all the languages you have proficiency in.</p>  <input type="checkbox" id="HTML" value="HTML"><label for="HTML"> HTML</label><br>  <input type="checkbox" id="CSS" value="CSS"><label for="CSS"> CSS</label><br>  <input type="checkbox" id="JS" value="JS"><label for="JS"> JS</label><br>  <input type="checkbox" id="PHP" value="PHP"><label for="PHP"> PHP</label><br>  <input type="checkbox" id="Ruby" value="Ruby"><label for="Ruby"> Ruby</label><br>  <input type="checkbox" id="INTERCAL" value="INTERCAL"><label for="INTERCAL"> INTERCAL</label><br> </form>  

Check all the languages you have proficiency in.

HTML
CSS
JS
PHP
Ruby
INTERCAL

The natural way to represent this in you application code (server-side or front-end) is with an array.

userLangs = ['HTML', 'CSS', 'INTERCAL']  

However, that isn’t how the browser will send the data. Rather, the browser treats a checkbox as if it is always being used the other way, as a boolean truth value.

<input type="checkbox" name="tandc" id="tandc" value="true"><label for="tandc"> I agree to all terms and conditions.</label> 

I agree to all terms and conditions.

Unlike with radio buttons, a set of checkboxes are not logically tied together in the code. So from HTML’s point of view, each checkbox in a set of checkboxes is essentially on its own. This works perfectly for single-choice boolean value checkboxes, but it presents a little hiccup for arrays of choices. There are two ways to deal with it. You can either give all the checkboxes the same name attribute, or you can give each one a different name.

<!-- All the same name attribute. --> <form>  <p>Check all the languages you have proficiency in.</p>  <input type="checkbox" id="HTML" value="HTML" name="langs"><label for="HTML"> HTML</label><br>  <input type="checkbox" id="CSS" value="CSS" name="langs"><label for="CSS"> CSS</label><br>  <input type="checkbox" id="JS" value="JS" name="langs"><label for="JS"> JS</label><br>  <input type="checkbox" id="PHP" value="PHP" name="langs"><label for="PHP"> PHP</label><br>  <input type="checkbox" id="Ruby" value="Ruby" name="langs"><label for="Ruby"> Ruby</label><br>  <input type="checkbox" id="INTERCAL" value="INTERCAL" name="langs"><label for="INTERCAL"> INTERCAL</label><br> </form>  <!-- Different name attributes. --> <form>  <p>Check all the languages you have proficiency in.</p>  <input type="checkbox" id="HTML" value="HTML" name="HTML"><label for="HTML"> HTML</label><br>  <input type="checkbox" id="CSS" value="CSS" name="CSS"><label for="CSS"> CSS</label><br>  <input type="checkbox" id="JS" value="JS" name="JS"><label for="JS"> JS</label><br>  <input type="checkbox" id="PHP" value="PHP" name="PHP"><label for="PHP"> PHP</label><br>  <input type="checkbox" id="Ruby" value="Ruby" name="Ruby"><label for="Ruby"> Ruby</label><br>  <input type="checkbox" id="INTERCAL" value="INTERCAL" name="INTERCAL"><label for="INTERCAL"> INTERCAL</label><br> </form> 

If you use the same name for all, your request string will look like this: langs=HTML&langs=CSS&langs=PHP If you use different names, it looks like this: HTML=HTML&CSS=CSS&PHP=PHP The first one seems a bit preferable, but what happens when you get to PHP and try to get the values?

$langs = $_REQUEST['langs']; // What is $langs ? 

In PHP, you can make sure that the various identically-named checkboxes are combined into an array on the server by appending a set of square brackets ([]) after the name.

<form>  <p>Check all the languages you have proficiency in.</p>  <input type="checkbox" id="HTML" value="HTML" name="langs[]"><label for="HTML"> HTML</label><br>  <input type="checkbox" id="CSS" value="CSS" name="langs[]"><label for="CSS"> CSS</label><br>  <input type="checkbox" id="JS" value="JS" name="langs[]"><label for="JS"> JS</label><br>  <input type="checkbox" id="PHP" value="PHP" name="langs[]"><label for="PHP"> PHP</label><br>  <input type="checkbox" id="Ruby" value="Ruby" name="langs[]"><label for="Ruby"> Ruby</label><br>  <input type="checkbox" id="INTERCAL" value="INTERCAL" name="langs[]"><label for="INTERCAL"> INTERCAL</label><br> </form> 

See this PHP forms tutorialfor more information. This array-making syntax is actually a feature of PHP, and not HTML. If you are using a different server side, you may have to do things a little differently. (Thankfully, if you are using something like Rails or Django, you probably will use some form builder classes and not have to worry about the markup as much.)

Good labelling practices

You should always put the <label> after the <input type="checkbox">, and on the same line. There should usually be a space between the <input> and the <label>. You can accomplish this with a little bit of margin, or with simply a typographical space. The <label> should always use for attribute, which specifies that it is connected to the <input> by id. This is an important usability practice, as it allows the user to check and uncheck the box by clicking the label, not just the (too small) checkbox itself. This is even more critical today than it was in the past because of touchscreens — you want to give the user the easiest possible checkbox experience.

<form>  <input type="checkbox" id="yes"><label for="yes"> Yes! Do it this way.</label><br> <br> <input type="checkbox" id="no1"><label for="no1">No. This needs space between the box and the words.</label><br> <br> <label for="no2">No. The checkbox should come before the label. </label><input type="checkbox" id="no2"><br> <br> <input type="checkbox" id="no-label"><label> No. The label needs to identify the checkbox.</label><br>  <label for="no3">Do you like it this way? (Wrong.)</label><br> <input type="checkbox" id="no3"><br>  

 Yes! Do it this way.

No. This needs space between the box and the words.

No. The checkbox should come before the label. 

 No. The label needs to identify the checkbox.
Do you like it this way? (Wrong.)

It’s amazing how much of a difference little details like that make to the way your user experiences and feels about your site. You want to make your users happy to use your forms, or at least not hate them. Proper form styling and usability go a long way to improving the overall satisfaction your users experience. For more information, see our tutorials on form styling and form usability.

Browser Support for checkbox

All

All

All

All

All

All

All values of type

Value nameNotestextDefines a text entry field in a form.checkboxDefines a checkbox, which the user can toggle on or off.radioDefines a circular selection button in a form.passwordDisplays an obfuscated password entry field.hiddenDefines a field within a form that is not visible to the user.submitDefines a button that is clicked to submit a form.resetDefines a button on a form that will return all fields to their default values.buttonDefines a button-like input.fileDefines a file upload box with a browse button.imageDefines an image that is clicked to submit a form.

All attributes of input

Attribute nameValuesNotesstepSpecifies the interval between valid values in a number-based input.requiredSpecifies that the input field is required; disallows form submission and alerts the user if the required field is empty.readonlyDisallows the user from editing the value of the input.placeholderSpecifies placeholder text in a text-based input.patternSpecifies a regular expression against which to validate the value of the input.multipleAllows the user to enter multiple values into a file upload or email input.minSpecifies a minimum value for number and date input fields.maxSpecifies a maximum value for number and date input fields.listSpecifies the id of a <datalist> element which provides a list of autocomplete suggestions for the input field.heightSpecifies the height of an image input.formtargetSpecifies the browsing context in which to open the response from the server after form submission. For use only on input types of “submit” or “image”.formmethodSpecifies the HTTP method (GET or POST) to be used when the form data is submitted to the server. Only for use on input types of “submit” or “image”.formenctypeSpecifies how form data should be submitted to the server. Only for use on input types “submit” and “image”.formactionSpecifies the URL for form submission. Can only be used for type=”submit” and type=”image”.formSpecifies a form to which the input field belongs.autofocusSpecifies that the input field should be in focus immediately upon page load.typetext
checkbox
radio
password
hidden
submit
reset
button
file
image
Defines the input type.nameSpecifies the name of an input element. The name and value of each input element are included in the HTTP request when the form is submitted.valueDefines an initial value or default selection for an input field.sizeSpecifies the width of the input in characters.maxlengthSpecifies the maximum number of characters that can be entered in a text-type input.checkedSpecifies whether a checkbox or radio button form input should be checked by default.borderWas used to specify a border on an input. Deprecated. Use CSS instead.srcDefines the source URL for an image input.disabledDisables the input field.accesskeyDefines a keyboard shortcut for the element.languageWas used to indicate the scripting language used for events triggered by the input.autocompleteSpecifies whether the browser should attempt to automatically complete the input based on user inputs to similar fields.