Form Attributes in HTML
Form attributes are special properties added to the <form> tag or its input elements to control how the form behaves and how data is sent to the server.
action Attribute
-
The
actionattribute in a<form>specifies the URL or file where the form data will be sent after the user submits it. -
If
actionis not provided, the form submits data to the same page.
Example:
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<input type="submit" value="Submit">
</form>Output :
method Attribute in Forms
The method attribute in HTML forms defines how the form data will be sent to the server when the user clicks the submit button.
There are two main methods:
GET Method
Sends the form data as part of the URL (in the query string).
Example:
<form action="search.php" method="get">
<input type="text" name="query" placeholder="Search...">
<input type="submit" value="Go">
</form>Output :
POST Method
Sends form data in the HTTP request body, not visible in the URL.
More secure than GET, especially for sensitive data (passwords, login forms).
Example:
<form action="submit.php" method="post">
<label>Email:</label>
<input type="email" name="email" required>
<input type="submit" value="Submit">
</form>Output :
Useful Form Attributes
| Attribute | Purpose |
|---|---|
| action | Defines where the form data will be sent (URL or file). |
| method | Defines how data is sent (GET = URL, POST = body). |
| enctype | Specifies encoding type for form data (needed for file upload). |
| target | Defines where to display response (_self, _blank, etc.). |
| autocomplete | Enables/disables autofill suggestions (on / off). |
| novalidate | Submits form without HTML5 validation. |
| accept-charset | Defines character encoding (e.g., UTF-8). |
| name | Identifies the input field (used in backend/JS). |
| value | Sets default value for an input. |
| placeholder | Shows a hint inside the input box. |
| required | Makes a field mandatory before submission. |
| pattern | Validates input using a regular expression. |
| min / max | Sets numeric/date input limits. |
| minlength / maxlength | Restricts number of characters in text input. |
| readonly | Field cannot be edited but is submitted. |
| disabled | Field is disabled (not editable, not submitted). |
| multiple | Allows multiple values (file upload, select). |
| checked | Pre-selects a checkbox or radio button. |
| selected | Pre-selects an option in a dropdown. |
| size | Sets width of input/select field. |
| step | Defines step interval for numeric/date input. |
| list | Connects input with a <datalist> for suggestions. |
| type | Defines input type (text, email, password, etc.). |
| id | Unique identifier, used with <label> and CSS/JS. |
Example :
<form action="submit.php" method="post" autocomplete="on" novalidate>
<!-- Text with placeholder & required -->
<label for="name">Name:</label>
<input type="text" id="name" name="username" placeholder="Enter your name" required><br><br>
<!-- Email with pattern -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter email" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required><br><br>
<!-- Number with min, max, step -->
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="60" step="1" required><br><br>
<!-- Password with minlength, maxlength -->
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="password" minlength="6" maxlength="12" required><br><br>
<!-- Submit -->
<input type="submit" value="Register">
</form>Output :
