Open navigation menu

HTML5 Input Types and Attributes

Showcases all HTML5 input types with appropriate attributes for data collection, validation, and enhanced user experience across different devices.

HtmlForm Validation

Code

snippet
<form>
  <label>Text: <input type="text" placeholder="Enter text"></label>

  <label>Email: <input type="email" placeholder="[email protected]"></label>

  <label>URL: <input type="url" placeholder="https://example.com"></label>

  <label>Tel: <input type="tel" placeholder="555-123-4567"></label>

  <label>Number: <input type="number" min="0" max="100" step="5" value="50"></label>

  <label>Range: <input type="range" min="0" max="100" value="50"></label>

  <label>Color: <input type="color" value="#ff0000"></label>

  <label>Date: <input type="date" min="2025-01-01" max="2025-12-31"></label>

  <label>Time: <input type="time" value="14:30"></label>

  <label>Datetime: <input type="datetime-local"></label>

  <label>Month: <input type="month"></label>

  <label>Week: <input type="week"></label>

  <label>Search: <input type="search" placeholder="Search..."></label>

  <label>File: <input type="file" accept="image/*" multiple></label>

  <fieldset>
    <legend>Radio Group</legend>
    <label><input type="radio" name="size" value="s"> Small</label>
    <label><input type="radio" name="size" value="m" checked> Medium</label>
    <label><input type="radio" name="size" value="l"> Large</label>
  </fieldset>

  <label>Checkbox: <input type="checkbox" checked></label>

  <label>Password: <input type="password" minlength="8"></label>

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

Related Examples