Comprehensive Guide To HTML form Input Attributes

The HTML form input attributes or properties are under discussion. For the HTML <input> element, the various form* properties are covered in this article.

HTML form Input Attributes

HTML form input attributes are special properties that can be added to an <input> element to define various characteristics and behaviors of the input field.

These attributes include “Formaction“, “Formenctype“, “Formmethod“, “Formnovalidate“, “Novalidate“, and some others. Each attribute has a specific purpose and can be used to customize the behavior of the input field in different ways.

For example, the “Formaction” attribute useful in cases where you want to submit the form data to a different URL than the default one, while the “Formenctype” attribute is used to specify the encoding type of the form data when the form is submitted to the server.

Table Of Content-

Form Attribute

The input <form> property defines the form to which the <input> element belongs.

This property’s value must be the same as the id attribute of the <form> element to which it belongs.

The following is an example of HTML form attributes.

An HTML form field that isn’t really within the form itself:

Example

<!DOCTYPE html> <html> <body><form action="/action-attribute-page.php" id="form1"> <label for="fname">Owner first name:</label> <input type="text" id="fname" name="fname"><br> <br> <input type="submit" value="Submit"> </form> <label for="lname">Owner last name:</label> <input type="text" id="lname" name="lname" form="form1"></body> </html>

HTML Formaction Attribute

The HTML formaction attribute is a special attribute that can be added to a submit button or an input element with type “submit” within a form.

This attribute specifies the URL of the server-side script or web page that will process the form data when the form is submitted.

By default, the form’s action attribute specifies the URL where the form data is sent when the form is submitted. However, by adding the formaction attribute to a submit button or an input element with type “submit”, you can override the default “action” attribute for that particular button or input element.

This can be useful in cases where you want to submit the form data to a different URL than the default one, or if you want to provide multiple options for submitting the form data to different endpoints.

Note that the “formaction” attribute is only applicable to submit buttons or input elements with type “submit“, and it takes precedence over the form’s “action” attribute for the specific button or input element it is added to.

The submit and picture input types are supported through the formaction property.

HTML form attributes sample shown below.

One HTML form submit button with two distinct behaviors:

Example

<!DOCTYPE html> <html> <body><form action="/action-attribute-page.php"> <label for="fname">Owner first name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br> <br> <input type="submit" value="Submit"> <input type="submit" formaction="/action-attribute-page2.php" value="Submit as Admin"> </form></body> </html>

Another example of the form action attribute is given below:

Example: 

<!DOCTYPE html> <html> <body> <form action="/action-attribute-page.php" method="post" id="form1"> <label>User ID:</label><br> <input type="number" name="ID"><br><br> <label>User Password</label><br> <input type="password" name="password"><br><br> <input type="submit"> </form> </body> </html>

Formenctype Attribute

The HTML formenctype attribute is used to specify the encoding type of the form data when the form is submitted to the server.

This attribute is typically used in conjunction with the method attribute, which specifies the HTTP method used to submit the form data.

Html formenctype attribute can take one of three possible values:

formenctype ValuesOverview
application/x-www-form-urlencodedIt is a default encoding type and is used for submitting simple form data, such as text or numeric values. This encoding type is also the most efficient and is widely supported by web browsers and servers.
multipart/form-dataThis is used for submitting binary or file data, such as images or audio files, as well as text data. This encoding type is typically used in file upload forms.
text/plainThis is rarely used and is only suitable for submitting plain text data without any special characters or formatting.
The default value is application/x-www-form-urlencoded.

The above attribute overrides the <form> element’s enctype attribute.

The following is an example of HTML form attributes:

A form with two buttons for submission.

The first transmits the form-data in its normal encoding, whereas the second delivers it encoded as “multipart/form-data“:

Example

<!DOCTYPE html> <html> <body><form action="/action_page_binary.asp" method="post"> <label for="fname">Owner first name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Submit"> <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data"> </form></body> </html>
Note: The formenctype attribute only affects the encoding type of the form data when it is submitted to the server. It does not affect the way the form data is validated or processed by the client-side script.

The form enctype attribute other example:

Example: 

<!DOCTYPE html> <html> <body> <form action="/action_page_binary.asp" method="post" enctype="multipart/form-data"> <input type="text" name="address" placeholder="Enter address"> <input type="submit" value="Encode the text and submit"> <input type="submit" formenctype="text/plain" value="You can submit plain text"> </form> </body> </html>

Formmethod Attribute

The HTML formmethod attribute is used to specify the HTTP method used to submit the form data when the form is submitted. The attribute is typically used in conjunction with the action attribute, which specifies the URL where the form data is submitted.

The formmethod attribute can take one of two possible values: get or post.

Formmethod ValuesOverview
GetThis method submits the form data as part of the URL query string, which can be seen in the browser’s address bar. This method is useful for submitting simple form data, such as search queries, and can be bookmarked or shared easily.
PostThis method submits the form data as part of the HTTP request body, which is not visible in the address bar. This method is more secure and is typically used for submitting sensitive or complex form data, such as login credentials or large files.
Note: The default value is get.

A <form> element’s method attribute is overridden by this attribute.

Submit and image input types are supported by the formmethod attribute as it comes to HTML form input attributes.

An overview of the GET method:

  1. Name/value pairs are appended to the URL using this method
  2. When a user wants to bookmark the results of a form submission, the Get method can be useful.
  3. In most browsers, you can only place a certain amount of data in a URL, so you can’t guarantee all of the form-data will be transferred correctly
  4. Don’t transmit sensitive information via the Get method! It will be possible to see passwords or other sensitive information in the browser’s address bar.

