HTML Form Attributes
This chapter describes the different attributes you can use on the HTML <form> element.
The Action Attribute
The action attribute says what should happen when the form is submitted.
Usually the form data is sent to a file on the server when the user clicks the submit button. In the example below it is sent to a file called action_page.php, which holds a server-side script that handles the data.
Tip: If you leave out the action attribute, the data is sent to the current page.
Example
On submit, the form data is sent to action_page.php.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Action Attribute</title>
</head>
<body>
<h2>The action Attribute</h2>
<p>On submit, the form data is sent to "action_page.php".</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Target Attribute
The target attribute says where to show the response that comes back after the form is submitted.
It can be one of: _blank (a new window or tab), _self (the current window), _parent (the parent frame), _top (the full window), or a frame name (a named iframe). The default is _self, so the response opens in the current window.
Example
Here the submitted result opens in a new browser tab, because target is set to _blank.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Target Attribute</title>
</head>
<body>
<h2>The target Attribute</h2>
<p>The submitted result will open in a new browser tab:</p>
<form action="/action_page.php" target="_blank">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Method Attribute
The method attribute says which HTTP method to use when sending the form data.
The data can be sent as URL variables with method="get", or inside the request body with method="post". The default method is GET.
Notes on GET: it adds the form data to the URL as name/value pairs, so never use it for sensitive data (it shows in the URL). URLs also have a length limit (about 2048 characters). GET is handy when the user wants to bookmark the result, and it is fine for non-secure data like search queries.
Notes on POST: it puts the form data inside the body of the request, so it is not shown in the URL. POST has no size limit and can send large amounts of data, but POST submissions cannot be bookmarked.
Tip: Always use POST if the form data contains sensitive or personal information.
GET method
This form uses the GET method when it sends the data.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Method Attribute (GET)</title>
</head>
<body>
<h2>Using the GET method</h2>
<form action="/action_page.php" method="get">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
POST method
This form uses the POST method when it sends the data.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Method Attribute (POST)</title>
</head>
<body>
<h2>Using the POST method</h2>
<form action="/action_page.php" method="post">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Autocomplete Attribute
The autocomplete attribute says whether a form should have autocomplete turned on or off.
When it is on, the browser can fill in values automatically based on what the user typed before.
Example
A form with autocomplete set to on.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Autocomplete Attribute</title>
</head>
<body>
<h2>The autocomplete Attribute</h2>
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Novalidate Attribute
The novalidate attribute is a boolean attribute (it is either there or not).
When it is present, the browser will not validate the form data when the form is submitted.
Example
A form with the novalidate attribute.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Novalidate Attribute</title>
</head>
<body>
<h2>The novalidate Attribute</h2>
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label><br>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
List of All <form> Attributes
These are all the attributes the <form> element supports:
accept-charset— the character encodings used for form submission.action— where to send the form data when the form is submitted.autocomplete— whether the form should have autocomplete on or off.enctype— how the form data should be encoded when sent to the server (only formethod="post").method— the HTTP method to use when sending the form data.name— the name of the form.novalidate— that the form should not be validated when submitted.rel— the relationship between a linked resource and the current document.target— where to show the response received after the form is submitted.