HTML Form Elements

Form Basics:

Forms are used for gathering information from web visitors. You may want to add a guestbook, a survey, or ask visitors to register, among other things. You can have the contents of the form mailed to you or as you'll see later, have the input processed in other ways.

The form element starts and end with the <FORM></FORM> tags. The opening <FORM> tag needs a couple other important elements - METHOD and ACTION - NAME can be used to name the form

Form Text Boxes:

Text boxes allow users to fill in whatever data is neccessary and are usually the most frequently used form elements. The text and textarea INPUT types create the following text boxes.

Attributes:

TEXT:

size: Length of text field (in number of characters)

value: (optional) Value in text field box

CODE:

To add default text:

TEXTAREA:

NOTE: Needs a closing tag </TEXTAREA>

cols: Size of textarea in columns

rows: Size of textarea in rows

value: (optional) Value in textarea box

CODE:

Select Menu

A SELECT menu, or a pulldown menu has 3 attributes - name, size, and multiple. The SELECT item needs the OPTION element to list the values.

Attributes:

SELECT

NOTE: Needs a closing tag </SELECT>

size: (optional) Size of menu (in number of items)

multiple: (optional) Shows all available values

OPTION

NOTE: Closing tag, </OPTION> is optional

value: Value of option (if you want to pass a different value than the text next to the option.

CODE:

Show 1 value:

<OPTION>Cat

<OPTION>Dog

<OPTION>Rat

</SELECT>

Show all values:

<OPTION>Green

<OPTION>Purple

<OPTION>Black

</SELECT>

Radio Buttons

RADIO buttons allow you to offer a variety of choices, but the user can only select one choice. When using the radio button, it's important to make sure the NAME attribute for each of the available choices in one category are all the same so that the user cannot select more than one value.

Attributes:

RADIO

name: Name of radio button. The NAME value must be the same for a set of choices in one category.

value: Value of the radio button

checked: (optional) Default checked value.

CODE:

Where do you live?

<INPUT TYPE="radio" NAME="city" VALUE="Los_Angeles" CHECKED>Los Angeles

<INPUT TYPE="radio" NAME="city" VALUE="San_Diego">San Diego

<INPUT TYPE="radio" NAME="city" VALUE="San_Francisco">San Francisco

Where do you work?

<INPUT TYPE="radio" NAME="work" VALUE="Home">Home

<INPUT TYPE="radio" NAME="work" VALUE="Office">Office

<INPUT TYPE="radio" NAME="work" VALUE="No_Work">Don't Work

Checkboxes

CHECKBOX allows the user to check multiple choices. The NAME attribute for each set of choices must be the same.

Attributes:

RADIO

value: Value of the checkbox

checked: (optional) Default checked value.

CODE:

What sports are you interested in?

<INPUT TYPE="checkbox" NAME="sports" VALUE="Football" CHECKED>Football

<INPUT TYPE="checkbox" NAME="sports" VALUE="Baseball">Baseball

<INPUT TYPE="checkbox" NAME="sports" VALUE="Basketball">Basketball

Submit & Reset Form Buttons

Once you've created a form, you need to submit the data using form buttons. The method below uses the INPUT element to create these buttons. The section below, Using Graphics for Buttons, will show you how you can use the INPUT or BUTTON element to create graphic buttons as well.

Attributes:

Submit:

value: Value that will appear on the button

Reset:

value: Value that will appear on the button

CODE:

Submit Button:

Reset Button (clears the form values):

Graphic Buttons

You can use graphic buttons instead of the standard grey buttons to submit or clear forms. Use the type attribute of the INPUT element to specify an image.

Attributes

IMAGE:

src: Image Source (location of image)

CODE:

Professional I.T. Tutorials