no edit summary
A large part of developing a web based application involves handling interaction with user via their web browsers. One of the most common tasks in this area of web development involves presenting the user with forms to collect information, and
the processing that information.
Web forms are typically created using the HTML <FORM> element together with various user interface objects (such as text fields, toggle buttons and push buttons).
HTML forms are used to collect data from users. Users essentially enter data into forms by filling in text fields, selecting toggles and making choices from selection objects. When the user has filled in the data it is transmitted to the server for processing.
HTML forms are specified using the <form> element. The form element contains an attribute
which specifies the script on the server to which the gathered data is to be sent. Data can be sent to the server using one of two methods, GET or POST. With GET, all the data is passed to the server embedded in the URL. POST is typically used for larger volumes of data.
The various <input> elements are then specified within the body of the <form>.
* '''type''' - specifies that the type of object is a TEXT object.
* '''name''' -
* '''id''' - the id used when accessing Form object elements using the ''getElementById()'' method (
decribed later in this chapter)
* '''value''' - primes the text object with an initial value (optional).
* '''onFocus''' - triggered when the text field gains focus (typically when the cursor is moved into the field to begin typing).
* '''onBlur''' - triggered when the text field loses focus (typically when the user clicks somewhere
outsite the text area).
* '''onChange''' - triggered when the contents of the text area is changed by the user and focus is lost.
* '''focus()''' -
sets focus and sets the cursor on the text field
* '''blur()''' - Removes focus from the field (the opposite of focus())
* '''type="BUTTON"''' - The basic button which performs no action by default unless an event handler is assigned to it.
* '''type="RESET"''' - The reset button. When pressed causes the fields in the Form to be either cleared, or reset to the defaultValue (if one has been specified).
When the submit button is pressed in the above example the data in the two Text fields will be
submited to the subscribe.php script specified in the <form> tag.
The generic "BUTTON" type can be defined as follows:
button share the same ''name'' attribute which acts to tie them together into a group. The ''value'' attribute defines the value that is passed through the server to indicate which button is selected when the form is submitted.
'''Note:''' Programmatically changing the value of one Radio Button in a group using the above technique will not
automicatically uncheck the currently checked button (as it would if a user really clicked on it). You must, therefore, remember to progammatically change the ''checked'' status of the other buttons.
== HTML Drop-down / Select Object ==
The HTML Select object provides a drop down list of choices from which the user can choose (often referred to as ComboBoxes in other GUI environments). When the drop down list is not visible the current selection is displayed in a text area. Due to the fact that the Select Object supports both single and multiple selection of items in the list it is ideal for both "one of many" and "many of many" selection choices.
The Select Object uses the <select> tag together with <option> tags representing the
choises to be displayed in the drop-down list:
== HTML Password Object ==
The HTML Password object is used to collect information from a user (typically, but limited to a password or
acount number) when the data entered should not visible on the screen. As the user types '*' character appears in the text field for each key press, instead of the actual typed character.
The basic syntax for the Password Object is as follows:
== Summary ==
Now that we have provided a basic
over of how HTML forms are constructed we can look at how to submit the data to a PHP script on the server and process that data. This is covered in the chapter entitled [[PHP and HTML Forms]].