HTML Form Attributes

HTML form attributes are used to define various properties and behaviors of HTML forms.

Here are some commonly used attributes:

The Action Attribute

Specifies the URL where the form data should be sent upon submission.

As an example:

<form action="/submit-form" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

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

  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>

  <input type="submit" value="Submit" />
</form>

In this example:

• The action attribute is set to "/submit-form".
• This means that when the user submits the form, the data will be sent to the URL "/submit-form".
• The method is set to "POST", so the data will be sent using the HTTP POST method.

The Method Attribute

Specifies the HTTP method to be used when submitting the form (e.g. GET, POST).

As an example:

<form action="/submit-form" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

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

  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>

  <input type="submit" value="Submit" />
</form>

In this example:

• The method attribute is set to "POST".
• This means that when the user submits the form, the data will be sent to the server using the HTTP POST method.

You can replace "POST" with "GET" if you want the form data to be sent using the HTTP GET method instead.

As an example:

<form action="/search" method="GET">
  <label for="search-term">Search:</label>
  <input type="text" id="search-term" name="q" />

  <input type="submit" value="Search" />
</form>

The Target Attribute

Specifies where to display the response that is received after submitting the form (e.g. "_self", "_blank").

As an example:

<form action="/submit-form" method="POST" target="_blank">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

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

  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>

  <input type="submit" value="Submit" />
</form>

In this example:,

• The target attribute is set to "_blank".
• This means that when the user submits the form, the response will be loaded in a new browser window or tab.

The Name Attribute

Specifies a name for the form that can be used to reference it in scripts.

As an example:

<form action="/submit-form" method="POST" name="contact-form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

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

  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>

  <input type="submit" value="Submit" />
</form>

In this example:

• The name attribute is set to "contact-form".
• This can be useful if you have multiple forms on the same page and you want to distinguish between them using JavaScript or CSS.

The Enctype Attribute

Specifies the encoding type to be used when submitting the form (e.g. "application/x-www-form-urlencoded", "multipart/form-data").

As an example:

<form action="/submit-form" method="POST" enctype="multipart/form-data">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

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

  <label for="image">Image:</label>
  <input type="file" id="image" name="image" />

  <input type="submit" value="Submit" />
</form>

In this example:

• The enctype attribute is set to "multipart/form-data".
• This is used when the form includes one or more file inputs (<input type="file">) to upload files to the server.
• The enctype attribute specifies how the form data should be encoded before it is sent to the server.
• The default value is "application/x-www-form-urlencoded", which is used for most forms that don't include file inputs.
• When the enctype attribute is set to "multipart/form-data", the form data is sent as a series of parts, each containing a portion of the form data, including any uploaded files.
• The server can then reconstruct the form data and process it appropriately.

info

The enctype attribute is required when submitting forms with file inputs. If you don't specify an enctype, the form data will not be encoded correctly and the file uploads will fail.

The Autocomplete Attribute

Specifies whether the browser should automatically complete the form fields or not.

As an example:

<form action="/submit-form" method="POST" autocomplete="on">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

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

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

  <input type="submit" value="Submit" />
</form>

In this example:

• The autocomplete attribute is set to "on".
• This is used to enable the browser's autocomplete feature for the form inputs.
• The autocomplete attribute specifies whether the browser should remember and autocomplete the form data as the user types.
• The values for the autocomplete attribute are "on" and "off". - If you set autocomplete to "off", the browser will not remember the form data and will not display autocomplete suggestions.

The Novalidate Attribute

Specifies that the form should not be validated upon submission.

As an example

<form action="/submit-form" method="POST" novalidate>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />

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

  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>

  <input type="submit" value="Submit" />
</form>

In this example:

• The novalidate attribute is used to disable the browser's built-in form validation.
• By default, modern browsers will validate the form data as the user types and display error messages if the data is not valid.
• The novalidate attribute specifies that the form should not be validated by the browser.
• This can be useful if you want to implement your own form validation logic using JavaScript or if you want to submit the form data without validation.

The Accept-charset Attribute

Specifies the character set encoding to be used when submitting the form.

As an example:

<form action="/submit-form" method="POST" accept-charset="UTF-8">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

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

  <input type="submit" value="Submit" />
</form>

In this example:

• The accept-charset attribute is used to specify the character encoding that should be used when the form data is submitted to the server.
• The accept-charset attribute is an alternative to the charset attribute that can be used in the Content-Type header of the HTTP request.
• The accept-charset attribute specifies the character encoding in which the form data should be encoded before it is sent to the server.
• The default value for accept-charset is the character encoding of the document containing the form.