Quick Links

• Introduction
• Basic Page Structure
• Lists
• Links & Images
• Tables
• Forms

Forms

To have an interactive website, you need to get information from the user and then act upon it. If you are using a client side language such as Java, you can run an Applet on the web page. However, this means that all of the data to be used must be sent from the web server to the client machine. On the other hand, if you are going to allow users to access a data base on the server or you want to dynamically create web content, you usually will run a script or other program on the server which holds your web pages.

An HTML form is the usual method for obtaining a request from the user. This page shows how to set up such a form. To learn how to process user input from an HTML form in a PHP script, see the PHP workshop tutorial page. Check out a simple example of a functioning HTML/PHP pair of scripts (an HTML script which calls a PHP script) for a Madlib.

An HTML form usually presents the prompts for user input in a table. This way the prompts and the places for user input can be organized esthetically. Here, however, we will deal with a single user input.

The following HTML source code would generate a form which consists of just two lines. It serves as part of the body of an HTML page to find out how many dice rolls the user would like to have simulated.

• The first line of HTML is used to produce the heading for the web page.
• The form start and end tags (<form>...</form>, lines 2 & 15) surround the code for the table. The form tag has two attributes, method and action.
  1. Method indicates how the information will be passed. Here it is GET; the other option is POST. (Click here for a discussion.)
  2. Action specifies the script which will be executed when the user clicks on the submit button.
• The table specification (lines 3-14) sets up two lines.
  1. Lines 4-7 give the prompt for the user and a text field for the user's response.
  2. Lines 8-13 set up the submit button (using the text "Roll Them!") for the user to click after typing in how many rolls he would like and a reset button (which only nulls the text in the text box).

 1. <h1 align="center">Rolling a Pair of Dice n Times</h1>
 2. <form method="GET" action="dicerolls.php">
 3.  <table border="1">
 4.   <tr>
 5.    <td>Number of Rolls</td>
 6.    <td><input type="text" name="hm" value="" size="5"></td>
 7.   </tr>
 8.   <tr>
 9.    <td  colspan="2" align="center">
10.     <input type="submit" value="Roll Them!">
11.     <input type="reset">
12.    </td>
13.   </tr>
14.  </table>
15. </form>