Creating HTML Forms

Forms were originally designed to provide data for CGI script programs located on remote servers (ie. server-side processing). but can now be used for client-side user interaction such as the JavaScript search engine on this site. Some common uses of forms are: search engine string input; content provider feedback; on-line shopping orders; signup / signin queries; database queries and navigation list boxes.

This page shows how to include HTML form markup on your website based on w3.org recommendations as well as some ways of improving form design and a few examples. A Quick Forms tutorial is available for those in a hurry. My JavaScript forms tutorial demos script enhanced forms. To see some extended capabilities that may be added to forms in the future, refer to XForms@W3 and WHAT working group.

CAUTION: Forms are very poorly implemented! Mailing of forms using the mailto: service does not function well in the latest version of ANY browser. Use my JavaScript email technique instead.

WARNING: The data processing phase of form submission requires someone who is skilled in a programming language such as CGI, Perl, PHP, JavaScript or VisualBasic.

Form Syntax

The basic form element <form> has several attributes associated with it. As with all other HTML elements, closing tags must be used and all attribute values must be quoted. The form element attributes are:

action={valid_uri} - site where the form data is sent on submission. [REQUIRED]
id={your_choice} - the DOM way to refer to the form from JavaScript.
enctype={mime_type} - what format is used (eg. "text/plain" for e-mail, "text/javascript" for JavaScript or "multipart/form-data" for file submission to a server script utility).
method={get|post} - where data variables are placed. Get appends data after ? in URI. Post adds data to body of message.
target={valid_blank} - where the server program delivers results and control to.

The form element contains nested control elements as well as form design elements.

Note: The form element is no longer needed when using control elements. It is still required for server submission and/or enter key action however.

NOTE: Forms can't be nested. However multiple forms on a page are allowed.

Control Usage

Forms should always provide the most appropriate mechanism or 'control' for a user's response. There are two basic types: freeform (text and textarea) and limited (all the rest).The controls provided by HTML are:

Textarea - allows a large input space to be defined by rows and width. Use when user may wish to add comments as part of feedback process.
Text - for short typed queries. The box size can be defined and the length of input limited. A default input value can be provided if appropriate.
Password - as above but typed characters appear as asterisks '*' for security.
Checkbox - allows selection/deselection by clicking. May be checked by default. Use this control if NONE or MULTIPLE selection is a possible alternative.
Radio button - allows selection/deselection by clicking. One button may be selected by default. Use this control if ONLY ONE of the group can be selected.
Select box - allows selection from a (pulldown) list. Use when the number of selections is too large for check boxes or radio buttons and the freedom of input boxes would cause problems during data processing.
Button - allows setting up a simple button. Can contain image in caption. Value NOT used as caption.
Submit button - completes the form filling process and sends the data collected to the script program for processing or e-mails the info.
Reset button - clears all information collected if user decides to cancel or redo the form.
Hidden info - allows the designer to add extra information to the data submitted (eg. the form name or revision date). It isn't really hidden as a source view will reveal it but it is hidden from the browsed view.
File upload - allows user to browse for a local file and submit its contents to a server script utility.

Common Attributes

Some 'common' attributes that are associated with most of the data input control elements are id, name, value, tabindex, disabled and accesskey. The id attribute associates a variable name with the control. The name attribute is an older [deprecated] method of association. For compatibility set both id and name to the same variable name. The value attribute assigns a default value to the variable. The tabindex attribute indicates the sequence in which the 'tab' key changes focus (walks the user through a set of controls). The disable attribute allows the control to be displayed but in a manner that indicates it is unusable. The disable effect can also be actively controlled by other controls in the form when using JavaScript. The accesskey attribute is used to associate a keyboard sequence with a focus jump to that control. This is useful for those with motor control problems.

Input Control Syntax

The input control allows for a variety of methods of data input. The most important (and required) attribute for <input> is type. The attribute type selects one of several input controls, each with their own appropriate attributes in addition to the common attributes. These input controls (type and attributes) are:

text - size, maxlength, readonly
password - size, maxlength
checkbox - checked
radio - checked
reset - (Note: value is used as a caption and NOT as default value)
submit - (Note: value is used as a caption and NOT as default value)
image - src, alt, align (acts as a submit button but includes the x,y coordinates of the cursor)
button - (Note: value is used as a caption and NOT as default value)
hidden - (allows author to add page identification to form)
file - accept (ie. mimetype list of acceptable types)

