Path // www.yourhtmlsource.com → Reference → <form>

<form>

by Ross Shannon

The <form> element is a container for interactive controls that allow users to submit information to a web server. It is the foundation of user interaction on the web, enabling features like login pages, contact forms, search boxes, and e-commerce checkouts. The form element defines how data is collected and where it is sent for processing.

Clock This page was last updated on 2025-11-17


Syntax

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

The element requires both opening and closing tags. All form controls (inputs, buttons, selects, etc.) should be placed between these tags to be included in form submission.

Attributes

  • action - The URL where form data will be sent for processing. If omitted, the form submits to the current page URL.
  • method - The HTTP method for submission:
    • get - Appends data to URL as query string (default). Use for non-sensitive searches and filters.
    • post - Sends data in request body. Use for sensitive data, file uploads, or large amounts of data.
  • enctype - How form data is encoded (for POST method):
    • application/x-www-form-urlencoded - Default encoding
    • multipart/form-data - Required for file uploads
    • text/plain - Plain text (rarely used)
  • name - Name of the form for scripting purposes
  • target - Where to display the response (_self, _blank, _parent, _top)
  • autocomplete - Enable or disable browser autocomplete ("on" or "off")
  • novalidate - Disables built-in browser validation on submission
  • accept-charset - Character encodings for form submission (default: page encoding)
  • rel - Relationship between current document and linked resource
  • aria-labelledby - References element that labels the form for accessibility
  • aria-describedby - References element that describes the form

Examples

Basic Contact Form

<form action="/contact" method="post">
  <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="message">Message:</label>
  <textarea id="message" name="message" required></textarea>
  
  <button type="submit">Send Message</button>
</form>

Search Form with GET Method

<form action="/search" method="get" role="search">
  <label for="q">Search:</label>
  <input type="search" id="q" name="q" placeholder="Enter keywords...">
  <button type="submit">Search</button>
</form>

File Upload Form

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="file">Choose file:</label>
  <input type="file" id="file" name="file" accept=".pdf,.doc,.docx">
  <button type="submit">Upload</button>
</form>

When to Use

Use the <form> element when:

  • Collecting user input for server processing
  • Creating login or registration pages
  • Building search functionality
  • Implementing contact forms or feedback systems
  • Processing e-commerce transactions
  • Any scenario requiring data submission

Accessibility and best practices:

  • Always use <label> elements with form controls for accessibility
  • Group related controls with <fieldset> and <legend>
  • Provide clear error messages and validation feedback
  • Use appropriate input types (email, tel, url) for better mobile experience
  • Add required attribute for mandatory fields
  • Consider using aria-describedby for additional instructions
  • Use autocomplete attributes to help users fill forms faster
  • Test forms with keyboard navigation and screen readers