The Web, Untangled


◀ The three-tier web architecture Table of contents CSS ▶

1 Basic HTML forms

HTML forms are created using the <form> tag:

<form action="script.php">
<\form>

The "action" parameter specifies the name of the PHP file that the form data will be sent to.

1.1 Text Boxes

Use the <input> tag to create textboxes:

<form action="script.php">
  <input type="text" name="username">
<\form>

When the user submits the form (using the "submit" button described below), the contents of this textbox are sent to the "script.php" page where they can be retrieved with $_GET['username'], as described in the "superglobals section.

Other types of text box can be added using the type attribute:

<form action="script.php">
  <input type="text" name="username">
  <input type="number" name="height">
  <input type="date" name="birthday">
<\form>

In the above examples, the "height" textbox accepts numbers as input, and the "birthday" textbox makes it easy to enter dates.

1.2 Submit button

Once the user has entered information into the form, they need to be able to submit it for processing. This is done with the "submit" button:

<input type="submit" name="Submit">

This goes into the form, usually as the last item:

<form action="script.php">
  <input type="text" name="username">
  <input type="number" name="height">
  <input type="date" name="birthday">
  <input type="submit" name="Submit">
<\form>

The name attribute is both the button's label and its identifier when accessed with superglobal variables.

When the button is clicked, all of the form's information is sent to the page specified with the form's action parameter (in this case, script.php). The default way to send it is using a GET request, which I will now explain.