CPSC 343 Database Theory and Practice Fall 2017

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

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.

purposesyntax/examplewhat it looks like
single-line input
<input type="text" name="input1" value="default text" size="25">
  • value (optional) - initial text to be displayed in the text element
  • size (optional) - width of the text element
multi-line input
<textarea rows="3" cols="25" name="input2" wrap="soft">
default text
</textarea>
  • the text between the tags, if any, is the initial text to be displayed in the textarea element
  • wrap (optional) - specifies what to do if the user types text which exceeds the width of the text area ("soft" will cause the text to wrap)

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.

purposesyntax/examplewhat it looks like
drop-down list
<select name="input3">
  <option value="NY"> New York
  <option value="MA"> Massachusetts
  <option value="VT"> Vermont
</select>
  • the value associated with the selected option is sent as the value of the select element, while the text after each <option> tag is what appears on-screen as the label of the list item

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.

purposesyntax/examplewhat it looks like
radio buttons
(only one button in a group can be selected at a time)
<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
  • all of the radio buttons in one group have the same name (the name is what defines the group)
  • the value of the selected button is sent as the value of the input element
  • checked (optional) - the button which is checked by default
 yes
 no
 maybe
check boxes
(more than one button can be checked at a time)
<input type="checkbox" name="input5[]" value="yes" checked> yes <br>
<input type="checkbox" name="input5[]" value="no"> no
  • the value is sent as the value of the input element if the box is checked (if the checkbox name ends with [], PHP will create an array containing the values of the checked boxes)
  • checked (optional) - button is checked by default
yes
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.

purposesyntax/examplewhat it looks like
submit the form
(send to the server for processing)
<input type="submit" value="submit form">
  • value (optional) - text displayed on the button
clear user inputs in the form
<input type="reset" value="reset form">
  • value (optional) - text displayed on the button

Hidden Elements

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

purposesyntax/examplewhat it looks like
hidden element
(nothing is displayed on the screen, but the value of the hidden element is submitted when the form is submitted, just like visible elements)
<input type="hidden" name="input6" value="secret message">
 

Valid HTML 4.01!