Forms - Chakarov



Forms

Introduction 1

Creating Forms 1

The ACTION Attribute 2

The METHOD Attribute 2

> GET Method 3

> POST Method 4

The NAME Attribute 4

The ENCTYPE Attribute 4

Simple Form Syntax 5

Form Controls 5

Text Fields 5

Simple Text Field 6

Password Fields 7

Multiple-Line Text Input 9

Pull-Down Menus 10

Scrolling Lists 12

Check Boxes 13

Radio Buttons 15

Reset and Submit Buttons 16

Additional Tag Types 18

Hidden Text 19

Allowing Users to Upload Files 19

Creating a Submit Button with an Image 20

Organising the Form’s Elements 23

Formally Labelling Form Parts 25

Setting the Tab Order 26

Adding Keyboard Shortcuts 27

Disabling Form Elements 28

Preventing Changes to Form Elements 29

Forms

Introduction

Forms allow visitors to your site to submit information, allowing the flow of information to be two-way: from the site’s author to the end user and from the end user back to the author. This flow of information from the user to the author makes the World Wide Web a more powerful medium than other traditional media.

HTML forms allow you to create an interactive environment ranging from simple feedback forms to dynamically created web sites.

There are many uses for forms on the Web, including order forms, registration forms and comments forms:

• Order forms are completed by visitors when they place orders for goods and services from an online store. They usually require the customer to provide detailed personal information (such as name, address, credit card number, etc.). Such forms are usually linked with the online store’s database and populated according to the data contained in the database. Sometimes, they are also used to update entries in the database.

• Registration forms are used to collect information about a user necessary to complete a registration process, such as an online magazine subscription or free web space account. They are often linked to an authentication system, which limits access to the site.

• A comment form is usually used as a way to collect comments from the visitors to your web site.

Creating Forms

In order to create forms just add the tag element and associated tags for the form fields to your HTML document. Handling the data submitted by your visitors in the form however is more difficult, involving applications running on a server.

The ACTION Attribute

The ACTION attribute is used to specify the script, which will handle the form’s data. This usually points to a CGI script, which manipulates the form’s results. For example:

Forms – ACTION Attribute example

Associated tags are placed here.

[pic]

The above form calls a script called "emailform.cgi" stored in the "cgi-bin" folder on a web server. Similar to other addresses for images and hyperlinks, the value for the ACTION attribute can be either a relative or an absolute address (if the script is stored on a different server from the one which hosts the HTML file).

The METHOD Attribute

It is also necessary to specify how the data from the form will be submitted to the script designated in the ACTION attribute. How data will be submitted is handled by the METHOD attribute. There are two possible values for the METHOD attribute: GET and POST.

> GET Method

Generally, the GET method is the default method used by browsers to submit form data. The data from the form is passed to the server as name/value pairs appended to the URL of the script manipulating the data.

Example



However, the GET method has its disadvantages:

• Since the data appears as plain text in the URL, the method may be considered to be insecure.

• There is a limit to how much data can be passed with the GET method. Most browsers limit the size of the address to a few thousand characters.

• Extended character sets: It may be very difficult to send information consisting of extended character sets such as Chinese and Japanese.

Despite its disadvantages, the GET method also has its advantages:

• Its simple to deal with; in the above example it’s easy to see that the Name field has been set to "John Smith" and the Age has been set to "25".

• The encoding for the form is simple; e.g. the "+" symbol is used to represent a space, and non-alphanumerical characters are replaced with %nn, where nn is the hexadecimal ASCII code for the character. The individual form field values are separated by ampersands.

• Since the form data is passed as part of the address it is possible to bookmark a link. Search engines use the GET method as a means of passing search criteria from a form.

> POST Method

The POST method is more appropriate than the GET method when a large amount of data has to be handled. The POST method transmits all the form data immediately after the requested URL. In other words, once the server has received a request for a URL on a form where the POST method has been used, the server knows that it has to continue listening in order to receive the form data.

The main advantage of using the POST method is that a large amount of information can be submitted in this way because the form’s contents do not constitute a part of the URL. It is even possible to send the contents of files using this method.

