HTML Radio Buttons, HTML Checkboxes, and Other HTML Form Controls


The basic input form for users to submit information such as text boxes, etc. serve their purpose well. But to make the web page more user-friendly and robust, there are other controls available for special purposes that you may want to use, like a drop-down list of possible choices, a checkbox, or a password field.

The HTML Checkbox (or HTML Check Box )

The check box is used to indicate one of two options when used by itself. Either "Yes", or "No" for example. You may want to put a check box on your page that the user can check or uncheck to be added or not to be added to your mailing list, for instance. The "checked" argument will cause the checkbox to be checked as its default value.

A simple checkbox control looks like this in HTML:

<Input type = checkbox name = subscribe value = subscribe checked> The HTML Radio Button

The Radio Button is typically used in an array so that one and only one value can be chosen. Each button has its own line of code. Each will have the same "name" but a different value. You may want to use Radio Buttons to allow a person to select only one size: Small, Medium or Large, for instance.

<Input type = radio name = Size value = Small checked> <Input type = radio name = Size value = Medium> <Input type = radio name = Size value = Large>

The form will pass the "value" of the selection to the script that processes the information. The checked = "checked" argument sets the default size to small (When the page loads, the "small" option will be selected) in this example.

The Select list (or Pull-Down list, or HTML Combo Box)

The Select list has a simple opening tag, the list of the options (each enclosed in option tags) then the closing tag. The text that the user will see is between the Option tags. The "value" is what the form will pass to the script. It may be, but does not have to be, the same as the text. It could include a catalog number that the user is not necessarily concerned with for example.

<Select> </ select> <Option value = "XRRW002 White"> White </ option> <Option value = "XRRG008 Grey"> Grey </ option> <Option value = "XRRB011 Black"> Black </ option> The Option Group – Create more elaborate Select List

Options in a Select List can be grouped by category.
For example, let's say you want a list of desserts. You could group the various desserts by category.
The example, below, shows how the Select List might look for Ice Cream, Pies, and Cakes.

<Select> </ select> <Optgroup label = "Ice Cream"> </ optgroup> <Option value = Chocolate> Chocolate </ option> <Option value = Vanilla> Vanilla </ option> <Option value = "Rocky Road"> Rocky Road </ option> <Optgroup label = Pies> </ optgroup> <Option value = Cherry> Cherry </ option> <Option value = Apple> Apple </ option> <Optgroup label = Cakes> </ optgroup> <Option value = Sheet> Sheet Cake </ option> <Option value = Wedding> Wedding Cake </ option> The HTML Password Field.

This is simply a text input field that displays placeholders such as dots or asterisks in place of the characters that the user types.

The password field looks as follows:

<Input type = password>

Source by Allen Howard

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.