HTML Input form* Attributes

Course Recommendations: <input> This chapter introduces HTML Different elements of Attribute.

form*

The attribute of input form attribute form <input> The attribute specifies

The form to which the element belongs.

Example

The value of this attribute must be equal to the id attribute of the <form> element it belongs to.

An input field located outside the HTML form (but still part of the form):
  <label for="fname">Last Name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>
<label for="lname">Name:</label>
<form action="/action_page.php" id="form1">

Try It Yourself

<input type="text" id="lname" name="lname" form="form1">

The attribute of input formaction formaction attribute

Note:The attribute specifies the URL of the file to be processed when the form is submitted. <form> This attribute overrides The attribute Attribute.

formaction The attribute applies to the following input types: submit and image.

Example

An HTML form with two submit buttons that have different actions (action):

<form action="/action_page.php">
  <label for="fname">Last Name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">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>

Try It Yourself

formenctype attribute

The attribute of input formenctype This attribute specifies how form data should be encoded when submitted (only applicable to forms with method="post").

Note:This attribute will override <form> The enctype attribute of the element.

formenctype The attribute applies to the following input types: submit and image.

Example

A form with two submit buttons. The first sends form data using the default encoding, and the second sends form data encoded as "multipart/form-data":

<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 with Multipart/form-data encoding">
</form>

Try It Yourself

formmethod attribute

The attribute of input formmethod This attribute defines the HTTP method to be used when sending form data to the action URL.

Note:This attribute will override <form> The method attribute of the element.

formmethod The attribute applies to the following input types: submit and image.

Form data can be sent as URL variables (method="get") or as an HTTP post transaction (method="post").

Considerations regarding GET:

  • Append form data to the URL in the form of name/value pairs
  • Never use GET to send sensitive data! (Submitted form data is visible in the URL!)
  • The length of the URL is limited (2048 characters)
  • Very useful for form submissions where users want to add the results as bookmarks
  • GET is suitable for non-sensitive data, such as query strings in Google

Considerations regarding POST:

  • Attach form data to the body of the HTTP request (not displayed in the URL)
  • POST has no size limit and can be used to send large amounts of data.
  • Form submissions with POST cannot be bookmarked

Tip:If the form data contains sensitive information or personal information, it is imperative to use POST!

Example

A form with two submit buttons. The first one sends form data using method="get". The second one sends form data using method="post":

<form action="/action_page.php" method="get">
  <label for="fname">Last Name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">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>

Try It Yourself

formtarget attribute

The attribute of input formtarget The attribute specifies a name or keyword that determines where the received response is displayed after the form is submitted.

Note:This attribute will override <form> element's target attribute.

formtarget The attribute applies to the following input types: submit and image.

Example

A form with two submit buttons and different target windows:

<form action="/action_page.php">
  <label for="fname">Last Name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formtarget="_blank" value="Submit to new window/tab">
</form>

Try It Yourself

formnovalidate attribute

The attribute of input formnovalidate The attribute specifies that the <input> element should not be validated when submitted.

Note:This attribute will override <form> The novalidate attribute of the element.

formnovalidate Attribute applies to the following input types: submit.

Example

A form with two submit buttons (with and without validation):

<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>

Try It Yourself

novalidate Attribute

novalidate Attribute is <form> Attribute.

If set, the novalidate attribute specifies that all form data should not be validated upon submission.

Example

Specifies that no form data should be validated upon submission:

<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>

Try It Yourself

HTML Form and Input Elements

Tag Description
<form> Define HTML forms for user input.
<input> Define input controls.

For a complete list of all available HTML tags, please visit our HTML Tag Reference Manual.