HTML Forms

Forms allow us to automate sending and receiving data from a web page, and are useful for: website and forum logins; signing guest books; web based email; online questionnaires etc.

Form - <form> ... </form>
All form elements such as inputs and buttons must go within the form tags. In most cases, a form must have the name, action & method attributes set.
name="?" - A unique name identifying the form, used by the action script.
action="url" - The address (URL) of the script that will process the form data when submitted. In some cases the action URL is not needed, for example when a client-side JavaScript function is programmed into the web page to process the form data.
method="?" - The method used by the action script, post or get. For example, post would be used to submit data to a user-registration form, and get is used for searches or forms that must return information.
Input Field - <input>
Used to create a simple text-entry field for your form, but is also the basis for many other form input types using the type attribute.
name="?" - Unique name for the input to be used by the action script.
type="?" - There are several types of form input fields, text, password, checkbox, radio, file, image, & hidden are among the most common.
value="?" - Initial value or data displayed in the input field when the form is first loaded.
size="?" - Defines the input size or width, typically defined in terms of number characters wide instead of pixels.
maxlength="?" - Maximum length of input field, such as the maximum number of characters for a text input.
checked - Used with checkbox and radio inputs, it sets the field default to be already checked.
Button - <button>
A form button is similar to other form inputs but has it's own set of attributes:
name="?" - Unique name for the button to be used by the action script.
type="?" - The button type, either submit or reset, determines whether the form is to be submitted or cleared upon pressing it.
value="?" - Text that appears on the button, such as OK or Submit.
size="?" - Determines the length (or width) of the button.
Selection List - <select> ... </select>
A drop-down list, also refered to as a combo-box, allowing a selection to be made from a list of items.
name="?" - Selector name
size="?" - The minimum size (width) of the selection list, usually not required as the size of the items will define the list size.
multiple - Allows a user to select multiple items from the list, normally limited to one.
Selection Item - <option> </option>
An option tag is needed for each item in the list, and must appear within the select tags. The text to be shown for the option must appear between the option tags.
value="?" - The value is the data sent to the action script with the option is selected. This is not the text that appears in the list
selected - Sets the default option that is automatically selected when the form is shown.
Large Text Area - <textarea> </textarea>
An input that allows a large amount of text to be entered, and allows the height of input box to be a specified unlike the standard input tag.
name="?" - The unique name assigned to the form field.
rows="?" - The number of rows of text, defines the vertical size of the text area.
cols="?" - The horizontal size of the text box, defined as the number of characters (ie. columns).

Example:

A form where you can leave your name, rating and comments

<html><body>
<h3>Leave a comment:</h3>
<form name="formExample1" action="formaction.php" method="post">
 Name: <br> <input type="text" name="name" value="Jon Doe"> <br>
 Rating: <br>
 <input type="radio" name="rating" value="1"> 1
 <input type="radio" name="rating" value="2"> 2
 <input type="radio" name="rating" value="3"> 3 <br>
 Comment: <br> <textarea name="comment">enter comments here ...</textarea> <br><br>
 <input type="submit" value="Submit Comment">
</form>
</body></html>

See live demo of this example or open in a new window. (Note: close window or tab to return to the guide)

Example:

A selection list, using JavaScript to go to the chosen location

<html><body>
<form name="formExample2">
 <select name="selectorName"
  onchange="window.location=document.formExample2.selectorName.value">
 <option selected>[please choose one]</option>
 <option value="/index.php">home</option>
 <option value="/cheatsheet.php">cheat sheet</option>
 <option value="/examplesheet.php">html examples</option>
 <option value="/contact.php">contact me</option>
 </select>
</form>
</body></html>

See live demo of this example or open in a new window. (Note: close window or tab to return to the guide)