<form>

Definition and Usage

The <form> tag is used to create an HTML form for user input. Forms are essential for collecting data from users, such as login credentials, contact information, search queries, and much more.

An HTML form can contain various input elements like text fields, checkboxes, radio buttons, submit buttons, and more. The form data is typically sent to a server for processing when the user submits it.

Attributes

Examples

Basic Form

Simple form with text input and submit button:

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

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

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

Form with POST Method

Using POST method for sensitive data:

<form action="/login" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required><br><br>

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

  <button type="submit">Login</button>
</form>

File Upload Form

Form for uploading files with correct enctype:

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="file">Choose file:</label>
  <input type="file" id="file" name="file"><br><br>

  <label for="description">Description:</label>
  <textarea id="description" name="description"></textarea><br><br>

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

Form with Validation

HTML5 form with validation attributes:

<form action="/register" method="post">
  <label for="username">Username (3-20 characters):</label>
  <input type="text" id="username" name="username"
         minlength="3" maxlength="20" required><br><br>

  <label for="age">Age (18-100):</label>
  <input type="number" id="age" name="age"
         min="18" max="100" required><br><br>

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

  <button type="submit">Register</button>
</form>

Form with Autocomplete Off

Disable autocomplete for sensitive forms:

<form action="/payment" method="post" autocomplete="off">
  <label for="cardnumber">Card Number:</label>
  <input type="text" id="cardnumber" name="cardnumber"><br><br>

  <label for="cvv">CVV:</label>
  <input type="text" id="cvv" name="cvv"><br><br>

  <button type="submit">Pay Now</button>
</form>

Form with Fieldsets

Organizing complex forms with fieldsets:

<form action="/submit" method="post">
  <fieldset>
    <legend>Personal Information</legend>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname"><br><br>

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

  <fieldset>
    <legend>Contact Details</legend>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>

    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone"><br><br>
  </fieldset>

  <button type="submit">Submit</button>
</form>

GET vs POST Example

Comparison of GET and POST methods:

<!-- GET: Data visible in URL, used for searches -->
<form action="/search" method="get">
  <label for="query">Search:</label>
  <input type="text" id="query" name="q">
  <button type="submit">Search</button>
</form>
<!-- URL will be: /search?q=searchterm -->

<!-- POST: Data hidden, used for sensitive information -->
<form action="/login" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>

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

  <button type="submit">Login</button>
</form>
<!-- Data sent in request body, not visible in URL -->

Form Methods Comparison (GET vs POST)

Form Attributes Explained

action Attribute

The action attribute specifies the URL where the form data will be sent:

• Absolute URL: action="https://example.com/submit"
• Relative URL: action="/submit-form"
• Same page: action="" (empty or omitted)

enctype Attribute

Specifies how form data should be encoded (only for POST method):

• application/x-www-form-urlencoded - Default, spaces become + and special characters are encoded
• multipart/form-data - Required for file uploads, no encoding of characters
• text/plain - Spaces become + but no special character encoding

target Attribute

Specifies where to display the form response:

• _self - Default, same window/tab
• _blank - New window/tab
• _parent - Parent frame
• _top - Full body of window

Form Validation (HTML5)

HTML5 provides built-in form validation attributes:

• required - Field must be filled out
• pattern - Field must match a regular expression
• minlength / maxlength - Minimum/maximum text length
• min / max - Minimum/maximum value for numbers
• type - Validates based on input type (email, url, number, etc.)
• novalidate - Disables validation for entire form
• formnovalidate - Disables validation for specific submit button

<form action="/submit" method="post">
  <!-- Required field -->
  <input type="text" name="name" required>

  <!-- Pattern validation -->
  <input type="text" name="zipcode" pattern="[0-9]{5}"
         title="5-digit zip code">

  <!-- Length validation -->
  <input type="text" name="username" minlength="3" maxlength="20">

  <!-- Number range -->
  <input type="number" name="age" min="18" max="100">

  <!-- Email validation -->
  <input type="email" name="email" required>

  <button type="submit">Submit</button>
</form>

Best Practices for Forms

• Always use <label> elements with proper for attributes for accessibility
• Use appropriate input types (email, tel, number, date, etc.) for better user experience
• Use POST method for sensitive data (passwords, personal information)
• Use GET method for search forms and non-sensitive queries
• Always validate data on the server-side, even with HTML5 validation
• Set enctype="multipart/form-data" when uploading files
• Use autocomplete="off" for sensitive fields like credit card numbers
• Provide clear error messages and visual feedback
• Use <fieldset> and <legend> to group related fields
• Include CSRF tokens for security in production applications

Accessibility for Forms

• Always associate labels with inputs using the for attribute
• Use aria-label or aria-labelledby when visible labels aren't possible
• Provide clear instructions and error messages
• Use aria-required="true" for required fields (in addition to required)
• Use aria-invalid="true" to mark invalid fields
• Ensure sufficient color contrast for text and error messages
• Make forms keyboard navigable (proper tab order)
• Use <fieldset> and <legend> for grouping related controls
• Provide visible focus indicators for form controls
• Use descriptive button text instead of generic "Submit" or "Click Here"

Try it Yourself

Related Tags

• <input>

  Defines an input control

• <label>

  Defines a label for input

• <button>

  Defines a clickable button

• <fieldset>

  Groups form elements

• <textarea>

  Defines multiline input

• <select>

  Defines a dropdown list