34,333
edits
Changes
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 then 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 that 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''' - repesents represents the name by which this object may be reference in JavaScript.
* '''id''' - the id used when accessing Form object elements using the ''getElementById()'' method (decribed described 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 outside the text area).
* '''onChange''' - triggered when the contents of the text area is changed by the user and focus is lost.
In addition to events, the Text object also has a number of JavaScript methods that can be accessed to perform such tasks as selecting text and changing focus:
* '''focus()''' - sets 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="SUBMIT"''' - The submit button. When pressed this button causes the data in the Form to be sent to the server using the settings defined in the enclosing <Form> tag. If the ''onsubmit'' attribuite on the enclosing ''<form>'' tag has been specified this will be executed before the form data is submitted (useful for JavaScript form data validation).
* '''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).
</pre>
When the submit button is pressed in the above example the data in the two Text fields will be submited submitted to the subscribe.php script specified in the <form> tag.
The generic "BUTTON" type can be defined as follows:
[[Image:Javascript radio buttons.jpg]]
All three button buttons 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.
<pre>
</pre>
'''Note:''' Programmatically changing the value of one Radio Button in a group using the above technique will not automicatically automatically uncheck the currently checked button (as it would if a user really clicked on it). You must, therefore, remember to progammatically programmatically 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 choices to be displayed in the drop-down list:
<pre>
== HTML Password Object ==
The HTML Password object is used to collect information from a user (typically, but limited to a password or acount account number) when the data entered should not visible on the screen. As the user types '*' character appears characters appear 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 overview 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]]. <google>BUY_PHP_BOTTOM</google>