Learn the Front-end Beta Search

<input>

Draft

Definition

The <input> HTML element is used to create interactive controls for web-based forms to accept data from the user. It’s one of the most versatile and commonly used form elements, supporting various input types including text, email, password, number, date, file uploads, and more. The <input> element provides a wide range of functionality for collecting different types of user data.

Syntax

<input type="text" name="field-name" id="field-id" />

Attributes

Essential Attributes

<input type="text" <!-- Input type (text, email, password, etc.) -- />
name="fieldName"
<!-- Name for form submission -->
id="fieldId"
<!-- Unique identifier -->
value="default"
<!-- Default value -->
placeholder="Hint text"
<!-- Placeholder text -->
required
<!-- Required field validation -->
disabled
<!-- Disable the input -->
readonly
<!-- Read-only input -->
maxlength="50"
<!-- Maximum character length -->
minlength="3"
<!-- Minimum character length -->
pattern="[A-Za-z]+"
<!-- Input pattern validation -->
autocomplete="on"
<!-- Autocomplete behavior -->
autofocus>
<!-- Auto-focus on page load -->

Input Types

The type attribute determines the input behavior and validation:

<!-- Text inputs -->
<input type="text" placeholder="Enter text" />
<input type="email" placeholder="Enter email" />
<input type="password" placeholder="Enter password" />
<input type="search" placeholder="Search..." />
<input type="tel" placeholder="Enter phone number" />
<input type="url" placeholder="Enter URL" />

<!-- Numeric inputs -->
<input type="number" min="0" max="100" step="1" />
<input type="range" min="0" max="100" value="50" />

<!-- Date and time inputs -->
<input type="date" />
<input type="time" />
<input type="datetime-local" />
<input type="month" />
<input type="week" />

<!-- File inputs -->
<input type="file" accept=".jpg,.png,.pdf" multiple />

<!-- Button inputs -->
<input type="button" value="Click me" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
<input type="image" src="button.png" alt="Submit" />

<!-- Special inputs -->
<input type="hidden" value="secret-data" />
<input type="color" value="#ff0000" />

Examples

Basic Text Inputs

HTML

Basic Text Inputs:

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

  <div class="space-y-4">
    <div>
      <label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
      <input type="text" id="username" name="username" placeholder="Enter your username"
             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" placeholder="Enter your 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="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
      <input type="password" id="password" name="password" placeholder="Enter your password" 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>

Numeric and Range Inputs

HTML

Numeric and Range Inputs:

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Numeric and Range Inputs:</h3>

  <div class="space-y-4">
    <div>
      <label for="age" class="block text-sm font-medium text-gray-700 mb-1">Age</label>
      <input type="number" id="age" name="age" min="18" max="120" step="1" placeholder="Enter your age"
             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="rating" class="block text-sm font-medium text-gray-700 mb-1">Rating: <span id="rating-value">5</span>/10</label>
      <input type="range" id="rating" name="rating" min="1" max="10" value="5" step="1"
             class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
    </div>

    <div>
      <label for="price" class="block text-sm font-medium text-gray-700 mb-1">Price ($)</label>
      <input type="number" id="price" name="price" min="0" step="0.01" placeholder="0.00"
             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>

Date and Time Inputs

HTML

Date and Time Inputs:

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Date and Time Inputs:</h3>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div>
      <label for="birthdate" class="block text-sm font-medium text-gray-700 mb-1">Birth Date</label>
      <input type="date" id="birthdate" name="birthdate"
             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="meeting-time" class="block text-sm font-medium text-gray-700 mb-1">Meeting Time</label>
      <input type="time" id="meeting-time" name="meetingTime"
             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="deadline" class="block text-sm font-medium text-gray-700 mb-1">Deadline</label>
      <input type="datetime-local" id="deadline" name="deadline"
             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="month" class="block text-sm font-medium text-gray-700 mb-1">Month</label>
      <input type="month" id="month" name="month"
             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>

File Upload Inputs

HTML

File Upload Inputs:

Accepted formats: JPG, PNG, PDF

You can select multiple image files

