Introduction To HTML Forms

HTML forms start to introduce the concept of interaction between the web user and the World Wide Web, in particular the Web server or Host. This tutorial introduces you to HTML forms and all the building blocks (elements) that are available to the web author when designing and creating a form.

What Is A Form?

A form is exactly what it says it is, a form that the user fills-in. It can have a variety of different types of input fields that you specify when you design the form (e.g. name, address, age, etc.) and the user fills-in prior to submitting the form. The only problem with HTML forms is that they are not much use by themselves because a traditional HTML form will only work in conjunction with a specially written server-side CGI program or script.

There are two exceptions to this rule and the first exception is the ‘mailto’ protocol (see below) which enables the form’s contents to be mailed to an e-Mail address you specify. Using mailto is a really great way to practice developing HTML forms without having to get involved in CGI programming or scripting at the same time, but you will have to use a Netscape browser because Microsoft browsers don’t fully support the mailto protocol. The other exception is forms where the contents are sent to a JavaScript function for processing. This subject is beyond the scope of this tutorial and will be dealt with more fully in the JavaScript section of Web-Wise-Wizard.

Many other uses for forms and form elements have developed since the introduction of JavaScript extensions to HTML forms and again these will be discussed more fully in the JavaScript section. In the meantime we explain the form tag and it’s attributes and demonstrate each of the available form elements without the JavaScript extensions.

The Form Tag

<form action="receiver.php" method="get" enctype="multipart/form-data" target="_self">
<!-- FORM ELEMENTS ENCLOSED BETWEEN FORM START AND FORM END TAGS -->
</form>

Action

This is where the Web browser sends the form’s contents when the user submits the form. It can be a CGI program (script) that processes the data and this can be on any Web server. Alternatively, if you are using a Netscape Web browser it could be an E-Mail address.

cgi program  A program or script that runs as a process on a Web server and can access the users CGI variables. CGI programs and scripts can be written in a variety of languages which include ‘Perl’, ‘C/C++’, etc.

mailto:  An Internet protocol (similar to ‘http:’, ‘ftp:’, ‘news:’, etc) that provides a gateway to the Internet e-Mail system. Not supported in Microsoft browsers.

Method

Specifies which HTTP method will be used to pass the form’s contents to the CGI interface on the Web server.

http  Hyper-Text Transfer Protocol: A pre-defined protocol to enable communication between a Web browser and a Web server on the World Wide Web.

cgi  Common Gateway Interface : A standard for running external programs from a World-Wide Web HTTP server. CGI specifies how to pass arguments to the executing program as part of the HTTP request. It also defines a set of environment variables. Commonly, the program will generate some HTML which will be passed back to the browser but it can also request URL redirection.

Enctype

Specifies how the form’s contents should be encrypted.

Target

Commonly, a CGI program or script will generate an HTML response which it will pass back to the Web browser. The target attribute specifies where that response should be sent. Possible options are the four HTML magic target names or a names window or frame.