An overview of the POST method is as follows:

  1. Form-data is sent via HTTP post transaction with the Post method
  2. It is not possible to bookmark form submissions made using the Post method
  3. Compared to Get, the Post method is more efficient and secure, and it doesn’t have a limit on the size of the data

A sample HTML form attribute is shown below:

Two submit buttons are present on this form. Method=GET is used to send the form-data and second method=POST sends the form data:

Example

<!DOCTYPE html> <html> <body><div class="getpost"><form action="/action-attribute-page.php" method="get"> <label for="fname">Owner first name:</label> <input type="text" id="fname" name="fname"><br><br><label for="lname">Owner last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submitting through GET method"> <input type="submit" formmethod="post" value="Submitting through POST method"> </form> </div></body> </html>
Please Note: The formmethod attribute only affects the HTTP method used to submit the form data. It does not affect the way the form data is validated or processed by the client-side script or server-side script.

Another example of the formmethod attribute:

Example: 

<!DOCTYPE html> <html> <body> <form action="/action_page_binary.asp" method="post" enctype="multipart/form-data"> <input type="text" name="address" placeholder="Enter address"> <inputtype the post method to submit></inputtype> <input type="submit" formmethod="get" value="Use the GET method to submit"> </form> </body> </html>

Formtarget Attribute

The HTML formtarget attribute is used to specify the target window or frame where the server response to the form submission will be displayed.

The formtarget attribute can take one of several possible values:

Formtarget ValuesOverview
_selfIt’s (default) and causes the server response to be displayed in the same frame or window as the form.
_blankIt causes the server response to be displayed in a new unnamed window or tab.
_parentIt causes the server response to be displayed in the parent frame of the current frame or window.
_topIt causes the server response to be displayed in the top-level browsing context.

You can also use a named frame or window as the value of the formtarget attribute, which causes the server response to be displayed in that named frame or window.

Submissions and images are supported by the formtarget attribute in HTML form Input attributes.

A sample HTML form attribute is shown below.

There are two submit buttons on this form, but the target windows are not the same:

Example

<!DOCTYPE html> <html> <body><form action="/action-attributes-page.php"> <label for="fname">Owner first name:</label> <input type="text" id="fname" name="fname"><br> </form></body></html>
Important: Note that the formtarget attribute only affects the target window or frame where the server response is displayed. It does not affect the way the form data is validated or processed by the client-side script or server-side script.

Form Target attribure another example is given below:

Example: 

<!DOCTYPE html> <html> <body> <form action="#" method="post" target="_self"> <input type="text" name="fname" placeholder="First name:"> <input type="text" name="lname" placeholder="Last name:"> <input type="text" name="address" placeholder="Address:"> <input type="submit" value="Submit"> </form> </body> </html>

Formnovalidate Attribute

The HTML formnovalidate attribute is used to disable client-side form validation when the form is submitted. By default, when a form is submitted, the client-side script validates the form data to ensure that it is valid and complete before sending it to the server.

If any errors are found, the script prevents the form from being submitted and displays error messages to the user.

However, by adding the formnovalidate attribute to the submit button or input element with type submit, you can disable client-side form validation for that particular button or input element.

This can be useful in cases where you want to submit the form data without performing validation, such as when you want to allow the user to submit incomplete or invalid form data.

There are two submission buttons on the form one with validation and one without validation:

Example

<!DOCTYPE html> <html> <body><form action="/action-attribute-page.php"> <label for="email">Type email address:</label> <input type="email" id="email" name="email"><br> </form></body></html>
Note: Html formnovalidate attribute only affects client-side form validation. The server-side script can still validate the form data when it is received and process it accordingly.

Novalidate Attribute

The HTML novalidate attribute is used to disable client-side form validation for an entire form.

By default, when a form is submitted, the client-side script validates the form data to ensure that it is valid and complete before sending it to the server.

If any errors are found, the script prevents the form from being submitted and displays error messages to the user.

However, by adding the novalidate attribute to the form element, you can disable client-side form validation for the entire form.

This can be useful in cases where you want to allow the user to submit incomplete or invalid form data, or if you want to handle form validation entirely on the server-side.

As an example of HTML form input attributes, here is what it looks like.

When submitting the form, no validation should take place:

Example

<!DOCTYPE html> <html> <body><form action="/action-attribute-page.php" novalidate> <label for="email">Type email address:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </form></body> </html>
Note: Html novalidate attribute only affects client-side form validation. The server-side script can still validate the form data when it is received and process it accordingly.

Here is an example of form novalidate attribute with form target attribute for better understanding:

Example: 

<!DOCTYPE html> <html> <body> <form action="#" method="post" target="_self"> <input type="text" name="fname" placeholder="First name:"> <input type="text" name="lname" placeholder="Last name:"> <input type="text" name="address" placeholder="Address:"> <input type="submit" value="Submit" formtarget="_blank" formnovalidate> </form> </body> </html>

Conclusion

HTML form input attributes are a vital component of web development, and HTML provides various attributes that allows you to customize functionality and behavior. Understanding these attributes, including formaction, formenctype, formmethod, formtarget, formnovalidate, and novalidate, is essential for creating effective and user-friendly web forms.

By leveraging these attributes, you can create dynamic and responsive web forms that provide a great user experience.

You can also ensure that form data is submitted securely, validated correctly, and displayed in the appropriate target window or frame.

Visit our HTML Tag Reference to see a complete list of all HTML tags that are available to you.

We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

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