HTML Forms

HTML forms are used to make web pages interactive. We will use them to input data from the user. Eventually we will send the data to a database server, but for now, we will directly process the user's inputs.

Online Tutorial
There is a nice, self-paced, online tutorial on HTML here.

Building a Form
A form is an HTML element, enclosed within ... tags. Every form must include three components:
 * The submission type (GET or POST) is defined by the METHOD attribute.
 * The body of the form contains one or more  elements.
 * The form's destination (a server, usually) is defined by the ACTION attribute.

Example 1
Save this form as simple.php in your document root and open it in your browser. It will simply redisplay the form.

  Building a Form   " METHOD="GET">  Search:      </HTML> Here's how it works:
 * $_SERVER['PHP_SELF'] -- This environment array variable means the form itself handles the form.
 * echo(htmlentities) -- This echoes the contents of the form, thus re-displaying itself.
 * METHOD='GET' -- This encodes the form as a URL (See here for the difference between GET and POST).

Example 2
Save this code as simple2.php. In this example, an if/else statement is used to distinguish between the form itself and the values submitted through the form. <HTML>  Building a Form</TITLE> </HEAD>  <?php $search	= htmlentities($_GET["search"]);   // Get the data stored in the form's search element $self =	htmlentities($_SERVER['PHP_SELF']); // This file itself will process the form. if ($search ===	'' ) { echo ('               Search: <INPUT TYPE="TEXT" NAME="search" />    </LABEL>    <INPUT TYPE="Submit" VALUE="Go!" />    </FORM>'); } else { echo	"The search string is: $search "; } ?> </BODY> </HTML> After loading this page in your browser, use the browser's View source to see the HTML document it generates.

Example 3: Input Types
This example illustrates some of the various input elements. <HTML>  Building a Form</TITLE> </HEAD>  <?php $search	= htmlentities($_GET["search"]); $self =	htmlentities($_SERVER['PHP_SELF']); if ($search ===	'' ) { echo ('   A Sample Form          Search: <INPUT TYPE="TEXT" NAME="search" /> </LABEL>    <BR> Textfield: <INPUT TYPE="Text" NAME="name" VALUE="my name" MAXLENGTH="max characters allowed" /> </LABEL>    <BR> Text area: <TEXTAREA NAME="suggestions"	COLS="40" ROWS="5"> </TEXTAREA>	</LABEL>    <BR>       <FIELDSET> Checkboxes:          Chocolate <INPUT TYPE="checkbox" NAME="icecream[]" VALUE="chocolate" /> </LABEL>         Vanilla <INPUT TYPE="checkbox" NAME="icecream[]" VALUE="vanilla" /> </LABEL>         Strawberry <INPUT TYPE="checkbox" NAME="icecream[]" VALUE="strawberry" /> </LABEL>       </FIELDSET>       <FIELDSET> Radio buttons:          Chocolate <INPUT TYPE="radio" NAME="topping" VALUE="chocolate" /> </LABEL>         <LABEL>Marshmallow <INPUT TYPE="radio" NAME="topping" VALUE="marshmallow" /> </LABEL> <LABEL>Butterscotch <INPUT TYPE="radio" NAME="topping" VALUE="butterscotch" /> </LABEL> </FIELDSET> <LABEL> Hidden: <INPUT TYPE="hidden" NAME="hidden" VALUE="secret" /> </LABEL> Nothing shows on page <BR> Select menu: <SELECT NAME="size" > <OPTION></OPTION> <OPTION>One scoop</OPTION> <OPTION>Two scoops</OPTION> <OPTION>Three scoops</OPTION> </SELECT> <BR><INPUT TYPE="Submit" VALUE="Go!" />   </FORM>'); } else {   echo "The search string is: $search <BR>";   foreach ($_GET as $key=>$value) {      echo "\$_GET[ $key: ]: $value<BR>";   } } ?> </BODY> </HTML>

Example 4. Miles to Kilometers
This example illustrates a simple converter program. Get the input from the user. Convert it to kilometers and display the result:

<HTML> <HEAD> <TITLE>MilesToKm</TITLE> </HEAD> <BODY> Miles to Kilometers Converter <?php $miles = htmlentities($_GET["miles"]); $self = htmlentities($_SERVER['PHP_SELF']); if ($miles === '' ) { echo ('   <FORM ACTION="'.$self.'"  METHOD="GET">    <LABEL> Distance in Miles: <INPUT TYPE="TEXT" NAME="miles" /> </LABEL>    <INPUT TYPE="Submit" VALUE="Go!" />    </FORM>'); } else { $km = $miles / 0.62; print "$miles miles equals:  $km kilometers <BR>"; } ?> </BODY> </HTML>