About the HTML Checkbox Generator
Every checkbox needs a label tied to it, either by wrapping the input or by pointing for at the input id. That link is what lets someone tick the box by clicking the words next to it, and it is what a screen reader reads out when focus lands on the control. This generator produces both arrangements and keeps the id and the for value in step.
Enter one or more comma separated values and you get a group instead: a <fieldset> with a <legend>, and a row per option sharing one name with a [] suffix so PHP, Rails and most frameworks collect the ticks as an array. The legend is the question the group answers, which assistive technology announces before each option.
Two behaviours surprise people. An unchecked box sends nothing at all when the form is submitted, so the server sees a missing key rather than a false value, which is why a hidden field with a default is a common companion. And required on a checkbox means that single box must be ticked, so putting it on every member of a group forces all of them, not one of them. The value attribute defaults to the string on if you leave it out, so set something meaningful. For radio buttons and text fields in one go, use the HTML Form Builder.
How to use
- Write the label text and the field name.
- For a group, list the options separated by commas.
- Set checked, required or disabled as needed.
- Copy the markup into your form.
Common questions
- Why is my checkbox missing from the posted data?
- Unchecked boxes are not submitted at all. Read the key as absent, or add a hidden input with the same name holding the default value before it.
- How do I collect several checkboxes as one array?
- Give them the same name with a [] suffix, which the group option here does automatically, and read the value as a list on the server.
- Does required work on a group?
- It applies to the single box it sits on, so all boxes carrying it must be ticked. Enforcing at least one tick needs a small script.
- What value is sent if I do not set one?
- The string "on", which is rarely useful. Set an explicit value such as yes, 1 or the option name.