HTML Help & Resources

Form Input

All forms need input, and there are several variations of input that can be gathered for use with forms. Common input types are described below with example of use with each.

The elements of style, and how to use them, are not covered in this reference. For more information on how to utilize the power of cascadding style, visit our CSS reference instead.

Form Input - TEXT

• NAME

  Name must be identified in order to access user input. Avoid using spaces or non-alpha numeric characters for the name identifier.

• SIZE

  Size is better defined using the CSS style property: width, in pixels, because it offers a more precise width. Size should be an integer representing number of character spaces.

• MAXLENGTH

  Not a required property to be set, however this property does limit character input if the form is sent with this property still set. It's conceivable, someone could copy a form script, omitting the maxlength property, and submit the form to the action script. Always perform necessary checks with your action scripts to ensure the user is sending the data in the requested format.

• VALUE

  Value is where the text data is stored. Value is empty initially unless defined by the designer or a scripting element.

• READONLY

  Input will not be allowed when this parameter is set, as whatever the value is set to initially, will remain.

• DISABLED

  Disables user input and changes the text input to grey/silver. This parameter is unreliable, and does not work in all browsers. It should not be relied upon.

• ONFOCUS

  When the input receives focus.

• ONBLUR

  When the input losses focus.

• ONSELECT

  When the text or password has been selected ( highlighted ) by the user.

• ONCHANGE

  When the input losses focus, but its value has changed since initial focus.

Form Input - PASSWORD

Password is identical to text in every aspect except for the display of characters when typed. An asterisk will be displayed for every keystroke a user makes.

Form Input - RADIO

You can define a radio button group by assigning the NAME property to each. However, only one radio button may be checked at a time.

If you require an answer, use the CHECKED parameter to set the answer initially. In the example below, we expect the answer of Yes, but provide the option of No for the user to input.

Form Input - CHECKBOX

Checkboxes allow for a single response to a question, true ( checked ) or false ( empty ), although the values can be defined as you like. In the example below we use Yes to signify the user has checked the box.

To set the initial value of a checkbox, use the CHECKED parameter.

Form Input - FILE

File input offer users the ability to upload files to a web server. In order to use the file input your form method must be set to POST and the ENCTYPE must be set to multipart/form-data.

There are two methods of uploading files:

1. Single File Input
2. Multiple File Input

Multiple file input NAME values must include the square brackets ( [] ) at the end of the variable reference. The brackets represent an array, which is ultimately how multiple file uploads will be accessed by the action script. See the examples below.

Form Input - HIDDEN

Hidden input is useful for submitting default, or pre-determined data, which is not rendered to the screen for visitors to see. Note the term hidden only refers to “hidden from the screen”. Anyone viewing the source code for the page can see the hidden input.

Form Input - SUBMIT

The submit input is for submitting a completed form to the action script. The VALUE property defines what text will appear on the button face. Note the submit input must appear inside a set of <form> and </form> tags.

Form Input - RESET

The reset input is for clearing all form input, located between a given set of <form> and </form> tags. The VALUE property defines what text will appear on the button face.

Move on to the Next Topic - Form Input (Textarea).