The form elements in HTML is used to collect different kinds of user input. It defines an area on a web page that can contain various form elements, such as text fields, password boxes, checkboxes, radio buttons, and submit buttons, allowing users to enter and submit information. A form needs to capture input and submission elements to group input data for submission to a server or handler. The <form> element should always include the action attribute. It will usually also have a method and id attribute.
<form>
<!-- Input elements will go here -->
</form>action Attribute in html forms
The action attribute is compulsory for every <form> element. Its value specifies the URL of the page on the server that will receive the information in the form when it is submitted. When the user clicks the submit button, the form’s content is sent to the file specified in the action attribute. This file is usually a script on the server that processes the received input.
If the action attribute is absent, the form will behave as though the action were set to the current page. Some browsers might also support a mailto URL, which can email the form results to a specified address.
Example:
<form name="input" action="html_form_submit.asp" method="get">
Username: <input type="text" name="user">
<br>
<input type="submit" value="Submit">
</form>In the above example, when the form is submitted, the data will be sent to the html_form_submit.asp file on the server.
Explain the purpose of method attribute in html
The method attribute specifies the HTTP method used to send the form data to the server. The two most used values are get and post. The default method used when the method attribute is not applied is get.
What is GET method in HTML form?
When using the get method, the form data is added to the URL specified by the action attribute, creating a query string. This method is suitable for short key-value pairs, such as search boxes. However, it has a size limitation on the amount of data that can be sent. Form data sent with the get method is also visible in the URL.
<form action="process_form.php" method="get">
Name: <input type="text" name="name">
<input type="submit" value="Submit">
</form>If the user enters “John Doe” in the name field, the URL when the form is submitted might look like this: process_form.php?name=John+Doe.
What is the POST method in HTML?
The post method transfers the form data in the message body of the HTTP request, which imposes no data size limitation. Data sent using the post method is not visible in the URL. As a rule of thumb, you should use the post method if your form:
- Allows users to upload a file.
- Is very long.
- Contains sensitive data (e.g., passwords).
- Adds or deletes information from a database. The post value must be used when file attachments are included in a form.
Example:
<form method="post" action="process_form.php">
<p><label for="fave">Fruit: <input id="fave" name="fave"/></label></p>
<p><label for="name">Name: <input id="name" name="name"/></label></p>
<button>Submit Vote</button>
</form>In this case, the data entered in the “Fruit” and “Name” fields will be sent to process_form.php in the HTTP message body, not in the URL.
The action and method attributes are fundamental for defining how form data is submitted to a server for processing.
HTML5 Topics