HTML <form> Tag

What You’ll Learn

By the end of this tutorial, you’ll build interactive forms that collect and submit user input with semantic HTML.

The HTML <form> tag is a cornerstone element in web development, empowering developers to create interactive and user-friendly web forms. This guide covers syntax, attributes, accessibility, and best practices for beginners and web developers alike.

What Is the <form> Tag?

The form element (<form>) encapsulates interactive controls for collecting user input. It provides the structure for input fields, textareas, selects, buttons, and other elements, and defines where and how data is sent when the user submits the form.

Forms facilitate communication between users and web servers. You can also handle submission with JavaScript using the submit event, but the semantic form element remains the foundation.

📝 Syntax

Encapsulate form elements within opening and closing <form> tags:

<form action="/submit" method="post">
  <!-- Your form elements go here -->
</form>

Syntax Rules

• Place all related controls inside one form element.
• Set action to the URL that processes the data.
• Use method="post" for sensitive or large submissions; get for searches.
• Include a submit control (button type="submit" or input type="submit").

⚖️ <form> vs <div>

Both can wrap inputs visually, but only form handles submission semantics:

⚖️ method="get" vs method="post"

Choose the HTTP method based on what the form does:

Examples Gallery

Contact forms, text inputs, textareas, and submit buttons with copy-ready code and live previews.

<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">

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

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
</form>

<form>
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea>
</form>

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

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

♿ Accessibility

Accessible forms work for keyboard and screen reader users:

• Label every field — use label for="id" matching the control’s id.
• Use meaningful names — the name attribute identifies data on submit.
• Group related fields — use fieldset and legend for sections.
• Validate on server — never rely on client validation alone for security.

💡 Best Practices