Web Form tag & HTML elements
Forms are very common in web pages through out Internet. Web forms are mostly used to capture user entered data and post them back to the server. You can see signup forms, login forms, profile update forms and many more type of forms. Designing a form is based on the data format requirement. For example you want the users to tell about their sex. Here the user will enter one out of the two choices available, so one period button is to be provided for the user to select. Same way one input text box is to be provided for entering name of the joining member. Based on different data format requirements we can keep different form components. Here we will discuss different types of components used to collect data and their possible use. Before that let us try to understand the basic form structure or syntax.
Form tag
Our form area starts with <form ….> and ends with </form>. All our input fields are to be located between these two tags. These are two boundaries for the data entry. Here is the basic syntax for the form tag.
<form method="POST"
action="file_name.php">
</form>
Method attribut of the html form
The method parameter takes two values one is GET and other is POST. In GET method values are passed through the address bar or technically speaking they are passed as query string. We should not pass sensitive information this way as through browser history they can be retrieved. Post method submits the data without using the query string.
You can read more on GET & POST methods here.
Action attribute
The action attribute takes the name of the file to which the data to be submitted for further processing. It can be a file in the same directory or a file in different directory. We have to give proper path information if they are in different directory. Forms can even submit data to a different web site by using the URL of the site and the particular page by entering the details in action attributes. For example form can submit data to http://www.mysite.com/my_file.php page for processing the entered data of the visitor. If the action tag is left blank then the form will submit the data to it self( same file ). In this case we have to keep the form processing script in the same file.
We can give a name to the form by declaring it through name tag. Like this name='f1'. It is easy to get the value of any entry by using name tag of the form like
var val=form.cat.options[form.cat.options.selectedIndex].value;
| Elements | <tag> Description |
|---|
| Text field | Entering short text like name, email, address etc |
| Hidden Field | Hidden to the user with data to pass along with user entered data |
| Password Field | Input text entered will be masked to prevent others from seeing |
| TextArea | Large text like blog posting, comments, body of email form |
| Radio button | Selecting one of many option |
| Checkbox | Selecting one or more out of several options |
| Drop down list | Selecting option from a drop down list box |
| Button | To trigger event or run script by user |
| Image Button | Using images as button |
| Submit Button | Start sending the form elements data for processing |
| Resetting the form | Reset button to reset the form data to default values |
Applications and uses of html form elements
| Application | Uses of form element |
|---|
| Set Focus | Keeping the crusher at a text field to receive user data by default |
| Two Submit Button | Submitting same from data to two different action pages |
| Submit to new window | Form data to submit to a new window keeping the parent window as it is |
| Back to previous page | History button to take the user to previous pages |
| File Upload | HTML form tags to upload files from user computer to server or for attachment |
| | jaki shahrier kanak | 20-03-2010 |
|---|
| More eaxmples are needed |
|
|
|
|