Select Control Syntax

The select control provides a (dropdown) list for selection from a limited group of items. Attributes for the <select> control include size {number of items to be displayed (1 yields a dropdown list)} and multiple {allows more than one item to be selected}. Each selectable list item is contained in an <option> element. Inside the option element there are two possible attributes. The selected attribute can be set to selected to indicate the default item selection. The value attribute assigns the variable value to be assigned if selected. If no value attribute is assigned, the value used is the option name itself.

Textarea Control Syntax

The textarea control provides a large scrollable space for large amounts of data to be entered. It is often used for comments or descriptions. Attributes for the <textarea> control include rows, cols (to determine the size of the input entry area) and readonly. Most of the common attributes also apply to the textarea control. However the value attribute can't be used. Default content string values can be added between the <textarea> and </textarea> tags if desired. Element tags in the content string will be displayed and not interpreted.

Form Design

There are several important steps in the general design of a form: These can be factored into functionality and layout appearance issues.

Functionality concerns itself with task requirements, what inputs are needed (freeform or limited response), outputs (visual or printed), field validation and requirements for server submission.

Layout appearance concerns are normal input|output structure, effective positioning of controls and a pleasing style. There are three HTML form elements that aid in visual layout:

<label>caption [...control_element...] </label> implicitly associates a text prompt with a nested control element. <label for="entryId">caption</label> adds a prompt label to a non-nested control. The for attribute explicitly links to the same ID that the actual control uses. Non-nested labels are required when a table is used to align controls.
<fieldset> associates a group of controls. Style rules can be used to display or hide a border that emphasizes the association. Fieldset is most often used to make a set of radio buttons where only one can be active at a time.
<legend> places a caption or title for a fieldset group.

The layout of a form is often completed through the use of table positioning within the form. CSS styling can also be used. Other CSS style properties such as background, length, and box properties (margin, border, padding) can make controls fit the form and/or look distinctive.
Note: Browsers do not have to implement styling on forms.
Beware: Styling can be turned off by user!

Examples of Forms

The first example is a fill-in form with multiple field validations of different types of data using JavaScript. Forms are normally validated before being submitted!

The next example is a fill-in form with direct email submission (rather than thru a server). Server operation can be provided by replacing the JavaScript mailto() function with a server address.

The next example is a nice method of handling site navigation using a select control with hyperlinks. The select control is set up in the standard way and an onclick procedure is included as part of a button control.

Forms can also be used to create the GUI component of a self contained utility. Forms do not require submission or sending to another site.

Form Submission

Server submission is the original and only reliable (ie. works with ALL browsers) method of sending HTML form data. The server can be a friendly service, your ISP, or your personal server. Each method has its advantages. Using a generic but friendly service such as www.response-o-matic.com, you receive a mail message with your form information in a standard mail format. This would have to be reprocessed locally but that can be done using any language you wish. If you use your own ISP, there may be a charge for maintaining the form processing script or else it may be in a generic form similar to the one friendly servers give. If you are running your own server, you have greater flexibility in setting up the processing script but at the cost of supplying the server hardware, connection costs (must be on-line 24/7), and extra programming and maintenance.

NOTE: Servers require action (server URI), method (data placement, usually GET), and enctype (data format) attributes to be set correctly.

NOTE: When sending your form data to a generic form processing service, there must be some way of associating your field (ie. control element) names with those that the service uses. One way is to use the specific names that they want you to. The other method is to use hidden elements that form these associations at the service. As these procedures are unique to the script used, the provider will give you explicit instructions. Follow them closely!

mailto URI service is a second method of form submission. At one time this was an easy alternative that sent the information directly to you in the form of a mail message. The message could then be processed locally to retrieve and format the information required. Unfortunately, newer browsers have removed the ability to perform simple mailto's of forms as a result of loosening the browser/mailer connection. Use my JavaScript email technique to overcome difficulties with the mailto function.This method uses JavaScipt to assemble the contents of form controls into the body= component of a mailto URI prior to sending via a link reference.

NOTE: Form submissions should use server (not mailto) techniques if the information is at all important.

NOTE: The w3.org recommendation states that a URI action other than http is undefined!

WARNING: The file control element can only be used by server scripts. JavaScript and mailto will only provide the selected filename and not the file's contents.

JR's HomePage | Comments [htmlform.htm:2012 07 04]