Data Koncepts

HTML Forms for Feedback

Data Koncepts

HTML Forms for Feedback

This page provides an overview of HTML forms,
the means to receive feedback from your Web page viewers.

FORMS

Forms are used to gather specific information from your Web page's visitors. As stated in the "So You Want To Have A Web Presence?" page, you can query for specific information relating to the interests of your readers as well as take sales orders from them.

Forms were supported in the HTML 2.0 specification, however, they depended upon the underlying server to perform their magic. In addition, it normally takes a "serious" Web page generator to take the time to generate a form to collect information from his readers.

Forms have not changed significantly in the advances to HTML4 -- except for their uses. Today, form elements are often used to display and update information, generally under the control of JavaScript, and they can be submitted via e-mail and PHP allows form responsed to be added to online databases.

<FORM> ... </FORM>

FORM Attributes

The FORM element can have three attributes: ACTION, METHOD, and ENCTYPE.

UPDATE:
Form actions, while generally directed through a server-side script, can also be e-mailed directly to the webmaster or site owner with a mailto: action.

ACTION: The ACTION attribute is a URL specifying the location to which the contents of the form is submitted. If missing, the document's own URL is assumed.
METHOD: The METHOD attribute selects variations in the protocol. When the ACTION attribute is set as an http URL, the METHOD must be set to an http method. The default METHOD is GET, although, for many applications, the POST method may be preferred.
ENCTYPE: The ENCTYPE attribute specifies the format of the data in the event that the protocol does not specify the format. With the METHOD set to POST, the ENCTYPE attribute is a MIME type specifying the format of the posted data which is, by default, application/x-www-form-urlencoded.

FORM Elements

The FORM element can contain four elements defining the form's content: INPUT, SELECT, OPTION, and TEXTAREA.

<INPUT>

The INPUT element represents a field whose contents may be edited by the reader and can have eight attributes: ALIGN, CHECKED, MAXLENGTH, NAME, SIZE, SRC, TYPE, and VALUE.

ALIGN

ALIGN is used to align images (TYPE=IMAGE) and it's possible values are the same as that of the IMG element.

CHECKED

The CHECKED attribute indicates that a checkbox or radio button is selected as unselected checkboxes and radio buttons do not return name/value pairs when the form is submitted.

MAXLENGTH

The MAXLENGTH attribute specifies the maximum number of characters that can be entered into a text field and can be greater than that specified by the SIZE attribute which will cause the field to scroll. By default, MAXLENGTH is unlimited.

NAME

The NAME attribute is used to provide a unique identifier to a field or a logically related group of fields. This is a CRITICAL part of identifying the form's elements within both JavaScript and DHTML.

SIZE

The SIZE attribute specifies the size or precision of the field according to its type.

SRC

The SRC attribute specifies the URL or URN of an image (TYPE=IMAGE).

TYPE

The TYPE attribute defines the type of data which may be contained by the field with the default of free text. Several types of fields can be defined with the TYPE attribute: CHECKBOX, HIDDEN, IMAGE, PASSWORD, RADIO, TEXT, RESET, and SUBMIT.
CHECKBOX: This element is used for a single or multiple Boolean values. It provides a square for the user with a default value of "ON" (checked). The difference between a radio button and a checkbox is that a radio button, when checked, will clear all the associated radio buttons. In other words, several checkboxes can be selected at one time in a "Check all that apply" query.
HIDDEN: No field is presented to the user but the information is sent with the form. For instance, the revision of the form might be important when processing the returned information but it would not be relevant to the individual completing the form.
IMAGE: This element allows you to define an image the user can click on with the same effect as the SUBMIT button except that the coordinates of the mouse will also be returned.
PASSWORD: This element provides a TEXTBOX that will display ONLY a special character (e.g., "*") each time the user presses a key. This lets them enter passwords but prevents anyone looking at their screen from seeing what was typed.
RADIO: This element provides a "Select ONE of the Following" options from the list of options. Note that a radio button, when clicked, will de-select all other associated radio buttons.
TEXT: This element is used for single line text fields and uses the SIZE and MAXLENGTH attributes. Use the TEXTAREA element for text fields which can accept multiple lines.
RESET: This element creates a button which, when pushed, will clear all the entries made by the user and reset the form to the default values.
SUBMIT: This element creates a button which, when pushed, will send the data in the form to the URL specified in the FORM DETAILS screen

VALUE

The initial displayed value of a field which will be returned if not changed by the user.

<SELECT>

The FORM <SELECT> element allows the user to choose one of a set of alternatives described by textual labels with these elements represented by the OPTION element. The SELECT element can take any of the four following attributes: ERROR, MULTIPLE, NAME, and SIZE.

ERROR

Proposed.

MULTIPLE

The MULTIPLE attribute is needed when users are to be allowed to make several selections (e.g., <SELECT MULTIPLE>).

NAME

This attribute specifies the name that will be submitted as a name/value pair.

SIZE

This attribute specifies the number of visible items. If this is greater than one, then the resulting form control will be a list.

The SELECT element is typically rendered as a pull-down or pop-up list. For example:

    <SELECT NAME="color">
        <OPTION value="red">Red</OPTION>
        <OPTION value="white">White</OPTION>
        <OPTION value="blue">Blue</OPTION>
    </SELECT>

<OPTION>

The OPTION element can only be used within a SELECT element. It represents one choice and can take any of three attributes: DISABLED, SELECTED, and VALUE.

DISABLED: This is a proposed attribute — and is presently undefined.
SELECTED: This option is the initial (default) selection when the form is first opened or RESET.
VALUE: This attribute provides a value to be returned — other than the default contents of the OPTION element.

<TEXTAREA>

This is a multi-line area of text, usually used to enter brief messages. You can specify the number of rows and columns in the TEXTAREA.

Go back to:

or take a look at: