Last updated 2017 March 13

Forms

W3C schools on HTML form elements and examples Chapter 18 of the online book Eloquent JavaScript by Marijn Haverbeke, discusses the DOM model.

Examples

A simple form with name password and email fields — Example 1.
A form showing many different fields and ways of dealing with fields — Example 2.
For those who are interested here is the cgi script that processes the above forms — cgi script.

Elements

The elements within a form can be used outside of a form for interaction with the user, where the interaction is implemented with JavaScript.

The purpose of the form element is to group form elements as a unit. The form button elements work on the form group as a unit. The general structure using the form element is the following.

<form name="formName" // Identify the form
method="POST" // Preferred encoding for form data for transmission to a processing program
action="URL for a php or cgi script to process the form data" >

… The HTML for the contents of the form …

</form>

Form button elements

Submit — input type=submit
Reset — input type=reset
File input — input type=file

Form input elements

Textarea
- Field size
- Required fields
- Place holder text
Input fields
List of input types is here.
- Text — input type=text
  - Datalist element — inner HTML is a list of option elements with value="anOption" for the text element.
- Password — input type=password
- Radio button — input type=radio
- Checkbox — input type=checkbox
- URL — input type=url
- Telephone — input type=tel
- Hidden — input type=hidden
- Select (Option list)
  - Optgroup element groups the options, attribute label="groupName"
- Image — Use an image as a button
  <input type="image" src="login.gif" alt="Login button">
  when the image is clicked the form is submitted.
  Posts <x, y> coordinates within image when clicked
Label — associate with form elements, when clicked that element is selected. See radio buttons and checkbox in Example 2.
The for attribute links the label with the form element.