<input> — The Form Input Element

Basic Syntax

<input type="text" id="name" name="name" placeholder="Your name">

Input is a void element — no closing tag. The type attribute determines what kind of control it becomes.

The Three Essential Inputs

<label for="name">Full Name</label>
<input type="text" id="name" name="name"
       placeholder="Jane Doe" required
       autocomplete="name">

<label for="email">Email</label>
<input type="email" id="email" name="email"
       placeholder="jane@example.com" required
       autocomplete="email">

<label for="password">Password</label>
<input type="password" id="password" name="password"
       minlength="8" required
       autocomplete="new-password">

Notice how each input has: type, id, name, and matches a <label> via the for attribute.

Validation Attributes

<!-- Required -->
<input type="text" required>

<!-- Length -->
<input type="text" minlength="3" maxlength="20">

<!-- Numeric range -->
<input type="number" min="18" max="120" step="1">

<!-- Regex pattern -->
<input type="text" pattern="[0-9]{3}-[0-9]{4}"
       title="Format: 123-4567">

<!-- Custom error message -->
<input type="email" required
       title="Please enter a valid email">

All of these work without JavaScript. The browser shows native error messages and blocks form submission.

Checkbox vs Radio

<!-- Checkboxes: multiple selections -->
<label><input type="checkbox" name="features" value="wifi"> WiFi</label>
<label><input type="checkbox" name="features" value="parking"> Parking</label>
<label><input type="checkbox" name="features" value="pool"> Pool</label>

<!-- Radio buttons: single selection -->
<label><input type="radio" name="plan" value="basic"> Basic</label>
<label><input type="radio" name="plan" value="pro" checked> Pro</label>
<label><input type="radio" name="plan" value="enterprise"> Enterprise</label>

Key difference: checkboxes are independent; radio buttons with the same name form a group where only one can be selected.

File Upload with Filter

<input type="file" id="avatar" name="avatar"
       accept="image/png, image/jpeg, image/webp">

<!-- Multiple files -->
<input type="file" id="docs" name="docs"
       accept=".pdf,.doc,.docx" multiple>

<!-- Camera capture on mobile -->
<input type="file" accept="image/*" capture="environment">

Date and Number Pickers

<!-- Date -->
<input type="date" id="birthday" name="birthday"
       min="1900-01-01" max="2026-12-31">

<!-- Time -->
<input type="time" id="appt" name="appt"
       min="08:00" max="18:00" step="900">

<!-- Range slider -->
<input type="range" id="volume" name="volume"
       min="0" max="100" step="5" value="50">

<!-- Color picker -->
<input type="color" id="brand" name="brand" value="#3b82f6">

Hidden Input

Send data with the form that the user doesn't see.

<input type="hidden" name="user_id" value="12345">
<input type="hidden" name="referrer" value="google">
<input type="hidden" name="csrf_token" value="abc123">