HTML Forms
The Form element
The form element is used to input data or collect data. It is used as follows:
<form> ……….. </form>
A form element does not process the data rather it only collects the data.
Example
A form element is used as follows:
<form action = “http://side.edu/cgi-bin/send-message”>
In the above example the form element ties the data of the form to a particular program that is send-message to the or on the indicated server. The server is the HTTP server. The main function of the form is to collect the data and send it to the program on the server.
In the above example the form element is used to send the gathered information or data to the program send-message on the HTTP server. The form element and the program send-message should be designed together. Then this program that is send message takes the data collected by the form and processes it to complete the task.The form element has an attribute action that has assigned the link that has been explained.
Now we are demonstrating another example of form to compose an email that is to be sent to a particular person. In this example the user will take or use the data that is sent by the form element.
<html>
<head>
<title> HTML FORMS </title>
</head>
<body>
<h1> The Example of HTML Form </h1>
<form action = “no-action”>
–[<input type = “checkbox” name = “button” value = “on”>]-
If no button is seen between the brackets you can click on the following link
<a href=”text-only.html”> text-only interface </a>. </form>
<hr>
<form action = “ http://side.edu/cgi-bin/send-message”>
<p><strong> 1) Send this message to: </strong>
<select name = “ mailto-name”>
<option selected> John Abraham
<option> Anna Smith
<option> Ann Dean
<option> Paul
<option> Lee
<option> Thomson
</select>
<p> 2) <strong> Write your email address </strong>
This will tell you that who sent you the message or the mail.
<p><input type = “text” name = “signature” value = [email protected] size = 60>
<p><strong> 3) Body of message: </strong>
<p>
<textarea cols = 60 rows = 8 name = “message_body”>
Type your message in this box and delete this message. Press the “send message” button to send your message. You can also press the reset button to reset the values that were created or the original values.
</textarea>
<p>
<input type = “submit” value = “Send the Message” ><input type = “reset” > (reset the form)
</form>
</body>
</html>
In the above example, we use the element input that has the attribute type. This attribute is assigned the value of what type you will use to input data it can be a checkbox or a button.Select is another element that is used to select to whom the message is sent. The textarea is an element that describes the area in which the text is be written that is it describes the length or width or the columns and rows. The above HTML document produces the following result:
The “action” attribute
This element is used to define that which element is going to be performed when the form starts working.
EXAMPLE:
In the following example you will see the functionality of the attribute action:
<form action = “http://side.edu/cgi-bin/send-message”>
The action has assigned the value http://side.edu/cgi-bin/send-message, it means that the gathered information is sent to the program sent-message on the HTTP server.
The Submit Button
This button can be displayed using the following method:
<input type “submit”>
This will allow the page to submit the data of the form. It also uses an attribute value that is assigned “submit” as follows:
EXAMPLE
<form action = “ http://side.edu/cgi-bin/send-message” >
<p> first name: <input type=”text” id=”first name” name = “lastname” /></p>
<p> last name: <input type=”text” id=”last name” name=”lastname”/></p>
<p><input type=”submit” value=”submit”/></p>
Resulting in:
The “method” attribute
This attribute is used to specify the HTTP method of submitting the form. The method includes GET and POST.
EXAMPLE
<form action = “http://side.edu/cgi-bin/send-message” method = ”GET”>
Or,
<form action = “http://side.edu/cgi-bin/send-message” method = “POST”>
These methods are described below.
HTML Form through GET
GET is a method to send the information to the program. Using this method the information you sent will become visible to the page address field in which the form is created.
This is used as follows:
EXAMPLE
<form action = “ http://side.edu/cgi-bin/send-message” method = “GET”>
<p> first name: <input type=”text” id=”first name” name=”firstname”/></p>
<p> last name: <input type=”text” id=”last name” name=”lastname”/></p>
<p><input type=”submit” value=”submit”/></p>
This will produce the following result:
Post method
Using the post method the information is not displayed on the screen unlike the get method. It is used as follows:
EXAMPLE
<form action = “ http://side.edu/cgi-bin/send-message” method = “POST”>
<p> first name: <input type=”text” id=”first name” name=”firstname”/></p>
<p> last name: <input type=”text” id=”last name” name=”lastname”/></p>
<p><input type=”submit” value=”submit”/></p>
Resulting in:
The NAME attribute
This attribute is used with the anchor element <a> to link between different locations in the same document. This attribute also provides you to assign a unique name to a particular place in the document. This name is called fragment identifier. This can be done using a URL.
When using forms, the input element should have name attribute. If the input element does not contain the name attribute, the data of the corresponding field will not be sent to the page. This is illustrated as follows:
EXAMPLE
<form action = “ http://side.edu/cgi-bin/send-message” >
<p> first name: <input type=”text” id=”first name” /></p>
<p> last name: <input type=”text” id=”last name” name=”lastname”/></p>
<p><input type=”submit” value=”submit”/></p>
This will generate the following result:
And when you press the submit button, the first name that is John will not be sent and only the last name that is Abraham will be displayed on the page whose address was used.
