Quick Introduction to HTML
Forms

What are web forms?

A web page form allows the user to send information to a special program on a web server computer.

Although it is relatively easy to write the HTML that describes the form in the web page, the program to which it communicates must either be written by a computer programmer, or bought. In any case, the program is not part of HTML. This page will describe only the HTML part of implementing a working web form.

How do web forms work?

The HTML of a form consists of a form tag enclosing tags for various form controls, including text entry fields, various buttons, a file selection control, and menus. (You are probably familiar with all of these from pages you have visited.) The user types in the text fields, clicks on the buttons and selects items from the menus. Finally, the user submits the form, usually by clicking on a special submit button.

The exact action that follows from submission is specified by the form tag. Generally, the user’s browser gathers the settings from all the controls in the form, and sends the collected information to the site specified by the form tag, then waits for the server to respond. The response is in the form of a new HTML document, which the browser then displays to the user.

A single web page may contain multiple forms. However, the information that is submitted to the server comes from the form whose “submit” button was clicked.

Parts of a form

Text area

<textarea id="myTA" rows="2" cols="20">
Multiple lines of
initial text
</textarea>

Text field

<input type="text" value="hello" id="myField"/>

Password field

<input type="password" value="" id="myPass"/>

Button

<input type="button" value="Push Me" id="myPush"/>

Radio Button

<input type="radio" id="myRadioButton" />

Check box

<input type="checkbox" id="myCheckbox" />

Submit button

<input type="submit" value="OK" id="myOK" />

File Selection

<input type="file" value="Browse..." id="myGetFile" />

Menu

<select id="myMenu" >
 <option>item a</option>
 <option>item b</option>
 <option selected="selected">item c</option>
</select>

Label

<label for="myMenu">a Label</label>

Form submission

Hidden controls

Disabled and read-only controls

Read-only controls

Forms and the keyboard

Keyboard focus

Access keys

Forms and tables

Forms and scripts

By combining a form with a script, you can very much improve the user’s experience.

One common use of a script is a field preverify. The idea is to check the correctness of information provided by the user and alert them of any problems, before they submit the form.

Forms and cookies

A cookie is a small bit of information stored by the web browser on behalf of a specific web site. When the user again looks at the web site, the cookie is sent back to the web site. The cookie is only sent back to the web site of its origin.

The proper use of cookies is to make the user’s browsing experience more convenient. For example, to pre-fill values in a form based on values the user has typed before.

Web-equette for cookies is: whenever possible, make your page so that the use of cookies will enhance the user’s experience, but is not required. If cookies are required for your site, explain this to the user, and explain what they need to do to use the site.

Many sites use cookies to collect statistical information on their users for marketing purposes. This is considered by many people to be an intrusion, and for this reason many people turn cookies off in their browsers.

Forms and security

Unless further steps are taken, the information in a form is transmitted over the Internet as plain text. Such information is very easily intercepted, and could be used against the user.

Modern servers and browsers facilitate encrypted (or coded) communications for just this sort of information.

The communications Internet service HTTP is by definition in plain text, but that of the service HTTPS is encrypted. To make sure a link to a document is encrypted, put in the link’s URL the service https.