Handling Checkbox Data With In HTML: Here's How

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>

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>  

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> 

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>  

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.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for checkbox

All	All	All	All	All	All