HTML Form Attributes
In this article, we will discuss HTML form attributes. Specifically, we will examine HTML’s < form > element’s attributes.
The HTML <form> element specifies a part of the document that includes user-interactive features for entering data.
Action Attribute:
When the form is submitted, the action attribute determines what will happen.
The user normally submits the form data to a file on the server when the submit button is clicked.
Below is an example of sending form data to “action-attibute-page.php”. There is a server-side script in this file that handles form data.
Below is an example of HTML forms attributes:
Once the form is submitted, send the data to the “action-attibute-page”:
Example
Target Attribute:
A form’s target attribute determines where to show its response after submission.
One of the following values can be set to the target attribute:
| Value | Overview |
|---|---|
| _blank | You will see the response in a new window or tab. |
| _self | The response will appear in the same window. |
| framename | The response will portray in a named iframe |
| _parent | The parent frame shows the response. |
| _top | Responses will occur in the full window body. |
A response will open in the existing window by default, as default value is _self. Below are some examples of HTML forms attributes:
In this case, a new browser tab will be opened to display the submitted result:
Example:
An example _self target:
Example:
Method Attribute:
A method attribute determines what HTTP methodology should be used when the form data is submitted.
You can send form-data via URL variables (with method=”get”) or via HTTP post transactions (with method=”post”).
Form data is submitted using the GET HTTP method by default.
The following example utilises the GET method for submitting form data:
Example
The form data is submitted utilizing the POST method in this example:
Example
Here are some recommendations for GET:
- Adds name/value pairs to the URL as form data
- GET should never be used to send sensitive information! – The URL contains submitted form data!
- URLs cannot exceed 2048 characters.
- A user can bookmark the results of form submissions.
- GET is a good choice for non-secure data, such as query strings on Google.
Here are some recommendations for POST:
- POST appends the form data to the HTTP request body. (The URL does not include the form data submitted)
- There are no size restrictions on POST, so large amounts of information can be sent.
- It is not possible to bookmark form submissions with POST.
Tip: The first tip is always to use POST when discussing HTML form attributes, specifically if the form data hold confidential or sensitive information.
Autocomplete Attribute:
Utilizing the autocomplete attribute, one can determine whether autocomplete should be allowed or prohibited for a form.
Autocomplete conducts values based on the user’s last entries when autocomplete is enabled. Which allows web browsers to complete user values automatically
Using autocomplete on a form:
Example
HTML enctype attribute:
In the case of submitting the form to the server, this attribute indicates that the data included in the form should be encoded. An attribute of this type can only be used if the method is “POST”.
Syntax:
<form enctype = “value”>
The following three values are included in this attribute:
application/x-www-form-urlencoded: This is the default type .Before sending the characters to the server, it encodes them. Spaces are converted into + symbols, and special characters into their hex values.
multipart/form-data: No character is encoded in this value.
text/plain: This value transforms spaces into plus symbols, except for special characters.
Here is an example:
Example:
Novalidate Attribute:
In HTML, the novalidate attribute is a boolean value.
This defines that no validation should be performed when the form data is submitted.
Below are some examples of HTML forms attributes:
An attribute novalidate on a form:
Example
List of All <form> Attributes
| Attribute | Overview |
|---|---|
| method | When transmitting form data, defines the HTTP method to use. |
| name | Gives the form a name |
| novalidate | When submitted, the form is not validated |
| rel | Indicates how the current document is related to a linked resource |
| accept-charset | Sets the character encoding for form submissions. |
| action | If a form is submitted, it identifies where to send the data. |
| target | When the form is submitted, indicates where the response will be displayed |
| autocomplete | Indicates whether autocomplete should be enabled or disabled for a form. |
| enctype | Only for method=”post”. Define how the form data should be encoded before it is submitted to the server. |
Importance of HTML Form Attributes
HTML form attributes are critical in developing web pages that are interactive and user-friendly. Below are some reasons why they are important:
- Accessibility: For users who rely on screen readers or other assistive technology to access the web, attributes such as label, title, and alt text provide vital information.
- Validation: The use of attributes such as required and pattern in forms ensures that users input valid data into form fields, decreasing errors and improving the user experience.
- Functionality: Attributes like action, method, and enctype determine how form data is processed and submitted to a server, which allows web developers to create responsive applications that react to user input.
- Styling: Class and id form attributes enable developers to apply CSS styling to form elements, making them visually appealing and consistent with the overall design of the web page.
- Security: By controlling how form data is handled and transmitted, attributes like autocomplete and novalidate help prevent security vulnerabilities like cross-site scripting (XSS) attacks.
