HTML Markup | JavaScript | Java | Home & Links
JR's HomePage | Markup | Site Map | Page Bottom
Control Usage | Common Control Attributes
Input Control | Textarea Control | Select Control
UI Design | Form Syntax | Form Submission

HTML User Interfaces

User interfaces add interactivity to HTML. Applications include: input for a search engine (as used on this site), content provider feedback, on-line shopping orders, signup/signin queries, database queries and navigation list boxes.

This page shows how to use HTML user interface markup based on w3.org recommendations as well as some ways of improving UI design. The Quick UI tutorial is available for those in a hurry. My JavaScript forms tutorial demos script enhanced forms.

Control Usage

Interfaces should always use the appropriate mechanism or 'control' for a user's response. There are two basic types: freeform (text, password and textarea) and limited. The controls provided are:

Common Control Attributes

Some 'common' attributes that are associated with most of the control elements are id, name, value, tabindex, disabled and accesskey. The id attribute associates a variable name with the control. The name attribute groups similar controls for validating, totaling or radio sets. The value attribute assigns a default value to the variable. The tabindex attribute sets 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 way that indicates it is unusable. The disable effect can also be actively controlled by other controls when using JavaScript. The accesskey attribute is used to associate a keyboard sequence with a focus jump to that control.

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:

Select Control Syntax

The select control provides a (dropdown) list for selection from a limited group of items. Attributes for <select> 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 <textarea> 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.

UI Design

The general design of a UI can be factored into functionality and layout appearance issues.

Functionality concerns are task requirements, required inputs (freeform or limited response), outputs (visual/printed), movement through the controls, field validation and requirements for server submission. The way the user walks through a form with the tab key can be controlled with the tabindex attribute. The sequence is by incremental positive integer (ie. tabindex="1" will be visited before tabindex="5".

<input id="one" id="one" tabindex="3">
<input id="two" id="two" tabindex="7">

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:

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.

Form Syntax

Note: The form element is only needed for server submission.

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

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

Form Submission

Server submission is the original method of sending HTML form data for processing. 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. 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/maintenance.

NOTE: Servers require action (server URI), method (data placement, usually GET), and enctype (data format) attributes to be set correctly. The w3.org recommendation states that a URI action other than http: is undefined!

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!

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

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 JavaScript to assemble the contents of form controls into the body= component of a mailto URI prior to sending via a link reference.

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 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:2016 02 01]