Beginning
Overview
IDE
Projects
Forms
Controls
Intrinsic Ctrls
ActiveX Ctrls
Code
Commands
Cmd Reference
File Handling
Printing
Distribution

Intermediate
Menus
Dialogs
Mouse
Drag and Drop
Graphics
Error Handling
Databases
Database Controls
SQL

Advanced
API
Objects
Internet File Transfers
UNIX/CGI/Perl
Perl Commands
JavaScript
Web Page Forms

GBIC >> VB >> Tutorials >> Web Page Forms
Web Page Forms
This tutorial is intended to supplement my Perl/CGI and JavaScript tutorials. Web page forms were the first interactive capabilities made available to web developers, followed by the use of CGI scripts and more recently by the rise of JavaScript. All three can act in concert to create exciting, but more importantly, useful web pages.

Overview Form Tag Web Sites
Textarea Element Input Elements Select Element


Return to top of document

Overview

The reason for forms is pretty basic. Originally, web pages were static - you asked for a web page content from a web site and that's all you got. There was no method for a user to pass information on to a web site for subsequent processing.

Forms changed all that! A form is simply a named group of buttons, textboxes, checkboxes, radio buttons, selectable lists or clickable images which collect information from the user and pass it to a web site for action. Not exactly real-time, two-way interactivity but a big step forward. The name of a form comes into play later - see my JavaScript tutorial for more information.

A web developer can put one or several forms on a page, each acting independently of each other. Within each form you can create as many input elements (textboxes, textareas, checkboxes, radio buttons, clickable images or selectable lists) as you want on a page. All forms allow a Submit button which, when pressed, can submit the status of each input element to a web server. Once there, a CGI script may be used to process the information, including the creation of a web page in response to the submittal of information. My CGI/Perl tutorial covers this topic.


Return to top of document

Form Tag

Creating a form couldn't be simpler. In the body of the web page, just put the following code:

    < form action="mailto:gbeene@airmail.net" method="post" enctype="text/plain"  >
    < /form >

With just this code, nothing would be displayed. To see something you have to add one of many form elements which I will cover later in this tutorial. First, I'll discuss the three attributes (action, method, enctype) you can use in a form tag. All three are optional, but how you use them determines what happens when you press the Submit button on the form.

  • Action
    The "Action" tag is simply a URL which is used when the Submit button of a form is pressed. In practice, there are 3 useful values which you will use in a form. There are other options, but the vast majority of web page forms use one of these three:

    • Web Page
      If all you want to do is transport your visitor to another web page when the Submit button is pressed then simply set the action tag to the page URL as follows, using whatever URL you choose:
                  action="http://www.vbinformation.com" 
              
    • CGI Script
      If you want a web server to execute a CGI script using the form information, then you use the following syntax:
                  action="/cgi-bin/cgiemail/feedback.txt"
              
      In this example, the CGI script 'cgiemail' is found on the web server in the cgi-bin directory and uses the feedback.txt text file as a template for a response. This particular CGI script responds to the user with with a web page acknowledging receipt of the form information and then emails the web site owner with the information in an easy to read format. The creation and use of such scripts is covered in my CGI/Perl tutorials. Not all CGI scripts require a file name when they are called, so the action attribute may simply be the URL of the script alone.

    • MailTo
      The web browser itself is written with the ability to generate an email to an email address of your choosing. To make this happen when the Submit button is pressed, the following action tag is used:
                  action="mailto:gbeene@airmail.net"
              
      This approach will have your browser call up your default email application, pre-addresed to the email address you put in the action attribute. While this is a quick and dirty approach, the use of a server-side email CGI script is preferred (as in the example above) because it provides more flexibilty and does not require the use of the local email application.
  • Method
    This tag determines only how the information is sent to the web server for action and is transparent to the user of your page. Normally, an HTTP query to a server consists of information contained in a string that the server will interpret. The method attribute will determine how the form information is added to that HTTP query string - as a single long string, or as two separate strings. Both can be accepted by a server but the CGI script that is receive the data will normally be written to expect one or the other. A CGI script could be written to accept and process the form data regardless of how it was transmitted, but this is generally not done. Web site developers will often use pre-written CGI scripts which means they must follow the method proscribed by the CGI script. The three available methods are known as Post, Get and Head.

    • Post
      Submits the form information as a second text string, separate from the normal HTTP query to the web server. Use this attribute value as follows:
              method="Post"
              
    • Get
      Submits the form information as one long string, immediately behind the HTTP query. A '?' is used to separate the query from the string. You will likely have seen this type of query often since it is used in many search queries. Use this attribute value as follows:
              method="Get"
              
    • Head
      There are some circumstances where you might want to retrieve just the header information about a URL, such as date modified to determine if the file has changed since you last viewed it. Accessing such a truncated set of information is much faster than grabbing the entire URL.
              method="Head"
              

  • Enctype
    There's not much to say here. Normally this attribute is left off and the default 'text/plain' value is used. Unless your CGI script or web server required a special format, this is the one you will always use.


Return to top of document

Input Elements

Inputs are the real meat of a form and there are eight possibilities. First, however, here is the list of seven attributes which can be used with the input elements. In the element list that follows, I show which attributes can be used with which input element - but you'll see that it is pretty obvious:

