Form Attributes
HTML form attributes are special properties that control how a form behaves. They tell the browser how and where to send the form data, whether to validate it, how to encode it, and more.
Here is a breakdown of the most commonly used form attributes:
Here is a breakdown of the most commonly used form attributes:
Common HTML Form Attributes
| Attribute | Description |
|---|---|
| accept-charset | Sets the character encoding for submitted data (like UTF-8). |
| action | URL where form data will be sent on submission. |
| autocomplete | Turns autocomplete on or off for form fields. |
| enctype | Defines how data is encoded ( used with method="post"). |
| method | Specifies the HTTP method ( GET or POST). |
| novalidate | Skips built-in form validation when submitting. |
| rel | Describes the relationship between the form and the target document. |
| target | Determines where to display the response after form submission. |
| name | Gives a name to the form ( useful in JavaScript or for form identification). |
action Attribute – Where to Send Data
The action attribute defines the destination URL where form data is sent after submission.
The action attribute defines the destination URL where form data is sent after submission.
Example:
<form action="submit_form.php"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <input type="submit" value="Submit"></form>When you click "Submit", the data is sent to submit_form.php.
target Attribute – Where to Open Result
The target attribute defines where the server’s response will appear after the form is submitted.
Example:
The target attribute defines where the server’s response will appear after the form is submitted.
Example:
<form action="submit_form.php" target="_blank"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <input type="submit" value="Submit"></form>This will open the result in a new tab or window.
Common target Values:
| Value | Description |
|---|---|
| _blank | Opens response in a new tab or window. |
| _self | Default. Opens in the same window/tab. |
| _parent | Opens in the parent frame. |
| _top | Opens in the full body of the window. |
| framename | Opens in a specific <iframe> with that name. |
method Attribute – How to Send Data
The method attribute decides how form data is sent to the server.
Example:
The method attribute decides how form data is sent to the server.
Example:
<form action="submit_form.php" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <input type="submit" value="Submit"></form>Two Common HTTP Methods:
- GET: Appends form data in the URL. Good for non-sensitive data.
- POST: Sends form data securely in the request body. Best for login, registration, etc.
autocomplete Attribute – Smart Input Filling
This attribute lets browsers auto-fill user information based on previous entries.
Example:
This attribute lets browsers auto-fill user information based on previous entries.
Example:
<form action="submit_form.php" method="post" autocomplete="on"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit"></form>If autocomplete is on, the browser will suggest previous inputs ( like saved names or emails ).