Input Form Attributes
A handful of attributes that normally belong on <form> can also be set on individual <input> (and <button>) elements. They override the form's setting for that one control.
Input-side overrides
| Attribute | Effect |
|---|---|
form | Link this control to a form elsewhere in the document by its id — no need to be nested inside it. |
formaction | Override the form's action URL for this button only. |
formmethod | Override the form's HTTP method. |
formenctype | Override the form's encoding. |
formtarget | Override where the response opens. |
formnovalidate | Skip validation when submitting through this button. |
Why this is useful
The classic case is a form with two submit buttons — "Save draft" and "Publish" — that should go to different URLs:
<form action="/posts" method="post">
<textarea name="body"></textarea>
<button type="submit">Publish</button>
<button type="submit"
formaction="/posts/draft"
formnovalidate>Save draft</button>
</form>
Tip: The
form attribute lets you place inputs anywhere on the page — handy when CSS layout fights against a single wrapping <form>.Example
Example
<!DOCTYPE html>
<html>
<head>
<title>Input Form Attributes</title>
</head>
<body>
<h1>Input Form Attributes</h1>
<p>This is a demo page for the "Input Form Attributes" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Show a hint inside an empty input that disappears on typing.
<input type="text"
="you@example.com">
11 letters. The "ghost text" attribute.
Discussion
Loading…