This chapter delineates the various attributes related to the form* functionality within the HTML <input> element.
The “form” attribute of the <input> element denotes the specific form to which it pertains.
It requires a value corresponding to the “id” attribute of the relevant <form> element.
Example
An input field that resides external to the HTML form structure but remains associated with the form.
| <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> <label for=”lname”>Last name:</label> <input type=”text” id=”lname” name=”lname” form=”form1″> |
The “formaction” attribute of the input element designates the URL of the file responsible for processing input upon form submission.
Important to note, this attribute supersedes the “action” attribute of the <form> element.
The “formaction” attribute is compatible with the following input types: submit and image.
Example
An HTML form featuring two submit buttons, each triggering distinct actions.
| <form action=”/action_page.php”> <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.php” value=”Submit as Admin”> </form> |
The “formenctype” attribute of the input element determines the encoding method for form data upon submission, applicable only for forms using the “post” method.
It’s essential to note that this attribute takes precedence over the “enctype” attribute of the <form> element.
The “formenctype” attribute is compatible with the following input types: submit and image.
Example
A form featuring two submit buttons: one sends form-data using the default encoding, while the other sends the form-data encoded as “multipart/form-data”.
| <form action=”/action_page_binary.asp” 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> |
The “formmethod” attribute of the input element specifies the HTTP method for transmitting form-data to the action URL.
Crucially, this attribute takes precedence over the “method” attribute of the <form> element.
The “formmethod” attribute is compatible with the following input types: submit and image.
Form data can be dispatched either as URL variables (method=”get”) or as an HTTP post transaction (method=”post”).
Points regarding the “get” method:
Points regarding the “post” method:
Example
A form featuring two submit buttons: one transmits the form-data using the “get” method, while the other transmits it using the “post” method.
| <form action=”/action_page.php” method=”get”> <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> |
The “formtarget” attribute of the input element designates a name or keyword dictating where the response received after form submission should be displayed.
Note: It’s essential to note that this attribute supersedes the “target” attribute of the <form> element.
The “formtarget” attribute is compatible with the following input types: submit and image.
Example
A form featuring two submit buttons, each directing responses to different target windows.
| <form action=”/action_page.php”> <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> |
The “formnovalidate” attribute of the input element indicates that an <input> element should not undergo validation upon submission.
It’s important to note that this attribute takes precedence over the “novalidate” attribute of the <form> element.
The “formnovalidate” attribute is applicable only to input types: submit.
Example
A form containing two submit buttons, one subjected to validation and the other not.
| <form action=”/action_page.php”> <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> |
The “novalidate” attribute belongs to the <form> element.
When included, “novalidate” indicates that all form-data should bypass validation upon submission.
Example
Indicate that validation of form-data should be disabled upon submission.
| <form action=”/action_page.php” novalidate> <label for=”email”>Enter your email:</label> <input type=”email” id=”email” name=”email”><br><br> <input type=”submit” value=”Submit”> </form> |
