HTML Input Form Attributes

Input Form Attributes refer to the various attributes that can be used in HTML forms to provide additional information or functionality to the form. Here's a brief overview of some of the input form attributes:

  1. formaction - This attribute specifies the URL to which the form data is submitted when the form is submitted. It can be used to override the default URL specified in the "action" attribute of the form tag.
  2. formenctype - This attribute specifies the encoding type of the form data when it is submitted. The default value is "application/x-www-form-urlencoded". Other possible values include "multipart/form-data" and "text/plain".
  3. formmethod - This attribute specifies the HTTP method to be used when submitting the form data. The default value is "GET". Other possible values include "POST", "PUT", "DELETE", etc.
  4. formtarget - This attribute specifies the name of the target window or frame where the form data should be submitted. The default value is "_self" (which means the current window or frame).
  5. formnovalidate / novalidate - This attribute specifies whether or not the form data should be validated before submitting. If the "novalidate" attribute is present, the form data will not be validated.

formaction attribute

The formaction attribute is an HTML5 attribute that can be used to specify the URL of the server-side script that should handle the form submission when a user submits a form. This attribute can be added to the <button> and <input> elements that have a type attribute with a value of "submit".

When a user clicks on a submit button, the form will be submitted to the URL specified in the action attribute of the <form> element. However, if the formaction attribute is present on a submit button or input field, it will override the action attribute of the form and the form data will be submitted to the URL specified in the formaction attribute instead.

Following is an example of how to use the formaction attribute:

<form action="/login" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username"><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br> <button type="submit" formaction="/register">Register</button> <button type="submit">Login</button> </form>
run this source code Browser View


In the above example, the form will be submitted to the "/login" URL by default when the "Login" button is clicked. However, if the user clicks the "Register" button, the form data will be submitted to the "/register" URL instead.

This can be useful in situations where you have multiple actions that can be performed on a form, such as registering a new user or logging in an existing user. By using the formaction attribute, you can easily specify which action should be performed without having to create separate forms for each action.

formenctype attribute

The formenctype attribute is an HTML5 attribute that can be used to specify the encoding type that should be used when submitting form data to the server. This attribute can be added to the <form> element.

When a form is submitted, the default encoding type is "application/x-www-form-urlencoded". This encoding type is suitable for simple forms that contain text input fields, checkboxes, and radio buttons. However, if the form contains binary data, such as image or audio files, a different encoding type is required.

Following is an example of how to use the formenctype attribute:

<form action="/upload" method="post" enctype="multipart/form-data" formenctype="multipart/form-data"> <label for="file">Choose a file to upload:</label> <input type="file" id="file" name="file"> <button type="submit">Upload</button> </form>
run this source code Browser View

In the above example, the enctype attribute is set to "multipart/form-data" to enable file uploads. However, the formenctype attribute is also set to "multipart/form-data" to ensure that the form data is submitted with the correct encoding type.

Note that the formenctype attribute is optional and is not required if the enctype attribute is already set correctly.

Other possible values for the formenctype attribute include "text/plain" and "application/json". "text/plain" is suitable for forms that contain only text data, while "application/json" is suitable for forms that submit data in JSON format.

formmethod attribute

The formmethod attribute is an HTML5 attribute that can be used to specify the HTTP method that should be used when submitting form data to the server. This attribute can be added to the <form> element.

The default method for submitting form data is GET, which appends the form data to the URL as query parameters. However, GET is not suitable for submitting large amounts of data or sensitive information. In these cases, POST should be used instead.

Following is an example of how to use the formmethod attribute:

<form action="/submit-form" method="post" formmethod="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <button type="submit">Submit</button> </form>
run this source code Browser View


In the above example, the formmethod attribute is set to "post" to ensure that the form data is submitted using the POST method.

Other possible values for the formmethod attribute include "get", "head", "put", "delete", "connect", "options", "trace", and "patch". These values correspond to the various HTTP methods that can be used to interact with a server.

formtarget attribute

The formtarget attribute is an HTML attribute used to specify the target window or frame in which the response from a form should be displayed after submission. It is typically used in conjunction with the form element's target attribute to specify where the form should be submitted and how the response should be displayed.

The formtarget attribute can be used on any element that triggers the submission of a form, such as a button, input, or image. When the form is submitted, the browser will attempt to load the response into the specified target window or frame, rather than loading the response in the same window or frame that the form was submitted from.

Following is an example of how the formtarget attribute can be used:

<!DOCTYPE html> <html> <head> <title>Form Target Example</title> </head> <body> <form action="submit-form.php" method="post" target="_blank"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <br> <input type="submit" value="Submit" formtarget="_self"> <input type="submit" value="Submit and Open Response in New Window" formtarget="_blank"> </form> </body> </html>
run this source code Browser View

In the above example, a simple HTML form with two submit buttons. The form element has a target attribute set to _blank, which means that when the form is submitted, the response will be loaded in a new browser window or tab.

The first submit button has no formtarget attribute, so it will use the form element's target attribute and open the response in a new window. The second submit button has a formtarget attribute set to _self, which means that when it is clicked, the form will be submitted and the response will be loaded in the same window or frame that the form was submitted from.

By using the formtarget attribute, you can control how the response from a form is displayed after submission, giving you more flexibility in how your web application behaves.

formnovalidate attribute

The formnovalidate attribute is an HTML attribute that can be added to a <button> or <input> element of a form. It allows users to submit a form without triggering the browser's validation process, which means that the form will be submitted regardless of whether the input data meets the validation criteria or not.

Following an example of how the formnovalidate attribute can be used:

<form> <label for="email">Enter your email address:</label> <input type="email" id="email" name="email" required><br> <button type="submit">Submit</button> <button type="submit" formnovalidate>Submit without validation</button> </form>
run this source code Browser View

In the above example, a simple form with an email input field that has the required attribute, which means that it cannot be submitted unless the user enters a valid email address. The form also has two submit buttons. The first button triggers the validation process and submits the form only if the input data meets the validation criteria. The second button has the formnovalidate attribute, which allows the form to be submitted without validation.

When the user clicks on the first button, the browser's validation process will be triggered, and if the email field is empty or contains an invalid email address, an error message will be displayed, and the form will not be submitted. However, if the user clicks on the second button, the form will be submitted without triggering the validation process, regardless of the input data.

It's important to note that using the formnovalidate attribute can potentially lead to security vulnerabilities and user data integrity issues if not used properly. For example, if a form collects sensitive information such as passwords or credit card details, allowing users to bypass validation can result in invalid or malicious data being submitted, compromising the security of the system. Therefore, it's recommended to use this attribute only in specific cases where validation is not essential or to provide a backup option for submitting the form if the validation fails.

Conclusion:

These input form attributes can be very useful when building HTML forms, as they provide additional control over how the form data is processed and submitted.






Related Topics
  1. HTML Form Attributes
  2. HTML Form Elements
  3. HTML Form Action
  4. HTML Input Types
  1. HTML Input Attributes