HTML Forms Quick Start

This document is intended to be an extremely brief introduction to HTML forms. Many details are omitted or simplified (e.g. not all syntax variations are presented). For more information, check out the HTML Tutorial from W3Schools.

See the HTML/PHP Local Quick Start for details on where to put your HTML files and how to view them.

Contents

• Introduction to HTML Forms
• Form Elements

Introduction to HTML Forms

HTML forms allow a user to input information which is then sent to the webserver for processing. There are many different kinds of form elements, intended for different kinds of input.

A form is denoted by the <form> tag:

<form action="action.php" method="POST">
  ...
</form>

The action attribute specifies the name of the script (on the webserver) that will process the data entered in the form when the form is submitted; the method attribute specifies how the data is sent to the webserver. There are two choices for the method, "POST" and "GET". (a quick discussion of POST vs GET)

The form tag itself doesn't generally produce any visible effect - it's what replaces the "..." between the <form> and </form> tags that defines what the form looks like and what can be entered. Pretty much any tag that can occur in the body of an HTML document can go inside a form, so you can use paragraphs, headings, lists, tables, etc to format the form.

Form Elements

The other ingredients in a form are form elements - these are what allow the user to enter information.

Each form element has a name attribute. It is very important to specify a name - this is how PHP will be able to access the values the user entered into the form. In general each form element should have a different name (exceptions are noted below).

Input Fields

Input fields are the most basic form of input, allowing the user to enter some quantity of text.

<input type="text" name="input1" value="default text" size="25">

<textarea rows="3" cols="25" name="input2" wrap="soft">
default text
</textarea>

Drop-Down Lists

A drop-down list allows the user to choose one option from a predefined list of options, presented in a drop-down list format.

<select name="input3">
  <option value="NY"> New York
  <option value="MA"> Massachusetts
  <option value="VT"> Vermont
</select>

Radio Buttons and Checkboxes

Both radio buttons and checkboxes allow the user to choose one or more options from a predefined collection, but with all the choices presented at once (instead of in a drop-down list format). Radio buttons only allow one choice to be selected at a time, and will automatically unselect a previously-selected choice if a new one is made. Checkboxes allow multiple choices to be checked simultaneously.

<input type="radio" name="input4" value="yes" checked> yes <br>
<input type="radio" name="input4" value="no"> no <br>
<input type="radio" name="input4" value="maybe"> maybe

<input type="checkbox" name="input5[]" value="yes" checked> yes <br>
<input type="checkbox" name="input5[]" value="no"> no

Note that setting the "value" attribute does not cause labels to appear for the boxes - you must supply your own.

Submit and Reset Buttons

Every form needs at least a submit button, so the user can send the form data to the server for processing.

<input type="submit" value="submit form">

<input type="reset" value="reset form">

Hidden Elements

A use for hidden elements is described in the Hidden Form Elements section of the PHP Web Quick Start.

<input type="hidden" name="input6" value="secret message">

last updated: --Tue Oct 16 12:17:28 EDT 2012-- page owned by: bridgeman@hws.edu