HTML Examples of how to use the Form Tag
In this tutorial, we will explore how to create an HTML form. What is the purpose of a HTML Form?
The HTML Form allows you to request information from users viewing your web page. Forms are the most popular way to make web pages interactive.
The type of information that you can request from users, using the forms tags, are:
When you create a form on your HTML page, the content for the form is included between a <form> and a </form> tag.
After which the entered information is submitted to a web server for processing.
- Choose from menus
- Make choices from radio buttons
- Click on checkboxes
- Enter text information
What are the requirements for a Basic Form Template? In the following example, show:
For example, the basic form template might look like the example in the following table.
- <Form> - the tag that starts the Form
- Method - the tag that indicates the method that will respond to this request
- Action - the tag that indicates the location where the above method is resides
- <Input...> - the tag that indicates the type of input field (see figure 3)
- <Select - is a container tag that allows the user to make a choice
- </Select - ends the select section
- <Textarea - allows the user to enter multiple lines of text
- </Textarea - ends the text area
- </Form> - the tag that ends the Form container
<FORM METHOD="method that responds to the submitted request"
ACTION="URL of the server where the above method resides">
...input data content...
...select data content...
...textarea data content...
|Figure 1: Basic Form
When we consider using the <form> tag, we should note that we can place the <form> tag anywhere within the <body> and </body> tags of an HTML document, and all input tags, select tags, and textarea tags must be contained within FORM tags.
In the following sections we will explore the FORM attributes with examples showing how to create a form.
The following table shows the FORM tag and its attributes.
ACTION: URL of the server that will process the data/request found in this form.
|METHOD = GET | POST: this is the method that processes the data sent to the server for further processing.
| NAME: name of this form.
| ENCTYPE: Specifies the MIME (Internet mediatype). This indicates the format of the data submitted to the server.
This is most often used with forms where there is a file-upload option.
| TARGET: determines where the results will be displayed - "_blank" | "_parent" | "_self" | "_top" | frame name
| onSubmit: method to run before the form is submitted
| onReset: method to run before the form is reset.
|Figure 2: Form tag and its attributes
We will use the information from Figure 2 in building the forms in this tutorial. In the next section, will explore the INPUT tag.
The following example obtains four numbers from the user and either sums or averages the numbers.