HTML Input Form Attributes

HTML Input form* Attributes

 

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.

<!DOCTYPE html>
<html>
<body>


<h1>The input form attribute</h1>

<p>The form attribute specifies the form an input element belongs to</p>

<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 element, but still part of the form.</p>

<label for=”lname”>Last name:</label>

<input type=”text” id=”lname” name=”lname” form=”form1″>

</body>
</html>

The input form attribute

The form attribute specifies the form an input element belongs to.

 

The “Last name” field below is outside the form element, but still part of the form.

 

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.

<!DOCTYPE html>
<html>
<body>


<h1>The input form attribute</h1>

<p>The formaction attribute specifies the URL of a file that will process the input when the form is submitted.</p>

 

<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 input formaction attribute

The formaction attribute specifies the URL of a file that will process the input when the form is submitted.

 

 

 

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.

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

<!DOCTYPE html>
<html>
<body>


<h1>The input form attribute</h1>

 

<p>The formenctype attribute specifies how the form data should be encoded when submitted.</p>

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

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
A form with two submit buttons. The first sends the form-data with method=”get”. The second sends the form-data with method=”post”:

<!DOCTYPE html>
<html>
<body>


<h1>The input form attribute</h1>

 

<p>The formmethod attribute defines the HTTP method for sending form-data to the action URL.</p>

<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 input formmethod Attribute

The formmethod attribute defines the HTTP method for sending form-data to the action URL.

 

 

 

The formtarget Attribute

The input formtarget a 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.

<!DOCTYPE html>

<html>

<body>

 

<h1>The input formtarget attribute</h1>

 

<p>The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.</p>

 

<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 input formtarget attribute

The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

 

 

 

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.

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

<!DOCTYPE html>

<html>

<body>

 

<h1>The input formnovalidate attribute</h1>

 

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

 

<p><strong>Note:</strong> The formnovalidate attribute of the input tag is not supported in Safari 10 (or earlier).</p>

 

</body>

</html>

 

The input formnovalidate attribute

 

 

Note: The formnovalidate attribute of the input tag is not supported in Safari 10 (or earlier).

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.

<!DOCTYPE html>

<html>

<body>


<h1>The form novalidate attribute</h1>


<p>The novalidate attribute specifies that the form data should not be validated when submitted.</p>


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


<p><strong>Note:</strong> The novalidate attribute of the form tag is not supported in Safari 10 (or earlier).</p>


</body>

</html>


The form novalidate attribute

The novalidate attribute specifies that the form data should not be validated when submitted.

 

Note: The novalidate attribute of the form tag is not supported in Safari 10 (or earlier).