First, the attributes are:

  • name
    Gives a name for the input element. It is used by the CGI script on the server to keep the incoming data separate. All input elements use this attribute.
  • type
    Determines which of the input elements are displayed (see the full list below).
  • value
    Determines the initial content of a textbox, hidden, or password input elements. Also defines the label for the submit and reset buttons.
  • checked
    Determines whether the starting state of a checkbox or radio button is checked.
  • size
    Determines the display length of an input element (text or password)
  • maxlength
    Determines the maximum length of a string that can be captured and sent to the server.
  • src
    Used only with the image element, this identifies the source URL of the image that is to be displayed.
  • rows, cols
    Used only with the textarea element. Determines the display size of the area where text can be entered.
Now, here are the input elements which can be inserted in a form on a web page:
  • Text
    Allowed attributes: name, type, value, size, maxlength
    This is where a user types in some information.
        <input type="text" value="defaulttext" size="30" maxlength="100">
        
    Here is the text element that this code would generate:

  • Checkbox
    Allowed attributes: name, type, value
    Like any checkbox, click on it to change its state.
        <input type="checkbox" checked">
        
    Here is the checkbox element that this code would generate:

  • Radio Button
    Allowed attributes: name, type, value
    Only one radio button can be selected at time. When you click on one, all the others become unselected. Each radio button must use the same name attribute.
        <input type="radio" value="on">
        
    Here are some radio button elements that this code would generate, showing that only one can be selected at a time:

    You can have one or more groups of radio buttons. Simply give each member of the second group a new name. This will create a second group of radio buttons which acts independently of the first group.

  • Password
    Allowed attributes: name, type, value, size, maxlength
    This is exactly like a textbox, but when the user types in something, only "*" characters are displayed. However, when the form is submitted to the web server it is sent as plain text. So don't mistake the "*" display as being some form of encryption for transmission over the web. It only provides protection against someone looking over your shoulder as your type.
        <input type="password" value="defaultvalue" size="30" maxlength="100">
        
    Here is the password element that this code would generate:

  • Hidden
    Allowed attributes: name, type, value, size, maxlength
    Sometimes you want to pass information to the web server which is not generated by the user. The hidden element allows you to place information on the web page which is not displayed, but which is sent to the web server when the Submit button is displayed. This feature is most useful when the page that is being displayed has been generated dynamically (created on the fly by the web server and sent to your browser as a response to a prior query). With the hidden element the form can contain information that will tell the server something about the prior request. As you will see in my JavaScript tutorial, the hidden element can also be used to stored information generated locally (using JavaScript) as a result of user input before the user information is actually sent to the server. An example of this would be a total of a user's order on a commercial site - where the total is generated by a JavaScript and stored in a hidden element for transmittal to the web server.
        <input type="hidden" value="secrettext">
        
    Remember, the hidden element is not displayed by the browser, but its value is sent along with all other form information to the web server.

  • Image
    Allowed attributes: name, type, src
    For some reason, this input element is not often discussed in the tutorials that I've seen. Most likely it is because the normal image tag for a web page supports the MAP attribute which essentially does the same thing. But, even so, you can insert an image into the form and when a use clicks on the image you get the same effect as though the Submit button was pressed. The location on the image where the mouse was clicked will be sent as part of the form's information.
        <input type="image" value="Hello" src="picture.jpg">
        
    Remember that a picture looks no different in a form than it does anywhere else on a web page. Clicking on a form image will cause the form to respond as thought the form's Submit button was pressed.

  • Button
    Allowed attributes: name, type, value
    This input type is simply a button like any other you've seen. However this button doesn't do anything in a form - unless you make it. The Reset and Submit buttons described below are special cases of a standard "button" type. Both the Reset and Submit types of button are automatically recognized by a form, but pressing a standard button will not cause anything to happen at all - unless you use one of the scripting language to respond to the Click event. See my JavaScript tutorial for more information on this topic.
        <input type="button" value="Reset">
        
    Here is the reset element that this code would generate:

  • Reset
    Allowed attributes: name, type, value
    Press this button, and all the input elements will be set to their "value" attribute value. For fill-in-the-blank forms, this is equivalent to clearing all input fields.
        <input type="reset" value="Reset">
        
    Here is the reset element that this code would generate:

  • Submit
    Allowed attributes: name, type, value
    Press this button and the information in the form will be sent according to how you've set the value of the 'action' attribute on the form tag.
        <input type="submit" value="Submit Form">
        
    Here is the submit element that this code would generate:

    One comment here: If you create a form which has only 1 text input element (nothing else, including no buttons), then pressing enter while the cursor is in the text box will cause the form to act just as though a Submit button were pressed - even though there is not Submit button.


Return to top of document

Select Element

One of the useful ways of presenting data is to provide a scrollable list for the user to select from or to display a single item with the option of presenting a drop-down list from which the user may select an item. This approach is typically used to minimize the size of the display - showing just a few short lists rather than displaying one long list with every single item for the user to select from. Here is such a list and the code which generates it:
<select multiple size="30">
   <option> dog
   <option> cat
   <option checked> horse
   <option> pig
   <option> cow
</select>

The optional presence of the multiple attribute allows the selection of more than one item from the list. Here is the select element that this code would generate:

And without the multiple and size codes you get a dropdown list:


Return to top of document

Textarea Element

Allowed attributes: name, value, rows, cols

Similar to a textbox, but allows the user to view or input multiple lines of text. It uses a tag that is more like a normal HTML tag:

<textarea name="yourtext" rows=5 cols=20>
</textarea>:
Here is the textarea element that this code would generate (with some text already typed in:


Return to top of document

Web Sites

If you want to learn more about HTML forms, I suggest the following sites: