HTML <form> Tag

The <form> tag in HTML is a container element that encapsulates all user input fields within a web form. It acts as a wrapper for elements like text inputs, checkboxes, radio buttons, and submit buttons, and defines how the collected data should be transmitted to a server. Essentially, the <form> tag is indispensable for creating interactive and user-friendly websites.

Syntax

<form action="url" method="get|post" accept-charset="character_set" autocomplete="on|off" enctype="mime_type" name="form_name" novalidate target="_blank|_self|_parent|_top">
  <!-- Input elements go here -->
</form>

Attributes

Example

<form action="/submit-form" method="post">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="Submit">
</form>

More Examples

Basic Form with GET Method

The GET method is suitable for simple data submissions and the data is appended to the URL. It's less secure for sensitive information.

<form action="/search" method="get">
  <label for="query">Search:</label>
  <input type="text" id="query" name="q">
  <input type="submit" value="Search">
</form>

Form with File Upload

Using enctype="multipart/form-data" is essential for enabling file uploads.

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="file">Upload File:</label>
  <input type="file" id="file" name="userfile">
  <input type="submit" value="Upload">
</form>

Form with Autocomplete and No Validation

Here's how to control autocomplete and disable browser-based validation.

<form action="/submit" method="post" autocomplete="off" novalidate>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <input type="submit" value="Submit">
</form>

Form with Target Attribute

Using the target attribute, we can specify how the response is displayed.

<form action="/profile" method="get" target="_blank">
    <label for="user_id">User ID:</label>
    <input type="text" id="user_id" name="id">
    <input type="submit" value="View Profile">
</form>

Form with different character set

Using the accept-charset to define the character set.

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

Browser Support

The <form> tag is supported by all modern browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• Always use the method="post" attribute for forms that handle sensitive data like passwords or personal information.
• Utilize the name attribute for form elements to retrieve their values on the server-side, or in JavaScript.
• Use the label tag to associate labels with form controls for improved accessibility.
• For file uploads, be sure to set the enctype attribute to "multipart/form-data".
• Consider server-side and client-side validation to ensure data integrity.
• Use novalidate attribute to bypass browser validation for custom validation.
• The autocomplete attribute helps users fill out form fields faster, but be mindful of its use, particularly for sensitive information.
• Keep your forms as straightforward as possible to reduce user friction and optimize the user experience.
• When submitting data via GET method, data will be displayed in the URL, so be mindful not to send any sensitive information
• Ensure all forms are tested across different browsers to maintain consistency and usability.
• The action attribute cannot be empty, the browser will default to the current URL.