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 thename, 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
orget
. For example,post
would be used to submit data to a user-registration form, andget
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 withcheckbox
andradio
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, eithersubmit
orreset
, 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 namesize="?"
- 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 theselect
tags. The text to be shown for the option must appear between theoption
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 listselected
- 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)