HTML Form Attributes – Tutorials Art

Some HTML form attributes that are written in html form tag these attributes will control the behavior of html forms.

Form Attributes:

Attributes	Description
action	It controls the action to be performed on form submission.
target	It indicates where to display response after submitting the form.
method	For uploading form data some methods are used such as Get or Post.
autocomplete	It indicates whether the browser will autofill the form or not
novalidate	It specifies the form values should not validated on form submission.

Now we will discuss these attributes in detail with examples.

Action Attribute

The action attribute is a type of form attributes which controls the action to be performed on form submission. Basically it directs the webpage on form submission.

As the form only allow us to take input data from user so in action attribute backend script is attached to process/send the data.

<form action="formoutput.html">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value=""><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value=""><br><br>
  <input type="submit" value="Submit">
</form>

In the above example on form submission the page will redirect to formoutput.html page the above is output of code to know how the code is working try the above code.

Method Attribute

For uploading data some methods are used such as Get or Post. These methods are written as value of method attribute and specifies the HTTP method to be used when submitting the form data.

For sending form data as URL variables the Get method is used and for sending the data as HTTP post transaction Post method is used.

The default method is Get method.

Get VS Post

Now lets discuss the difference between Get and Post below:

Get Request	Post Request
It appends the form data to the URL, in name/value pairs	It sends the data to the server that is stored in request body of http request.
It can be bookmarked.	It cannot bookmarked.
It can be cached.	These requests are never cached
The parameters of get method remains in browser history.	Parameters are not saved in browser history
As get method adds the data to URL and URL length is 2048 characters long so limited data can be send through Get.	It do not have any data limitations.
Only ASCCI characters are allowed.	It has no data type limit can also contain binary data
It is less secure as data is send through URL.	It is safer than get method
Data is visible to all through URL	Data is not displayed in URL

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

Get method

First name:

Last name:

After submitting form,Notice that the form values are visible in the address/URL of the new browser tab.

Note: Try the code to know how its working.

<form action="post.php" method="post">

Post method

First name:

Last name:

After submitting form,Notice that the form values are not shown in the address/URL of the new browser tab.

Autocomplete Attribute

The autocomplete attribute is a type of form attributes which determines whether the autocomplete should be on or off for a form. When autocomplete is activated the browser will automatically fill the data required for the form on the basis of the data entered by user before.

<form action="formoutput.html" autocomplete="on">

Autocomplete attribute

Fill and submit form than check when you reload the form it will give you options from what you entered before

Try to set autocomplete to “off” to see the difference and to understand the code more well.

First name:
Email:

Novalidate Attribute

Novalidate Attribute is a boolean attribute, It specifies the form input should not validated on form submission.

<form action="formoutput.html" novalidate>

Novalidate attribute

Novalidate attribute specifies that the form input is not to be validated on submit:

Enter your Email:

Target Attribute

The target attribute is a type of form attributes which determines where to display response after submitting the form. The target attributes have different values like -self,-blank,- parent,-top and many others. The default target value is -self and it indicates that response will open in same same window.

<form action="formoutput.html" target="_blank">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value=""><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value=""><br>
  <input type="submit" value="Submit">
</form>

Target attribute

As the target value is blank so the result on submitting the form will show on new page you can check how other values are by changing the value of target

First name:

Last name: