HTML Input form* Attributes
This chapter describes the different form* attributes you can use on the HTML <input> element. These are extra attributes whose names start with form, and most of them let a single button override a setting on the form it belongs to.
The form Attribute
The form attribute says which form an <input> belongs to. Set its value to the id of the <form>. This lets an input sit outside the form in the page but still be sent with it.
Example
A field placed outside the form that still belongs to it through the form 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 form Attribute</title>
</head>
<body>
<form action="/action_page.php" id="form1">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
<p>The "Last name" field below is outside the form, but still part of it:</p>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
</body>
</html>
The formaction Attribute
The formaction attribute sets the URL of the file that will handle the input when the form is submitted.
Note: It overrides the form's own action attribute. It works with the submit and image input types.
Example
A form with two submit buttons that send the data to different URLs.
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 formaction Attribute</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>
</body>
</html>
The formenctype Attribute
The formenctype attribute sets how the form data should be encoded when it is sent (only for forms using method="post").
Note: It overrides the form's own enctype attribute. It works with the submit and image input types.
Example
A form with two submit buttons: one uses the default encoding, the other sends the data as multipart/form-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 formenctype Attribute</title>
</head>
<body>
<form action="/action_page_binary.asp" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">
</form>
</body>
</html>
The formmethod Attribute
The formmethod attribute sets the HTTP method used to send the form data to the action URL.
Note: It overrides the form's own method attribute. It works with the submit and image input types. The data can be sent as URL variables with GET or as an HTTP post with POST.
Notes on GET: it adds the data to the URL as name/value pairs, is handy when the user wants to bookmark the result, and has a URL length limit, so not all data may transfer. Never use GET for sensitive information, since it shows in the address bar.
Notes on POST: it sends the data as an HTTP post, which cannot be bookmarked. POST is more robust and secure than GET and has no size limit.
Example
A form with two submit buttons, one sending with GET and one with POST.
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 formmethod Attribute</title>
</head>
<body>
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit using GET">
<input type="submit" formmethod="post" value="Submit using POST">
</form>
</body>
</html>
The formtarget Attribute
The formtarget attribute sets a name or keyword for where to show the response received after the form is submitted.
Note: It overrides the form's own target attribute. It works with the submit and image input types.
Example
A form with two submit buttons that show the response in different windows.
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 formtarget Attribute</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
</body>
</html>
The formnovalidate Attribute
The formnovalidate attribute says that an <input> should not be validated when the form is submitted.
Note: It overrides the form's own novalidate attribute. It works with the submit input type.
Example
A form with two submit buttons, one of which skips validation.
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 formnovalidate Attribute</title>
</head>
<body>
<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
</form>
</body>
</html>
The novalidate Attribute
The novalidate attribute is a <form> attribute. When it is present, none of the form data is validated when the form is submitted.
Example
A form set so that no form data is validated on submit.
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>
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>