HTML Form Attributes

HTML form attributes enhance the functionality and behavior of forms. These attributes are added to <form> and <input> elements to control their actions, validation, and interaction.

Key HTML Form Attributes

1. action

Specifies the URL where the form data will be sent after submission.

<form action="/submit-data">
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

Output: When submitted, data is sent to /submit-data.

2. method

Defines the HTTP method (GET or POST) to use when sending the form data.

<form action="/submit-data" method="POST">
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

Output: Form data is sent via the POST method.

3. enctype

Specifies the encoding type for form data. Common values:

• application/x-www-form-urlencoded (default)
• multipart/form-data (for file uploads)

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">Upload</button>
</form>

Output: Enables file uploads.

4. autocomplete

Controls whether the browser should autocomplete form fields.

<form action="/login" autocomplete="off">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Login</button>
</form>

Output: Autocomplete is disabled.

5. novalidate

Disables HTML5 form validation.

<form action="/submit-data" novalidate>
  <input type="email" name="email" required>
  <button type="submit">Submit</button>
</form>

Output: Allows form submission without validation.

6. target

Specifies where to display the response after submitting the form. Common values:

• _self (default)
• _blank (new tab)

<form action="/submit-data" target="_blank">
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

Output: Opens the response in a new tab.

7. name

Identifies the form, allowing easy access via JavaScript.

<form name="userForm">
  <input type="text" name="username">
</form>
<script>
  console.log(document.userForm);
</script>

Output: Logs the form element.

8. id

Uniquely identifies the form in the document.

<form id="loginForm">
  <input type="text" name="username">
</form>
<script>
  const form = document.getElementById('loginForm');
  console.log(form);
</script>

Output: Logs the form element.

 

Summary

HTML form attributes control form behavior, interaction, and submission. Key attributes include action, method, enctype, and autocomplete, among others. Using these attributes effectively enhances form functionality and user experience.