Search code examples
htmlformscheckboxhtml-input

What's the proper value for a checked attribute of an HTML checkbox?

We all know how to form a checkbox input in HTML:

<input name="checkbox_name" id="checkbox_id" type="checkbox">

What I don't know -- what's the technically correct value for a checked checkbox? I've seen these all work: 

<input name="checkbox_name" id="checkbox_id" type="checkbox" checked>
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="on">
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="yes">
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="checked">
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="true">

Is the answer that it doesn't matter? I see no evidence for the answer marked as correct here from the spec itself:

Checkboxes (and radio buttons) are on/off switches that may be toggled by the user. A switch is "on" when the control element's checked attribute is set. When a form is submitted, only "on" checkbox controls can become successful. Several checkboxes in a form may share the same control name. Thus, for example, checkboxes allow users to select several values for the same property. The INPUT element is used to create a checkbox control.

What would a spec writer say is the correct answer? Please provide evidence-based answers.

Solution

  • Strictly speaking, you should put something that makes sense - according to the spec here, the most correct version is:

    <input name=name id=id type=checkbox checked=checked>

    For HTML, you can also use the empty attribute syntax, checked="", or even simply checked (for stricter XHTML, this is not supported).

    Effectively, however, most browsers will support just about any value between the quotes. All of the following will be checked:

    <input name=name id=id type=checkbox checked>
<input name=name id=id type=checkbox checked="">
<input name=name id=id type=checkbox checked="yes">
<input name=name id=id type=checkbox checked="blue">
<input name=name id=id type=checkbox checked="false">

    And only the following will be unchecked:

    <input name=name id=id type=checkbox>

    See also this similar question on disabled="disabled".