The NAME Attribute

It is often useful to check the form’s data before it is sent to the server. The process of doing so is known as form validation. Form validation is often achieved by either the use of JavaScript within the HTML document containing the form, or specific parts of the script handling the form’s data input. The first of these is a client-side form validation solution, whilst the second is a server-side form validation solution. If any rules are broken the user is prompted to take some corrective action before resubmitting the form. Once the form’s input is validated then the contents of the form are sent to the server. The NAME attribute can be set to an alphanumeric value such as "registrationform". The setting of the NAME attribute enables the form’s manipulation by a scripting language.

The ENCTYPE Attribute

When the data is passed from a form to the server, it is usually encoded just like a URL. Spaces are replaced by the + symbol and non-alphanumeric characters are replaced by %nn where nn is the hexadecimal ASCII code for the character.

It is possible to set the encoding method for form data by setting the ENCTYPE attribute. The ENCTYPE form attribute can be set to application/x-www-form-urlencoded. When using a mailto scheme in the ACTION attribute however, the encoding type of plain/text might be more desirable.

Another form of encoding can also be used: multiform/form-data. This encoding is used when passing files back via a form, in order to designate where each file begins and ends. In this encoding, spaces and non-alphanumerical characters are preserved with data elements separated by special delimiter lines.

Simple Form Syntax

Here is an example of a simple form (for the purposes of this example the contents of the form have been omitted):

Form Stub

Associated tags are placed here.

[pic]

Form Controls

A form consists of fields or controls, as well as the tags necessary to structure the form and control its presentation. The controls are the items filled in or manipulated by the user to indicate the state of the form. Form controls include text fields, password fields, text areas, pop-up menus, scrolling lists, radio buttons, check boxes, and buttons. Form may also include hidden form controls.

The most common tag used to specify a form control is the tag. However, in conjunction with the and tags, are also common in forms.

Text Fields

Text fields are generally one line long and used to gather text input such as a person's name and address. These fields are specified with the tag.

Simple Text Field

The simplest type of form control is the text field type. To set a text field control, use the element and set the TYPE attribute to be equal to TEXT:

Example

Ideally all form controls should be named in order to uniquely identify them.

The above example creates a one-line text field that will be associated with the name UserName:

It is important when selecting a name to choose one, which is logical and is unique on the form. The name will be used when the form is submitted, as well as for manipulation by scripting languages.

By default unless specified, the text field generally will be 20 characters wide. To set the size of the field in characters, use the SIZE attribute.

Example

The value of the SIZE attribute states the number of characters to be displayed. However, it is possible for the user to type more characters than the value of the SIZE attribute. If that is the case, the typed text would start scrolling to the left.

In order to limit how many characters can be input into the text field, you need to set the value of the MAXLENGTH attribute to the maximum number of characters, which you want to allow users to type in the field. The browser will prevent the user from typing more than the number of characters specified by the MAXLENGTH’s value. To set a text field that shows 30 characters but allows a maximum input of 60 characters, you can use the following example:

The VALUE attribute of a text field is used to specify the default text to appear in the field when the form is first loaded.

Example

A very simple example of a basic text field is shown below:

Text Field Example

Chocolate Bars Order Form

Customer Name:

[pic]

Password Fields

The password field is created in similar way to the simple text field, except that the input to the field is not revealed. In many cases, the browser may render each character as an asterisk or dot to avoid people seeing the password being entered.

The password field discourages an unscrupulous user to look at your screen in order to find out the secret data that you are inputting on screen.

To create a password form field, you should use the tag, but set the TYPE attribute to be equal to PASSWORD. As with the text field, it is possible to specify the size of the field in characters with the SIZE attribute and the maximum number of characters, which can be entered with MAXLENGTH in characters. It is advisable to limit the length of the password field so users don't become confused about how many characters they have entered.

Setting a default value for the password field with the VALUE attribute doesn't make much sense since the user can see it by viewing the HTML source of the document.

Example

Password Field Example

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download