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>

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 -------

TEXT (default), what we've seen. Optionally you can specify SIZE or MAXLENGTH, as number of characters
Type a sentence:
```
    Type a sentence: <input name="sentence" value="It was"  />
```
PASSWORD - like TEXT, but input shows up as spots.
Tell a secret: Hey, stop looking over my shoulder!
```
Tell a secret: <input type="password" name="secret" /> 
Hey, stop looking over my shoulder!
```
HIDDEN - nothing shows. The value you code is passed to the server
```
<input type="hidden" name="Author of Page" value="Lin Jensen" />
```
RADIO - a circle that can be checked. In group of these with the same name, only one can be checked, like the station buttons on a car radio.
CBC
CBC Radio 2
CJMQ
```
<input type="radio" name="station" value="cbc" /> CBC
<br /><input type="radio" name="station" value="radio2" /> CBC Radio 2
<br /><input type="radio" name="station" value="cjmq" /> CJMQ
```
CHECKBOX - A square box that can be checked. If checked, it appears in the query string (default value="on"), otherwise it does not appear. (This is different than TEXT, which appears even if value="" (empty))
I like pizza:
```
    I like pizza: <input type="checkbox" name="like pizza" />
```
note: checkboxes, like radio buttons, may have the same name, in which case they better have different values. In the case of checkboxes, this means that the same name may appear more than once in the query string. The form action must somehow be prepared to handle this eventuality.
SUBMIT, RESET, BUTTON - Look like buttons, any value appears on the button. (Don't need a name.)

    <input type="submit" />
    <input type="reset" />
    <input type="button" value="Do nothing" />

------- 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>

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