HTML Input Form Attributes

Understand form-specific properties enabling input-level configuration overrides for parent element settings

HTML5 specifications introduced form-associated attributes applicable to input components. These properties permit selective override of parent form configurations. This functionality proves particularly valuable when implementing multiple submission controls requiring distinct behavioral patterns.

Input Form Attributes

The following attributes can be used with input elements to override form element attributes:

Attribute Description
form Specifies the form the input belongs to
formaction Specifies the URL for form submission (overrides form action)
formenctype Specifies how form data should be encoded (overrides form enctype)
formmethod Specifies the HTTP method (overrides form method)
formtarget Specifies where to display response (overrides form target)
formnovalidate Specifies that form should not be validated (overrides form novalidate)

💡 Key Concept

These attributes work with input types: submit and image. They allow different submit buttons to perform different actions on the same form.

The formaction Attribute

The 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="/submit-form.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>

  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>

  <input type="submit" value="Submit">
  <input type="submit" formaction="/admin-submit.php" value="Submit as Admin">
</form>

In this example:

  • The first submit button sends data to /submit-form.php (default form action)
  • The second submit button sends data to /admin-submit.php (overridden action)

The formenctype Attribute

The 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="/submit-form.php" method="post">
  <label for="fname">First name:</label><br>
  <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>

Encoding Types

Value Description
application/x-www-form-urlencoded Default. All characters are encoded before sent
multipart/form-data No characters are encoded. Required for file uploads
text/plain Spaces converted to + but no special encoding

The formmethod Attribute

The 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").

Example

<form action="/submit-form.php" method="get">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>

  <label for="lname">Last name:</label><br>
  <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>

In this example:

  • The first submit button uses GET method (default form method)
  • The second submit button uses POST method (overridden method)

GET vs POST

Feature GET POST
Data visibility Visible in URL Hidden in request body
Data size limit ~2048 characters No limit
Bookmarkable Yes No
Cacheable Yes No
Security Less secure More secure

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

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="/submit-form.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>

  <label for="lname">Last name:</label><br>
  <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>

Target Values

Value Description
_blank Opens in a new window or tab
_self Opens in the same frame (default)
_parent Opens in the parent frame
_top Opens in the full body of the window
framename Opens in a named iframe

The formnovalidate Attribute

The 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="/submit-form.php">
  <label for="email">Enter your email:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <input type="submit" value="Submit">
  <input type="submit" formnovalidate value="Submit without validation">
</form>

In this example:

  • The first submit button validates the email field (required and email format)
  • The second submit button skips validation, allowing submission even if email is invalid or empty

Use Cases for formnovalidate

  • Save Draft: Allow users to save incomplete forms
  • Cancel: Exit forms without validation
  • Preview: Preview form content without submitting
  • Testing: Bypass validation during development

The form Attribute

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

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

This attribute allows you to place input elements anywhere in the document, not just inside the form element.

Example

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

Note: Even though the "Last name" input is outside the form tags, it will still be submitted with the form because it has the form="form1" attribute.

💡 Tip

The form attribute is useful when you have complex layouts where form inputs need to be positioned in different parts of the page but still belong to the same form.

Complete Example - Multiple Submit Buttons

Here's a practical example showing how different submit buttons can perform different actions:

Example - User Management Form

<form action="/user-create.php" method="post">
  <h3>User Management</h3>

  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username" required><br><br>

  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password" required><br><br>

  <!-- Create new user (uses default form action) -->
  <input type="submit" value="Create User">

  <!-- Update existing user (different action) -->
  <input type="submit" formaction="/user-update.php" value="Update User">

  <!-- Delete user (different action and method) -->
  <input type="submit" formaction="/user-delete.php"
         formmethod="post"
         formnovalidate
         value="Delete User">

  <!-- Save draft (no validation, different action) -->
  <input type="submit" formaction="/user-draft.php"
         formnovalidate
         value="Save Draft">

  <!-- Preview in new window (different target) -->
  <input type="submit" formaction="/user-preview.php"
         formtarget="_blank"
         formnovalidate
         value="Preview">
</form>

This example demonstrates:

  • Create User: Uses default form action and validation
  • Update User: Uses different action URL
  • Delete User: Uses different action, no validation needed
  • Save Draft: Different action, no validation (allows incomplete data)
  • Preview: Opens in new window, no validation

Input Form Attributes Summary

Attribute Overrides Works With
form - All input types
formaction form action submit, image
formenctype form enctype submit, image
formmethod form method submit, image
formtarget form target submit, image
formnovalidate form novalidate submit

Best Practices

  • Use meaningful button labels: Make it clear what each submit button does
  • Consider user experience: Don't confuse users with too many submit options
  • Use formnovalidate wisely: Only skip validation when appropriate (save draft, cancel)
  • Test different scenarios: Ensure each button works correctly with its overridden attributes
  • Maintain consistency: Use similar patterns across your application
  • Provide feedback: Let users know which action was performed
  • Use confirmation dialogs: For destructive actions like delete, consider JavaScript confirmation

Test Your Knowledge