HTML - Checkbox Forms

Setting the type attribute of an <input> tag to checkbox places a checkbox element onto the web page.

Deploy checkbox elements in a situation when the user must check all boxes that apply (or none). A scripting language such as PHP will easily handle this form element, returning all elements the user has checked (check out our PHP Form Example.)

<form name="myWebForm" action="mailto:youremail@email.com" method="post">
<p>Please select every sport that you play.</p>

Soccer: <input type="checkbox" name="sports" value="soccer"  /><br />

Football: <input type="checkbox" name="sports" value="football"  /><br /> 

Baseball: <input type="checkbox" name="sports" value="baseball"  /><br /> 

Basketball: <input type="checkbox" name="sports" value="basketball"  />

</form>

HTML Checkbox Form:

Checkboxes are used for instances where a user may wish to select multiple options, such as in the instance of a "check all that apply" question.

HTML Checkboxes Selected

A checkbox element can be placed onto a web page in a pre-checked fashion by setting the checked attribute with a "yes" value. By doing so, this element will now default to a checked status each time the HTML page is loaded.

<form name="myWebForm" action="mailto:youremail@email.com" method="post">
<p>Please select every sport that you play.</p> Soccer: <input type="checkbox" checked="yes" name="sports" value="soccer" /> <br /> Football: <input type="checkbox" name="sports" value="football" /> <br /> Baseball: <input type="checkbox" name="sports" value="baseball" /> <br /> Basketball: <input type="checkbox" checked="yes" name="sports" value="basketball" />
</form>

HTML Pre-Selected Checkboxes:

• Go Back
• Continue

Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!