Back to Nelson's Web Design Home Page
The INPUT Element

A number of different input types like text entry fields, radio buttons and check boxes are possible with <INPUT> elements. This element, like others like <IMG> and <HR> don't actually enclose any text and so don't have an end tag.

Text Entry Field

Type your name:

This is achieved as follows: 

Type your name:
<INPUT TYPE="TEXT" NAME="name of variable">

Other attributes relevant to TEXT include:

VALUE Default Text (if any) SIZE The physical size (in characters) of the text field on the screen MAXLENGTH To maximum number of characters the field can take. If larger than SIZE, the entry field will scroll

Password Entry Field

Type your password:

This is achieved as follows: 

Type your password:
<INPUT TYPE="PASSWORD" NAME="name of variable">

This works the same as a TEXT input but doesn't display the text as it is typed. All the same attributes are appropriate.

Check Boxes

Choice 1
Choice 2
Choice 3
Choice 4

This is achieved with: 

<INPUT TYPE="CHECKBOX" NAME="choice" VALUE="1"> Choice 1
<INPUT TYPE="CHECKBOX" NAME="choice" VALUE="2" CHECKED> Choice 2
<INPUT TYPE="CHECKBOX" NAME="choice" VALUE="3"> Choice 3
<INPUT TYPE="CHECKBOX" NAME="choice" VALUE="4"> Choice 4

A checkbox can be on by default by including the word CHECKED in the tag as in choice 2.

Radio Button

Choice 1
Choice 2
Choice 3
Choice 4

This is achieved with: 

<INPUT TYPE="RADIO" NAME="choice" VALUE="1"> Choice 1
<INPUT TYPE="RADIO" NAME="choice" VALUE="2" CHECKED> Choice 2
<INPUT TYPE="RADIO" NAME="choice" VALUE="3"> Choice 3
<INPUT TYPE="RADIO" NAME="choice" VALUE="4"> Choice 4

Radio buttons are very similar to check boxes but only one value for a given name can be selected at a time.

Submit Button

To actually submit the form, the user clicks on a button of type SUBMIT.

This is achieved with 

<INPUT TYPE="SUBMIT">

This can take a VALUE attribute to change the text in the button.

Reset Button

To reset a form to its default, the user clicks on a button of type RESET.

This is achieved with 

<INPUT TYPE="RESET">

Like SUBMIT, this can take a VALUE attribute to change the text in the button.

The SELECT Element

The SELECT element allows the selection of (possibly multiple) options from a list. The whole selection is enclosed in SELECT tags and each option in OPTION tags.

This is achieved by 

<SELECT NAME="name of variable">
<OPTION> Option 1
<OPTION> Option 2
<OPTION> Option 3
</SELECT>

If multiple selections are allowed, <SELECT> should have a MULTIPLE attribute. If an option is to be selected by default, it should have a SELECTED attribute.

The TEXTAREA Element

For multi-line text entry, a <TEXTAREA> element can be used.

This is a achieved by: 

<TEXTAREA ROWS="no. of rows" COLS="no. of columns">

default text (if any)
</TEXTAREA>