Module 8 - Page 06 - The INPUT Tag: the CHECKED Attribute and the Reset Button

The INPUT Tag: the CHECKED Attribute and the Reset Button

Radio buttons and checkboxes may be pre-checked by using the CHECKED attribute of the INPUT tag.

Tag: INPUT
Attribute: CHECKED
Value: none (in XHTML, "checked")
Description: cause radio buttons and checkboxes to be pre-checked by setting the CHECKED attribute of the INPUT tag.

Example (abbreviated):

<input type="checkbox" name="pets" value="cat" checked />

Example (abbreviated, strict XHTML):

<input type="checkbox" name="pets" value="cat" checked="checked" />

Note: do not use the above strict XHTML syntax on sites supporting Internet Explorer version 4, as it will break your web page on that browser version.

Example (in context):

<html>
<head>
<title>Example Form</title>
</head>
<body>
<form>

<p>Choose one or more of your favorite pets:<br />
<input type="checkbox" name="pets" value="dog" checked /> Dog<br />
<input type="checkbox" name="pets" value="cat" checked /> Cat<br />
<input type="checkbox" name="pets" value="bird" /> Bird</p>

<p>Choose your favorite color:<br />
<input type="radio" name="colors" value="red" checked /> Red<br />
<input type="radio" name="colors" value="green" /> Green<br />
<input type="radio" name="colors" value="blue" /> Blue</p>

<input type="submit" value="Submit Me, Please" />

</form>
</body>
</html>

Here is the above example displayed.

Remember: only ONE radio button may be pre-checked, while as many checkboxes as you like may be pre-checked.

Pre-checked checkboxes are common on websites which are soliciting your personal information for mailing lists, as in this brief example; I don't recommend doing this, however, as it annoys users and adds unhappy people to your database. Make certain to allow users to check their OWN "add me to the mailing list" box, so that they will only receive your mailings if they REALLY want them; this makes for happier users who are more truly interested in hearing about your offerings.

The Reset INPUT

Most forms use some sort of "reset" or "clear" button to allow users to reset a form to its default state. The reset INPUT is created by setting the TYPE attribute of the INPUT tag equal to "reset"; you would also set the VALUE attribute of the INPUT tag equal to whatever text you wanted to have appear inside the reset button.

Example (abbreviated):

<input type="reset" value="Clear Me, Please" />

Example (in context):

<html>
<head>
<title>Example Form</title>
</head>
<body>
<form>

<p>Choose one or more of your favorite pets:<br />
<input type="checkbox" name="pets" value="dog" checked /> Dog<br />
<input type="checkbox" name="pets" value="cat" checked /> Cat<br />
<input type="checkbox" name="pets" value="bird" /> Bird</p>

<p>Choose your favorite color:<br />
<input type="radio" name="colors" value="red" checked /> Red<br />
<input type="radio" name="colors" value="green" /> Green<br />
<input type="radio" name="colors" value="blue" /> Blue</p>

<input type="submit" value="Submit Me, Please" />
<input type="reset" value="Clear Me, Please" />

</form>
</body>
</html>

Here is the above example displayed. The reset button does NOT complete empty a form; it merely resets a form to its initial state, whatever that is.

You will notice that, even though this button is technically a RESET button, most web programmers call it a "clear" button, and use "Clear This Form" or "Clear" as the VALUE for the reset INPUT tag; this does not affect its functionality.

Most forms include both a submit button and a reset button.

Main Menu