Tutorial HTML - Creating Forms


  • A form is simply another type of HTML document, or part an existing HTML document, that allows users to provide input by performing any of several actions.
  • The server must run a program called a CGI (Common Gateway Interface) program to do something with the data sent in from the form.
  • The CGI program is usually written in a language like Perl, C, or even in a shell script on UNIX machines.


  • The <FORM> container holds all the other contents of the form.
  • This container has three attributes: ACTION, METHOD, and ENCTYPE.
    • The ACTION attribute points to the application that is going to process the data captured by the form.
    • You can have the data sent to the server and processed by a CGI script, or you can have the data e-mailed directly to your mailbox.
    • Common Gateway Interface (CGI):
      • If you choose to use the CGI method, the URL of the CGI script should specify not only the path but also the filename of the receiving program.
      • <form action="http://www.wilbur.com/cgi-bin/form.pl" method=post>
    • Electronic Mail:
      • Send e-mail containing the data that were collected by the form.
      • <form action="mailto:someone@somewhere.com" method=post>
    • The METHOD attribute tells the browser how to send the data to the server.
    • There are two ways the data can be sent: GET or POST.
    • GET:
      • GET method creates a long string that contains all the data the user entered.
      • It sends those data back to the server, where they are placed into a single environmental variable and made available in that form to the CGI application.
    • POST:
      • POSTing data allows you to send much more information to the server.
      • However, it entails a second transmission across the Net to establish communication before the data are sent.


  • GET vs POST
    • If you are sending just a few bytes of data, use GET. That method is fine for short data streams and is easy to process.
    • When your form processes more data, or if it has a potentially long text field, use the POST method to ensure that data won't be truncated (chopped off) and lost.
    • It is easier to build a CGI script to support GET than POST because you don't need to do the extra steps of decoding POST parameters.
    • POST can be a more secure method of transmission than GET.


    • The ENCTYPE attribute allows you to specify a different encoding format for the data sent from the form to the CGI script.
    • The normal coding type is called application/x-www-form-encoded. This coding is necessary to prevent the data from becoming corrupted during transmission from the browser to the server.



  • The <INPUT> tag is the tool most often used to create the actual input areas of a form.
  • All the different forms of input require the use of the NAME attribute, and all the <INPUT>forms require the TYPE attribute.
  • NAME:
    • Every form of input except the immediate buttons (submission and reset) requires the NAME attribute.
    • The NAME attribute specifies the label, or name, that makes up the left half of the NAME=VALUE pair.
    • Make the name meaningful.
    • Use lowercase letters for the name.
    • Start the name with an alphabetic character.
    • Make the name continuous.


  • Text-entry fields, TYPE=TEXT, are probably the most common type of <INPUT> field on most forms.
  • SIZE attribute specifies the size of the text-entry field.
  • MAXLENGTH attribute limits the actual number of characters the user can enter.
  • VALUE attribute use only when you think that the user will most likely take the default value you have provided.


  • If you set the TYPE to PASSWORD, anything the user types will appear as special characters, like asterisk.


  • Using a checkbox or a set of checkboxes is an easy, fast way for your user to enter data is to select and deselect different items.
  • Several checkboxes from a series can be selected.
  • Please remember, you MUST put the same name for all the checkboxes.

    <input type="checkbox" name="choice" value="blue">blue
    <input type="checkbox" name="choice" value="red">red


  • Radio button is best when you want to ensure that the user selects only one option.
  • Please remember, you MUST put the same name for all the radio buttons.

    <input type="radio" name="option" value="blue">blue
    <input type="radio" name="option" value="red">red


  • TYPE=RESET provides a button that causes the browser to reset, or change, all the input areas back to the way they were when the user entered the page.


  • TYPE=SUBMIT button does what it implies - it starts the process of the browser encoding and sending the information to the server.


Input Type


<input type="text" size="15">
<input type="password" size="15">
Text Area
<textarea cols=35 rows=5> </textarea>
Radio Button
<input type="radio"> Choice 1
Choice 2
<input type="checkbox"> Option 1
Option 2
Button <input type="button" value="Click Here">
Submit Button <input type="submit" value="Submit">
Reset Button <input type="reset" value="reset">





Please copy these exercise into Notepad and save (Don't forget to put .html). Then, launch Internet Explorer and go to File > Open > Browse (find your saved file). Click OK.


back Creating Tables | Overview of Dreamweavernext








Copyrights Reserved © Web Publishing 2003


  • Assignment 1
  • Assignment 2
  • Quiz 1
  • Quiz 2
  • Project



To all my students!

Please visit this web site regularly.