html

HTML <form> tag attributes | Explained

When we visit a site one of the most frequently observed things on every website is “forms” like sign-in forms, sign-up forms, data entry forms, etc. and for this purpose, HTML provides a <form> tag to collect the user’s data/information. The <form> tag itself can’t send the data anywhere so to process the form data we can use different attributes such as action, method, etc.

This write-up will provide a complete guideline for creating a form and in this regard, we have to understand the concept of the following form attributes:

How to use Action Attribute in HTML Forms

It determines which action will be performed on the form submission i.e. it specifies a URL to which the form data will be submitted. The below-given example will let you understand how the action attribute works

Example

In the below-given code, we created an HTML file named formsAttribute.html

  • Inside the <form> tag we specify the action attribute.
  • The action attribute holds the address of another HTML file named “formsResult.html”
  • We create two fields for name and password.
  • Next, we create a button named “Submit” in the “formsAttribute.html” file.
  • Clicking on submit Button diverts us to the “formst.html” file

formsAttribute.html

<form action="forms.html">
  <div>
   <label>Student Name:</label>
   <input type="text" name="name">
  </div>
  <div>
   <label>Password:</label>
   <input type="text" name="password">
  </div>
   <button>Submit</button>
</form>

froms.html

The forms data submitted from the formsAttribute.html file will be displayed on the forms.html file:

<div id="forms"></div>
<a href="formAttributes.html">Go Back To formAttributes.html file</a>
<script>
const formsResult = document.getElementById('forms')
new URLSearchParams(window.location.search).forEach((value, name)=>{
    formsResult.append(`${name}: ${value}`)
    formsResult.append(document.createElement('br'))
})
</script>
</body>

Successful execution of the code shows the following result:

Observe the URL of the file, clicking on the submit button will send the data written in the text fields to the forms.html file and it shows the following result:

Observe the difference between both URLs:

  • When we click on the “submit” button, it leads us to the “forms.html” file.
  • Displaying the content of the “formsAttribute.html” file verifies that the action attribute is working properly.

How to use Method Attribute in HTML Forms

It determines how the form data will be submitted and for this purpose, it utilizes either the Get method or the Post method.

Get Method

It appends the form data within the URL, and it utilizes the question mark to separate the different parameters. If we didn’t mention the method attribute in the form tag, by default it will set the Get method.

Example

As shown in the previous example, we didn’t mention any method so, by default it sends the data using the get method. The below-given snippet will explain how to use the get method:

formsAttribute.HTML

<form action="forms.html" method="get">

Above snippet displays the following output:

We specify “Student Name” and “Password” as “Joe” and “[email protected]” respectively and as a result, we get the following output:

The URL elaborates the following points:

  • You are in the forms.html file
  • Name and password is appended in the URL which verifies that get method is used.

Post Method

It sends the data to the server separately i.e. it appends the data in the body of HTTP’s request instead of the URL. It is useful when we have to store confidential data on the server.

Example

The following piece of code will help you understand how to use the post method:

The “forms.html” file will remain the same, the only difference will be in the forms attribute i.e. we will use the post method:

formsAttributes.html

<form action="forms.html" method="post">

This way, the data will be posted and not appear in the URL.

How to use Target Attribute in HTML Forms

It specifies the targeted window/tab to display the result i.e. it determines either the result will be displayed on the current tab or new tab. It can take _self, _parent, _top, and _blank value. The _blank will show the result in the new tab.

Example In this example we will use the _blank value for the target attribute to display the result in the new tab:

<form action="forms.html" method="get" target="_blank">

Following will be the output for the above code:

Clicking on the submit button will show the result in a new tab:

How to Use Autocomplete Attribute in HTML Forms

As the name itself suggest the autocomplete attribute determines whether the values should be auto completed or not. For example, the “autocomplete=on” determines that anything that a user enters will be remembered for future use.

Example Let’s consider the below piece of code to understand how to use autocomplete attribute:

<form action="forms.html" method="get" autocomplete="on">

The above code sets the value of autocomplete as on and it produces the following output:

Once you filled the respective fields and submitted the data then refresh the page, you can verify that autocomplete shows priorly entered data as suggestion.

The output verifies that the autocomplete attribute is working appropriately.

Conclusion

The attributes of HTML determine how to process the form’s data i.e. the action attribute determines the action to be performed on form submission, the method attribute determines how to submit the form’s data i.e. GET method will be appended in the URL or POST method will be appended in the body of HTTP’s request. Furthermore, the target attribute specifies the targeted tab/window, and autocomplete attribute determines whether the already entered data should be remembered for later use or not.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.