Website resource guide, web development,creating checkboxes

A checkbox is created with the ever-versatile <INPUT> tag by setting the TYPE attribute to checkbox, like so:

  <INPUT TYPE="checkbox">

By placing this into your form, it creates a single, generic checkbox:

Keep in mind is that your checkboxes are not associated with any sort of label or textual element. You need to provide those crucial elements as content that surrounds the checkbox element. Something like this makes more sense to the user:

  <INPUT TYPE="checkbox"> Which products do you use?

Which results in:

Still, when this element is checked, no information passed on to the server for processing. For this to happen, you must provide both a name and a value to every checkbox element in the form; those that are checked by the user will have their name/value pair passed to the server. A complete checkbox that selects products might look like:

  <INPUT TYPE="checkbox" NAME="products" VALUE="item">

Grouped checkboxes

You can have any number of checkboxes in your form, and their usage falls into two categories: Individual toggle switches, and collections of nonexclusive choices.

We've seen, in our previous example, how the individual toggle switch is created: Define a checkbox, give it a name and value, and place it adjacent to text that describes its function. Choice groups are created in a similar fashion, but with more layout control and an apparent violation of good programming practice.

Since all checkboxes are independent elements, a group of checkboxes is created simply by placing several checkboxes near one another. Here is typical collection of choices:

<DL>

  <DT>

  Which products do you use?

  <DD>

  <INPUT TYPE="checkbox" NAME="products" VALUE="item"> Noxzema

  <BR>

  <INPUT TYPE="checkbox" NAME="products" VALUE="item"> Nivea

  <BR>

  <INPUT TYPE="checkbox" NAME="products" VALUE="item"> Gillette Razors

  <BR>

  <INPUT TYPE="checkbox" NAME="products" VALUE="item"> Preferred Stock

</DL>

This results in a nicely grouped collection of nonexclusive choices:

By virtue of their layout and related meaning, these choices appear to the user to be a cohesive group within the form. Within the document, they are nothing more than stand-alone elements, unrelated except for one small detail: They all have the same name.

Your reply, "No two elements should ever have the same name". In fact, HTML does not care if all of the form elements have the same name. It is up to you to sort out the mess when all of the similarly-named data elements arrive at the server for processing.

In the case of this nonexclusive choice group, your server-side program must be able to handle up to four occurrences of a parameter named item, each with a different value. There are many ways to cope with this, and you should use whatever is sufficient to you. The bottom line: the browser doesn't care what you do, and will let the user check and uncheck any or all of these elements, submitting the checked elements when the form is collected for processing.

Default values

By default, all checkboxes are created unchecked. If you want to start out with a checkbox having a check, add the CHECKED attribute to the <INPUT TYPE="checkbox"> tag. The checkbox will start out checked, and will be checked whenever the user presses a reset button within the form.

As you have found, checkboxes are easy to implement within your forms.

<< BACK

Creating Checkboxes