Introduction to HTML Forms

A form provides a means of transfering information from the viewer of a web page ( the client ) to the web server. This is done in a query string, consisting of name=value pairs. The server can then do what it likes with the information, including usually "echoing" it back to the client, and storing it in various ways.

Tags for forms

By now you know that everything in html is defined by pairs of tags, which are nested. Within a form there are input tags. Here is the code for a simple form, and how the result looks.
<form action="/jensen/echo.php">
Who are you?
<input name="who" />
<input type="submit" />
</form>
Who are you?
Note:The boxes are a result of applying some css styles.

Discussion

Every form needs an action, that is the name of a "script", another html page containing some program code to receive the information. For now, we will be using a very simple script that only echos back the information. This form had one input of the default type=text, and another, the submit button. If you try out the form, notice the query string in the "Location" field of your browser. It should look something like:
 .../echo.php?who=Joe 
Each input (can) have a TYPE, NAME, and VALUE.
The name appears in the query string. Since the Submit button does not have a name, it did not appear, and it shouldn't, since it contains no information.
The value is typically what is typed in the input box. You may supply an initial value.

Types of INPUT

For complete documentation, see the "Quick Guide" or numerous online references. Here is a brief summary, with links to more detailed discussions:
------ Form containing the examples starts here -------
------- end of example form ------

Other form elements

TEXTAREA

Allows multiple lines of input. Initial value is whatever is between the tags, including newlines. If you want the initial value to be empty, put them up tight together. Note: subject to abuse akin to spam.
Your comments:
<textarea name="defaulttextarea"></textarea>
Your comments:
<textarea name="comments" rows=5 cols=25>
no comment
</textarea>

SELECT lists

Another way to present predetermined alternatives is with a select list, usually presented as a "drop down" box. This has a similar effect in the query string as a group of radio buttons, except that the first option is the default value.
What size pizza?
What size pizza?
<select name="size">
<option>small</option>
<option>medium</option>
<option>large</option>
</select>

MULTIPLE Select lists

By adding the keyword MULTIPLE, we have an alternative to a "group" of checkboxes of the same name (and the same potential for embarrassing the action page.) In contrast to the single SELECT, all the options are usually shown, and none are selected. The user must know to hold down the CTRL key in order to make multiple selections, this could be a problem for inexperienced form users.
Top it with:
Top it with:
<select multiple name="topping[]">
<option>cheese</option>
<option>pepperoni</option>
<option>olives</option>
<option selected>broccoli</option>
</select>

New features in HTML5: types, placeholder, required

HTML5 defines many new features, which are being implements\ed by modern browsers as we speak. These include new input types, such as "email", "date", and "number". (default to "text" if not supported.) All inputs can have the following:

required
Cannot be left blank
placeholder=
Appears in grey to prompt for desired info
Disappears as soon as some input is typed
<form action="/jensen/echo.php">
Who are you?
<input name="who" placeholder="Your first name, please" required >
<input type="submit" />
</form>
Who are you?

Additional Topics: Labels, Combo box (not really)
You may also click on links above for more details.
Back to Contents
Home page of Lin Jensen