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”:


<!DOCTYPE html> <html> <body><form action="/action-attibute-page"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Colin"><br> <label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" value="Smith"><br><br><input type="submit" value="Submit"> </form></body> </html>
Note: If an action is forgotten, the current page is the default action in HTML forms attributes.

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:

_blankYou will see the response in a new window or tab.
_selfThe response will appear in the same window.
framenameThe response will portray in a named iframe
_parentThe parent frame shows the response.
_topResponses 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:


<!DOCTYPE html> <html><body><br><br><br><br><h2>The form target attribute</h2><br><br><p>When submitting this form, the result will be opened in a new browser tab:</p><br><br><form action="/action_page.php" target="_blank"><br> <label for="fname">First name:</label><br><br> <input type="text" id="fname" name="fname" value="John"><br><br> <label for="lname">Last name:</label><br><br> <input type="text" id="lname" name="lname" value="Doe"><br><br><br> <input type="submit" value="Submit"><br></form> <br><br><br><br> </body></html>

An example _self target:


<!DOCTYPE html> <html> <head> <title>Target _self attribute</title> <style> h2 { color: blue; } body { text-align:center; } </style> </head> <body> <h2>HTML Form target Attribute</h2> <form action="#" target="_self"> First name: <input type="text" name="fname"> <br> Last name: <input type="text" name="lname"> <br> Address: <input type="text" name="Address"> <br> <input type="submit" value="Submit"> </form> </body> </html>

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:


<!DOCTYPE html> <html> <body><form action="/action-attibute-page.php" method="get"></form></body> </html>

The form data is submitted utilizing the POST method in this example:


<!DOCTYPE html> <html> <body><form action="/action-attibute-page.php" method="post"></form></body> </html>

Here are some recommendations for GET:

  1. Adds name/value pairs to the URL as form data
  2. GET should never be used to send sensitive information! – The URL contains submitted form data!
  3. URLs cannot exceed 2048 characters.
  4. A user can bookmark the results of form submissions.
  5. GET is a good choice for non-secure data, such as query strings on Google.

Here are some recommendations for POST:

  1. POST appends the form data to the HTTP request body. (The URL does not include the form data submitted)
  2. There are no size restrictions on POST, so large amounts of information can be sent.
  3. 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:


<!DOCTYPE html> <html> <body><form action="/action-attibute-page.php" autocomplete="on"></form></body> </html>

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”.


<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:


<!DOCTYPE html> <html> <head> <title>enctype attribute</title> <style> h2 { color: blue; } </style> </head> <body> <p></p><h2>HTML Attribute enctype</h2> <form action="#" method="post" enctype="multipart/form-data"> <p>First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br></p> <p><input type="submit" value="Submit"> </p></form> <p></p></body> </html>

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:


<!DOCTYPE html> <html> <body><form action="/action-attibute-page.php" novalidate></form></body> </html>

List of All <form> Attributes

methodWhen transmitting form data, defines the HTTP method to use.
nameGives the form a name
novalidateWhen submitted, the form is not validated
relIndicates how the current document is related to a linked resource
accept-charsetSets the character encoding for form submissions.
actionIf a form is submitted, it identifies where to send the data.
targetWhen the form is submitted, indicates where the response will be displayed
autocompleteIndicates whether autocomplete should be enabled or disabled for a form.
enctypeOnly 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.
To get connected with the technical information on this site do subscribe to our Newsletter below.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *