HTML Form Input Attributes: `form`, `formaction`, `formenctype`, `formmethod`, `formtarget`, `formnovalidate`, `novalidate`

Master HTML form attributes! This tutorial provides a comprehensive guide to `form`, `formaction`, `formenctype`, `formmethod`, `formtarget`, `formnovalidate`, and `novalidate` attributes, enhancing your form control and data handling.

HTML Input Form Attributes

This chapter explores the various attributes that can be applied to input elements within HTML forms, allowing for more control over how forms behave and submit data.

form Attribute

The form attribute specifies which form an input element belongs to, even if the input is placed outside the form's visual boundaries. The form attribute's value must match the id of the associated form element.

<form id="myForm">
  <input type="text" name="fname">
</form>
<input type="submit" form="myForm" value="Submit">

formaction Attribute

The formaction attribute overrides the form's default action URL (where the form data is sent) for a specific submit button. It specifies the URL to handle the submission.

This attribute works only with submit and image input types.

<form action="/default.asp">
  <input type="submit" value="Submit to default.asp">
  <input type="submit" formaction="/another.asp" value="Submit to another.asp">
</form>

formenctype Attribute

The formenctype attribute (used with POST submissions only) overrides the form's default enctype, specifying how form data is encoded before being sent. Common values include application/x-www-form-urlencoded (default) and multipart/form-data (for file uploads).

This attribute works only with submit and image input types.

<form action="/action_page.php" method="post">
  <input type="submit" value="Submit (default)">
  <input type="submit" formenctype="multipart/form-data" value="Submit (multipart/form-data)">
</form>

formmethod Attribute

The formmethod attribute overrides the form's method, specifying how the form data is sent (GET or POST). GET appends data to the URL; POST sends data as an HTTP request body.

This attribute works only with submit and image input types.

GET Method Notes: Appends data to the URL, making it visible in the address bar (not suitable for sensitive data). URLs are limited in length.

POST Method Notes: Sends data in the request body, more secure and has no size limitations.

<form action="/action_page.php">
  <input type="submit" value="Submit (GET)">
  <input type="submit" formmethod="post" value="Submit (POST)">
</form>

formtarget Attribute

The formtarget attribute overrides the form's target attribute, specifying where the response from the server should be displayed (e.g., in a new tab or window). Use a name (like "_blank" for a new tab) or a window's name.

This attribute works only with submit and image input types.

<form action="/action_page.php">
  <input type="submit" value="Submit (same window)">
  <input type="submit" formtarget="_blank" value="Submit (new window)">
</form>

formnovalidate Attribute

The formnovalidate attribute prevents form validation before submission. This overrides the form's novalidate attribute. Use this cautiously as it bypasses client-side checks.

This attribute works only with submit input types.

<form>
  <input type="submit" value="Submit (validate)">
  <input type="submit" formnovalidate value="Submit (no validate)">
</form>

novalidate Attribute

The novalidate attribute (on the `

<form novalidate>
  <input type="submit" value="Submit (no validate)">
</form>