HTML: Hypertext Markup Language <input> form* Attributes
In this article, we will learn about different form* attributes for the HTML <input> element in detail.{alertSuccess}
{tocify} $title={Table of Contents}
The form Attribute
The input form attribute determines the form the <input> element belongs to.
The value of this attribute must stand equal to the id attribute of the <form> element it belongs to.
Example
An input field found outside of the HTML form (but still a part of the form):
<!DOCTYPE html><html><body><h1>The input form attribute</h1><p>The form attribute specifies the form an input element belongs to.</p><form action="/action_page.php" id="form1"><label for="fname">First name:</label><input type="text" id="fname" name="fname"><br><br><input type="submit" value="Submit"> </form><p>The "Last name" field below is outside the form element, but still part of the form.</p><label for="lname">Last name:</label><input type="text" id="lname" name="lname" form="form1"></body></html>{codeBox}
The formaction Attribute
The input formaction attribute determines the URL of the file that will process the input when the form is submitted.
Notice: This attribute overrides the action attribute of the <form> element.
The formaction attribute functions with the following input types: submit and image.
Example
An HTML form with two submit buttons, with different actions:
<form action="/action_page.html"><label for="fname">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_page2.html" value="Submit as Admin"></form>{codeBox}
The formenctype Attribute
The input formenctype attribute determines how the form-data should be encoded when submitted (only for forms with method="post").
Notice: This attribute overrides the enctype attribute of the <form> element.
The formenctype attribute functions with the following input types: submit and image.
Example
A form with two submit buttons. The first sends the form-data with default encoding, the second sends the form-data encoded as "multipart/form-data":
<form action="/action_page_binary.html" method="post"><label for="fname">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>{codeBox}
The formmethod Attribute
The input formmethod attribute specifies the HTTP method for sending form-data to the action URL.
Notice: This attribute overrides the method attribute of the <form> element.
The formmethod attribute functions with the following input types: submit and image.
The form-data can be transmitted as URL variables (method="get") or as an HTTP post transaction (method="post").
Notes on the "get" method:
- This process appends the form-data to the URL in name/value pairs.
- This approach is good for form submissions where a user desires to bookmark the result.
- There is a limitation to how much data you can place in a URL (varies between browsers); therefore, you cannot be confident that all of the form-data will be perfectly transferred.
- Never use the "get" way to pass sensitive details! (password or other sensitive information will be visible in the browser's address bar)
Notes on the "post" method:
- This process sends the form-data as an HTTP post transaction
- Form submissions with the "post" process cannot be bookmarked
- The "post" process is more robust and safe than "get", and "post" does not have size limitations
Example
A form with two submit buttons. The first sends the form-data with method="get". The second sends the form-data with method="post":
<!DOCTYPE html><html><body><h1>The input formmethod Attribute</h1><p>The formmethod attribute defines the HTTP method for sending form-data to the action URL.</p><form action="/action_page.html" method="get" target="_blank"><label for="fname">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 using GET"><input type="submit" formmethod="post" value="Submit using POST"> </form></body></html>{codeBox}
The formtarget Attribute
The input formtarget attribute determines a name or a keyword that indicates where to show the response that is received after submitting the form.
Notice: This attribute overrides the target attribute of the <form> element.
The formtarget attribute functions with the following input types: submit and image.
Example
A form with two submit buttons, with different target windows:
<form action="/action_page.html"><label for="fname">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" formtarget="_blank" value="Submit to a new window/tab"></form>{codeBox}
The formnovalidate Attribute
The input formnovalidate attribute determines that an <input> element should not be validated when submitted.
Notice: This attribute overrides the novalidate attribute of the <form> element.
The formnovalidate attribute functions with the following input types: submit.
Example
A form with two submit buttons (with and without validation):
<form action="/action_page.html"><label for="email">Enter your email:</label><input type="email" id="email" name="email"><br><br><input type="submit" value="Submit"><input type="submit" formnovalidate="formnovalidate" value="Submit without validation"></form>{codeBox}
The novalidate Attribute
The novalidate attribute is a <form> attribute.
When present, novalidate determines that all of the form-data should not be validated when submitted.
Example
Specify that no form-data should be validated on submit:
<!DOCTYPE html><html><body><h1>The form novalidate attribute</h1><p>The novalidate attribute specifies that the form data should not be validated when submitted.</p><form action="/action_page.html" novalidate><label for="email">Enter your email:</label><input type="email" id="email" name="email" required><br><br><input type="submit" value="Submit"> </form><p><strong>Note:</strong> The novalidate attribute of the form tag is not supported in Safari 10 (or earlier).</p></body></html>{codeBox}
Conclusion:
Friends, according to my expertise, I have written complete information to help you with “HTML Input form* Attributes.” If this post is favourable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
