HTML

All Standard Input Types

admin by @admin ADMIN
21h ago
May 31, 2026
Public
0 0 up · 0 down Sign in to vote
HTML5 input types each have built-in validation, on-screen keyboards (mobile), and pickers. Use them — `<input type="number">` beats `<input type="text">` + JS validation every time.
HTML
Raw
<form>
    <!-- Text variations -->
    <input type="text"     name="name"   placeholder="Full name">
    <input type="email"    name="email"  placeholder="you@example.com">
    <input type="url"      name="url"    placeholder="https://...">
    <input type="search"   name="q"      placeholder="Search…">
    <input type="tel"      name="phone"  placeholder="+1 555 0100">

    <!-- Number + range -->
    <input type="number"   name="qty"    min="0"  max="100"  step="1"  value="1">
    <input type="range"    name="vol"    min="0"  max="100"  step="5"  value="50">

    <!-- Date / time -->
    <input type="date"           name="birthday">
    <input type="time"           name="meeting_at">
    <input type="datetime-local" name="event_at">
    <input type="month"          name="billing_month">
    <input type="week"           name="report_week">

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

    <!-- Secret -->
    <input type="password" name="passcode"  autocomplete="new-password">

    <!-- Files (single, multiple, restricted) -->
    <input type="file"     name="avatar"  accept="image/*">
    <input type="file"     name="docs"    accept=".pdf,.doc,.docx" multiple>

    <!-- Hidden -->
    <input type="hidden"   name="csrf"    value="abc...">

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

Save your own code snippets

Create a free account and build your private vault. Share publicly whenever you want.