Loading

  • Contents
  • Images
  • Styles
  • Scripts

Introduction To HTML Forms

This entry was posted in Tutorials and tagged , on .

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  e.g. action=”http://www.glsplaypen.com/cgi-bin/orders.cgi”
  • mailto:  e.g. action=”mailto:gil@web-wise-wizard.com” (Netscape browsers only)

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.

  • get  (default) The form’s contents are placed in a CGI variable called ‘QUERY_STRING’ on the Web server and are accessed by a CGI program (or script) using that variable.
  • post  The form’s contents are sent to stdin (a ‘C’ type input stream) on the Web server and the length of the input stream is set in a CGI variable called ‘CONTENT_LENGTH’. The CGI program (or script) accesses the contents via stdin.

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.

  • application/x-www-form-urlencoded (default) If you are submitting your form using the mailto protocol then our e-Mail management program will normally convert this encryption back to plain text in name/value pairs.
  • multipart/form-data This is normally used in conjunction with the ‘file’ element (i.e. input type=”file”).
  • text/plain Specifies that the form’s contents should not be encrypted. Contents sent as plain text in name/value pairs.

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.

  • _blank  Display the response in a newly opened blank browser window.
  • _self  (the default) Display the response in the current frame or window.
  • _parent  Display the response in the parent of the current frame or window.
  • _top  Display the response as the top document in the current window.
  • your_window_or_frame_name  Display the response in a named frame or window, or if no match is found for the name then display the response in a newly opened browser window using the specified name for the window.