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
formtags. In most cases, a form must have the
name, action & methodattributes set.
name="?"- A unique name identifying the form, used by the action script.
method="?"- The method used by the action script,
get. For example,
postwould be used to submit data to a user-registration form, and
getis used for searches or forms that must return information.
- Input Field -
- Used to create a simple text-entry field for your form, but is also the basis for many other form input types using the
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, & hiddenare 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
radioinputs, it sets the field default to be already checked.
- 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
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 -
optiontag is needed for each item in the list, and must appear within the
selecttags. The text to be shown for the option must appear between the
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 -
- 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
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).
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>
<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>