Flash cards
Review the key moves
What is the main idea behind HTML Input form* Attributes?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
<___ action="/action_page.php" id="form1">Put the learning moves in the order that makes the concept easiest to apply.
This chapter describes the different form* attributes for the HTML <input> element.
The form Attribute
The input form attribute specifies the form the <input> element belongs to.
The value of this attribute must be equal to the id attribute of the <form> element it belongs to.
Example
<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>
<label for="lname">Last
name:</label>
<input type="text" id="lname"
name="lname" form="form1">Live preview
The formaction Attribute
The input formaction attribute specifies the URL of the file that will process the input when the form is submitted.
Note
This attribute overrides the action attribute of the <form> element.
The formaction attribute works with the following input types: submit and image.
Example
<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>Live preview
The formenctype Attribute
The input formenctype attribute specifies how the form-data should be encoded when submitted (only for forms with method="post").
Note
This attribute overrides the enctype attribute of the <form> element.
The formenctype attribute works with the following input types: submit and image.
Example
<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>Live preview
The formmethod Attribute
The input formmethod attribute defines the HTTP method for sending form-data to the action URL.
Note
This attribute overrides the method attribute of the <form> element.
The formmethod attribute works with the following input types: submit and image.
The form-data can be sent as URL variables (method="get") or as an HTTP post transaction (method="post").
Notes on the "get" method:
- This method appends the form-data to the URL in name/value pairs
- This method is useful for form submissions where a user want to bookmark the result
- There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred
- Never use the "get" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar)
Notes on the "post" method:
- This method sends the form-data as an HTTP post transaction
- Form submissions with the "post" method cannot be bookmarked
- The "post" method is more robust and secure than "get", and "post" does not have size limitations
Example
<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>Live preview
The formtarget Attribute
The input formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
Note
This attribute overrides the target attribute of the <form> element.
The formtarget attribute works with the following input types: submit and image.
Example
<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>Live preview
The formnovalidate Attribute
The input formnovalidate attribute specifies that an <input> element should not be validated when submitted.
Note
This attribute overrides the novalidate attribute of the <form> element.
The formnovalidate attribute works with the following input types: submit.
Example
<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>Live preview
The novalidate Attribute
The novalidate attribute is a <form> attribute.
When present, novalidate specifies that all of the form-data should not be validated when submitted.
Example
<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>Live preview
HTML Form and Input Elements
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
For a complete list of all available HTML tags, visit our HTML Tag Reference .