Camera capture enabled for mobile devices

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

  <div class="space-y-4">
    <div>
      <label for="single-file" class="block text-sm font-medium text-gray-700 mb-1">Single File Upload</label>
      <input type="file" id="single-file" name="singleFile" accept=".jpg,.png,.pdf"
             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</p>
    </div>

    <div>
      <label for="multiple-files" class="block text-sm font-medium text-gray-700 mb-1">Multiple Files Upload</label>
      <input type="file" id="multiple-files" name="multipleFiles" multiple accept=".jpg,.png,.gif"
             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">You can select multiple image files</p>
    </div>

    <div>
      <label for="image-only" class="block text-sm font-medium text-gray-700 mb-1">Image Upload</label>
      <input type="file" id="image-only" name="imageOnly" accept="image/*" capture="camera"
             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">Camera capture enabled for mobile devices</p>
    </div>

  </div>
</div>

Special Input Types

HTML

Special Input Types:

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

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div>
      <label for="color-picker" class="block text-sm font-medium text-gray-700 mb-1">Color Picker</label>
      <input type="color" id="color-picker" name="color" value="#3b82f6"
             class="w-full h-12 border border-gray-300 rounded-md cursor-pointer">
    </div>

    <div>
      <label for="search-input" class="block text-sm font-medium text-gray-700 mb-1">Search</label>
      <input type="search" id="search-input" name="search" placeholder="Search for anything..."
             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" placeholder="(555) 123-4567" pattern="[\d\s\(\)\-\+]+"
             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="website" class="block text-sm font-medium text-gray-700 mb-1">Website URL</label>
      <input type="url" id="website" name="website" placeholder="https://example.com"
             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>

Input with Validation

HTML

Input with Validation:

3-20 characters, letters, numbers, and underscores only

5-digit ZIP code format

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

  <div class="space-y-4">
    <div>
      <label for="username-valid" class="block text-sm font-medium text-gray-700 mb-1">Username (3-20 characters)</label>
      <input type="text" id="username-valid" name="usernameValid" minlength="3" maxlength="20"
             pattern="[a-zA-Z0-9_]+" title="Only letters, numbers, and underscores allowed" required
             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">3-20 characters, letters, numbers, and underscores only</p>
    </div>

    <div>
      <label for="email-valid" class="block text-sm font-medium text-gray-700 mb-1">Email (with pattern)</label>
      <input type="email" id="email-valid" name="emailValid"
             pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" 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-code" class="block text-sm font-medium text-gray-700 mb-1">ZIP Code</label>
      <input type="text" id="zip-code" name="zipCode" pattern="[0-9]{5}" title="5-digit ZIP code" required
             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">5-digit ZIP code format</p>
    </div>

  </div>
</div>

Browser Support

The <input> element is supported in all browsers, but specific input types have varying support:

  • Basic types (text, password, submit, reset, button): Full support in all browsers
  • HTML5 types (email, url, number, date, time, color): Full support in modern browsers
  • File inputs: Full support in all browsers
  • Pattern validation: Full support in modern browsers

Best Practices

  1. Always use labels: Provide descriptive labels for all input fields using the for attribute
  2. Input validation: Use HTML5 validation attributes and provide helpful error messages
  3. Accessibility: Ensure inputs are keyboard accessible and work with screen readers
  4. Mobile optimization: Use appropriate input types for mobile devices (e.g., tel for phone numbers)
  5. Security: Validate all input on the server-side, never trust client-side validation alone
  6. User experience: Provide clear placeholders and help text for complex inputs

Common Use Cases

  • User registration: Collecting user information for account creation
  • Contact forms: Gathering contact information and messages
  • Search functionality: Implementing search bars and filters
  • Data entry: Collecting various types of data from users
  • File uploads: Allowing users to upload documents and images
  • Settings forms: Configuring user preferences and options
  • E-commerce: Product search, filtering, and checkout forms
  • <label>: Labels for form controls
  • <form>: Container for form elements
  • <fieldset>: Groups related form controls
  • <legend>: Caption for fieldset groups
  • <textarea>: Multi-line text input
  • <select>: Dropdown selection lists
  • <button>: Form submission and action buttons

Related posts