HTML Form Attributes
In this page:
The action Attribute
The action attribute defines the server URL or endpoint where the form data will be sent when the user clicks the submit button.
Note: If you leave the action attribute empty, the browser will submit the data straight to the current page URL.
Warning: Make sure your action URL is completely correct and secure, or your form submissions will fail.
Example: The action Attribute
<form action="/submit-form">
<input type="text" name="query">
</form>The method Attribute
The method attribute defines the HTTP protocol method used to transmit your form data. You can choose between the GET method (which appends data to the URL path) and the POST method (which hides the data inside the request body).
Note: Use the GET method for search queries, and the POST method for sensitive information like passwords or file uploads.
Warning: Never use the GET method to transmit passwords or personal data, as they will be displayed openly in the browser address bar.
Example: The method Attribute
<form action="/search" method="get">
<input type="text" name="q">
</form>The target Attribute
The target attribute tells the browser where to display the response page after the form is submitted. It works exactly like the target attribute on standard links, allowing you to load response pages in the current window or a new tab.
Note: Set target="_blank" when you want to keep users on your current tool page after they submit feedback.
Warning: Do not overuse target="_blank" as opening endless tabs can clutter your user's desktop browser.
Example: The target Attribute
<form action="/feedback" method="post" target="_blank">
<input type="text" name="comment">
</form>The autocomplete Attribute
The autocomplete attribute tells the browser if it can automatically fill in form fields based on the user's past entries. You can toggle this setting on or off for the entire form or for specific input fields.
Note: Keep autocomplete enabled on registration forms to save your users from typing repetitive details.
Warning: Disable autocomplete on sensitive fields like bank accounts or security codes to protect user privacy on shared computers.
Example: The autocomplete Attribute
<form autocomplete="on">
<input type="text" name="username">
</form>The novalidate Attribute
By default, browsers perform basic validation checks on form fields (like ensuring email fields contain an '@' symbol) before submitting. The novalidate attribute disables these native browser checks, letting you handle validation using custom JavaScript instead.
Note: Use the novalidate attribute when you want to design custom, styled error messages using JavaScript.
Warning: If you disable browser validation using novalidate, you must write custom script validation to prevent users from submitting blank forms.
Example: The novalidate Attribute
<form action="/submit" novalidate>
<input type="email" name="email" required>
</form>- Using the public GET method to transmit sensitive user passwords or payment details.
- Misspelling your server endpoint URLs inside the action attribute, causing form submissions to fail.
- Disabling browser validation using the novalidate attribute without writing custom scripts to verify user inputs.
- The action attribute specifies the destination URL where your form data will be sent.
- The method attribute defines how data is transmitted: publicly in the URL (GET) or securely inside the request body (POST).
- Control browser autofill features using autocomplete, and toggle native browser validation checks using novalidate.
Standard HTML form attributes are supported natively by all web browsers.
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: