Quick Notes - Forms
Forms add interactivity to HTML documents. The most common use of forms is to feed back user added information either as e-mail or by using a server to process the message. Other possible uses include: input for a search engine, feedback to the webpage provider, on-line shopping order information, signup/signin queries, database queries and navigation listboxes. One interesting use of forms is as input to JavaScript utilities.
This page explains the coding elements required by HTML forms as well as some of the design issues related to the presentation and use of forms. More detailed listing of HTML form elements can be found at HTML Forms.
Basic Form Structure
The basic form element is form as in:
<form action="some_uri" method="post" id="form_name"> ... </form>
The action attribute is mandatory. Its value is a server file URI which manipulates the form's data in some fashion. For example it could look up an entry in a database and return some results.
The method attribute sets the format of the form's content when sent to the action uri. The permitted values are post [most common] or get
The id attribute can be any unique identifier but a meaningful value helps.
Input control elements are nested within the basic form element. For STRICT documents use a div element container for the controls!
Short Freeform Input
The input type="text" control element is used for short amounts of text such as names and e-mail addresses. This is an empty element as there is no closing tag (similar to img and hr). label prompts user for appropriate content. You can limit the number of characters entered with the maxlength attribute. If maxlength is omitted, an unlimited amount of data can be entered but this is very awkward to read. In normal use, only simple verification such as presence or absence of any data is done. The size attribute or style width property sets the input area length.
<label for="inbox">Name:</label> <input id="inbox" type="text" maxlength="18" size="10"/>
renders as:
The password control is similar to the text input control but it hides the user's input by typing stars instead. This control is normally machine verified against a list of permitted users. Other users either are rejected or sent to a subscription page for addition to the list depending on the reason for the password being part of the form.
<label for="pbox">Password:</label> <input id="pbox" type="password" size="10" maxlength="18"/>
renders as
Long Freeform Input
The textarea control element is used for large amounts of information such as explaining the symptoms of a problem or the needs of the client in detail. The cols and rows attributes define the size of the text area. Scroll bars are added automatically when the input data exceeds either boundary. Any text between the opening and closing tags is shown in the textarea box as default content string input and can be deleted or typed over by the user. Element tags in the content string will be displayed and not interpreted. Normally information in a textarea is not machine verified.
<textarea id="a2" cols="40" rows="2"></textarea>
renders as:
An interesting use of the textbox control is to block information to be copied by the viewer (eg contact info or an example script). One limitation is that inline styling elements are invalid syntax and can't be used.
Limited Response Input
There are times when a very limited set of responses is acceptable, in fact even preferable to freeform responses. For example surveys have check boxes to help enter yes/no information quickly. Simple action or 'go' buttons are another example.
Most forms will contain a submit and a reset button located at the bottom of the form. Their functions are obvious! If you require a caption other than the default one, add it using the value attribute (eg. value="Submit via e-mail").
<input id="sub" type="submit"/> <input id="res" type="reset"/>
renders as:
HTML forms use the checkbox control for simple yes/no responses or items from a group where several items may be selected at the same time.
<label for="d">Please send samples.</label> <input class="radio" id="d" type="checkbox"/>
renders as:
If you wish to have a checkbox prechecked then add the attribute checked="checked" to the appropriate control.
If item choices are mutually exclusive (ie. selecting one precludes selecting any other) then radio controls are more appropriate. Note that all the buttons in a 'radio' group have the same name attribute! The correct setup procedure is to always precheck one radio button with the checked attribute.
<label for "mr">Mr.</label> <input class="radio" id="mr" name="e" type="radio" checked="checked"/> <label for "mrs">Mrs.</label> <input class="radio" id="mrs" name="e" type="radio"/> <label for "ms">Miss</label> <input class="radio" id="ms" name="e" type="radio"/>
renders as:
List Selection Boxes
Selecting from a list provides a flexible limited response system that is self-validating. The select element is used for this purpose in HTML documents. Select requires a list of option elements to be nested inside its container. The size attribute can be used to set the number of options to be displayed at one time. If the number of options exceed the display size, a scrollbar is shown. A size of 1 or zero makes the display into a dropdown type. The multiple attribute allows multiple selections from the list at the same time.
<select id="f" size="3" multiple="multiple"> <option>red</option> <option selected="selected">white</option> <option>blue</option> </select>
renders as
Add a value attribute to the option element if you want the returned data to be different from that displayed in the list.
<option value="#f00">red</option>
File Browsing and Uploading
Selecting a file to be submitted to a server script utility for data analysis is another example of a limited response control. An input control with type="file" allows browsing through your local directory or typing in the filename. The complete file is submitted. The accept attribute can contain a list of acceptable mime-types, all others will be rejected.
WARNING: Access to a file contents is only enabled with server scripting. JavaScript or mailto will only give the selected filename and not the file's contents.
CAUTION: Styling is very unpredictable for the file control as w3.org recommendation is vague! Even the length used to calculate containing boxes has been poorly implemented in many browsers. Be careful!
<form id="filer" action="?" method="post" enctype="multipart/form-data"> <input class="box150" id="fname" type="file" accept="text/plain"/> <label for="fname"> </label></form>
is rendered as
Hiding Form Information
At times the form owner needs some sort of method of identifying which form generated a response. Forms sent to servers need information on how to process the form and where to send the results report to. Each of these situations is handled by the use of a hidden control. The contents of a hidden control is not displayed to the viewer (unless he uses View Source) but is in the data message fed back to the action script. An example is:
<input id="mail_to" type="hidden" value="ve3ll@rac.ca/>
This may be the way a 'generic' form handler knows that the processed report is to be e-mailed to a specific address.
Appearance and Styling
Input controls should always be arranged in a logical and attractive manner. Groups of controls such as a set of radio buttons can be 'framed' with the fieldset element to add to readability. A legend can also be included for legibility. By custom this legend is aligned in the upper fieldset frame, offset to the left.
<fieldset><legend>Salutation</legend> <input class="radio" id="mr2" name="e" type="radio" checked="checked"/> <label for "mr2">Mr.</label> <input class="radio" id="mrs2" name="e" type="radio"/> <label for "mrs2">Mrs.</label> <input class="radio" id="ms2" name="e" type="radio"/> <label for "ms2">Miss</label></fieldset>
renders as
The label element adds a prompt structure and its for attribute closely couples the label to its related control. Labels should be used on textarea, input (types of text, password, checkbox, radio and file) and select controls when captions are used to clarify their meaning. At times a null or prompt is appropriate.
Controls can be grayed out or disabled using the disabled attribute. The input and textarea controls can be made readonly by using the readonly attribute. The difference is that readonly allows focus and tabbing but disabled does not. Either attribute will disallow changing the value of the control!
<input id="one" id="one" disabled="disabled"> <input id="two" id="two" readonly="readonly">
Input control alignment can use tables and the align attribute. A two column table can use the th element for the left side prompts and the td element for the right side controls.
CSS style properties such as background, borders and
alignment can be added to control forms just as they are to other
elements. Width can be used for
positioning or sizing of controls as well. One important point is
to subclass your controls because the input element has so many types.
For example if you apply width to input directly it may make
radio buttons or checkboxes display oddly in some browsers. A simple
start is to use input.txt for text, input.but for buttons, input.radio
for radio and checkbox etc.
Caution: Browsers are
not required to do styling and user can choose to turn off CSS!
User Events and Actions
Several element attributes allow reacting to user events. Most often these events will initiate or call JavaScript functions that validate entries or use the form as input for some internal operations. Some of the most commonly used events are onSubmit, onClick, onChange, onFocus and onBlur. Refer to my JavaScript forms tutorial for more information. The available events are listed in the Events List. An example of using an event attribute is:
<input id="entry1" id="entry1" onChange="testEntry(entry1);">
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">