Learn the Front-end Beta Search

<form>

Draft

Definition

The <form> HTML element represents a document section containing interactive controls for submitting information to a web server. Forms are essential for user interaction on the web, allowing users to input data, make selections, and submit information. The <form> element provides structure and functionality for collecting user input through various form controls like text inputs, checkboxes, radio buttons, and more.

Syntax

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

Attributes

Essential Attributes

<form action="/api/submit" <!-- URL where form data is sent -->
  method="post"
  <!-- HTTP method: get, post, put, delete -->
  enctype="multipart/form-data"
  <!-- For file uploads -->
  target="_blank"
  <!-- Where to display response -->
  novalidate>
  <!-- Disable browser validation -->
  <!-- Form content -->
</form>

Accessibility Attributes

<form aria-label="Contact form" aria-describedby="form-help">
  <!-- Form content -->
</form>

Examples

Basic Contact Form

HTML

Basic Contact Form:

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Basic Contact Form:</h3>

  <form class="space-y-4">
    <div>
      <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
      <input type="text" id="name" name="name" required
             class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>

    <div>
      <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
      <input type="email" id="email" name="email" required
             class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>

    <div>
      <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
      <textarea id="message" name="message" rows="4" required
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
    </div>

    <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors">
      Send Message
    </button>

  </form>
</div>

Registration Form with Validation

HTML

Registration Form:

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Registration Form:</h3>

  <form class="space-y-4" novalidate>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
        <input type="text" id="first-name" name="firstName" required
               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      </div>

      <div>
        <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
        <input type="text" id="last-name" name="lastName" required
               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      </div>
    </div>

    <div>
      <label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
      <input type="text" id="username" name="username" required minlength="3"
             class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>

    <div>
      <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
      <input type="password" id="password" name="password" required minlength="8"
             class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>

    <div>
      <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
      <input type="password" id="confirm-password" name="confirmPassword" required
             class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>

    <div class="flex items-center">
      <input type="checkbox" id="terms" name="terms" required
             class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
      <label for="terms" class="ml-2 block text-sm text-gray-700">
        I agree to the <a href="#" class="text-blue-600 hover:underline">Terms and Conditions</a>
      </label>
    </div>

    <button type="submit" class="w-full bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600 transition-colors">
      Create Account
    </button>

  </form>
</div>

File Upload Form

HTML

File Upload Form:

Accepted formats: JPG, PNG, PDF, DOC, DOCX

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">File Upload Form:</h3>

  <form class="space-y-4" enctype="multipart/form-data">
    <div>
      <label for="file-upload" class="block text-sm font-medium text-gray-700 mb-1">Choose Files</label>
      <input type="file" id="file-upload" name="files" multiple accept=".jpg,.png,.pdf,.doc,.docx"
             class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      <p class="text-xs text-gray-500 mt-1">Accepted formats: JPG, PNG, PDF, DOC, DOCX</p>
    </div>

    <div>
      <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
      <textarea id="description" name="description" rows="3"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
    </div>

    <button type="submit" class="w-full bg-purple-500 text-white py-2 px-4 rounded-md hover:bg-purple-600 transition-colors">
      Upload Files
    </button>

  </form>
</div>

Search Form

HTML

Search Form:

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Search Form:</h3>

  <form class="flex space-x-2">
    <div class="flex-1">
      <label for="search" class="sr-only">Search</label>
      <input type="search" id="search" name="q" placeholder="Search for anything..."
             class="w-full px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>

    <div class="flex space-x-2">
      <select name="category" class="px-3 py-2 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
        <option value="">All Categories</option>
        <option value="electronics">Electronics</option>
        <option value="clothing">Clothing</option>
        <option value="books">Books</option>
        <option value="home">Home & Garden</option>
      </select>

      <button type="submit" class="px-6 py-2 bg-blue-500 text-white rounded-r-md hover:bg-blue-600 transition-colors">
        Search
      </button>
    </div>

  </form>
</div>

Multi-step Form

HTML

Multi-step Form:

Step 1: Personal Information

Step 2: Address

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Multi-step Form:</h3>

  <form class="space-y-4">
    <!-- Step 1: Personal Information -->
    <div class="bg-white p-4 rounded border">
      <h4 class="font-medium mb-3 text-blue-600">Step 1: Personal Information</h4>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
          <input type="text" id="full-name" name="fullName" required
                 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>

        <div>
          <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
          <input type="tel" id="phone" name="phone"
                 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
      </div>
    </div>

    <!-- Step 2: Address -->
    <div class="bg-white p-4 rounded border">
      <h4 class="font-medium mb-3 text-green-600">Step 2: Address</h4>

      <div class="space-y-4">
        <div>
          <label for="street" class="block text-sm font-medium text-gray-700 mb-1">Street Address</label>
          <input type="text" id="street" name="street" required
                 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label for="city" class="block text-sm font-medium text-gray-700 mb-1">City</label>
            <input type="text" id="city" name="city" required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
          </div>

          <div>
            <label for="state" class="block text-sm font-medium text-gray-700 mb-1">State</label>
            <input type="text" id="state" name="state" required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
          </div>

          <div>
            <label for="zip" class="block text-sm font-medium text-gray-700 mb-1">ZIP Code</label>
            <input type="text" id="zip" name="zip" required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
          </div>
        </div>
      </div>
    </div>

    <div class="flex space-x-3">
      <button type="button" class="px-6 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50">
        Previous
      </button>
      <button type="submit" class="px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
        Submit
      </button>
    </div>

  </form>
</div>

Browser Support

The <form> element is supported in all browsers and has been a standard HTML element since HTML 2.0.

Best Practices

  1. Accessibility: Always provide proper labels for form controls using the for attribute
  2. Validation: Use HTML5 validation attributes and provide helpful error messages
  3. Security: Implement proper server-side validation and CSRF protection
  4. User experience: Provide clear feedback and progress indicators for long forms
  5. Mobile optimization: Ensure forms are easy to use on mobile devices
  6. Semantic structure: Use appropriate form elements and grouping for better organization

Common Use Cases

  • User registration and login: Account creation and authentication
  • Contact forms: Customer support and inquiries
  • Data collection: Surveys, polls, and feedback forms
  • File uploads: Document and media file submissions
  • Search functionality: Website and content search
  • E-commerce: Product orders and checkout processes
  • Settings and preferences: User account configuration
  • <input>: Various types of input controls
  • <textarea>: Multi-line text input
  • <select>: Dropdown selection lists
  • <button>: Form submission and action buttons
  • <label>: Labels for form controls
  • <fieldset>: Groups related form controls
  • <legend>: Caption for fieldset groups

Related posts