HTML Form Attributes

HTML forms use various attributes to control their behavior and functionality. Here are the most important form attributes with examples:

1. action Attribute

Specifies where to send the form data when submitted.

<form action="/submit-form.php">
  <!-- form elements -->
</form>

2. method Attribute

Defines how to send form data (GET or POST).

<form action="/login" method="post">
  <!-- form elements -->
</form>

3. target Attribute

Specifies where to display the response after submission.

<form action="/search" target="_blank">
  <!-- opens response in new tab -->
</form>

4. autocomplete Attribute

Controls whether the browser should autocomplete form fields.

<form autocomplete="off">
  <!-- browser won't suggest autocomplete values -->
</form>

5. novalidate Attribute

Prevents form validation when submitted.

<form novalidate>
  <!-- HTML5 validation won't occur -->
</form>

6. enctype Attribute

Specifies how form data should be encoded before sending (important for file uploads).

<form enctype="multipart/form-data">
  <input type="file" name="myfile">
</form>

7. name Attribute

Names the form for JavaScript reference.

<form name="contactForm">
  <!-- can be referenced as document.contactForm -->
</form>

8. id Attribute

Provides a unique identifier for the form.

<form id="registration-form">
  <!-- can be referenced with getElementById -->
</form>

9. class Attribute

Assigns one or more class names to the form for CSS styling.

<form class="styled-form dark-theme">
  <!-- can be styled with CSS -->
</form>

Complete Example

<form action="/process-order" 
      method="post" 
      enctype="multipart/form-data"
      target="_blank"
      name="orderForm"
      id="order-form"
      class="main-form"
      autocomplete="on"
      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="file">Upload File:</label>
  <input type="file" id="file" name="file">
  
  <input type="submit" value="Submit Order">
</form>

These attributes give you control over how the form behaves when submitted, how data is sent, and how the form interacts with the user and server.