HTML5 Input Types

New input types, validation attributes, and enhanced form controls.

Overview

HTML5 introduced new input types for better user experience.

Key Concepts

• Email/URL/Phone — Built-in validation
• Date/Time — Native date pickers
• Range — Slider controls
• Color — Color picker
• Number — Numeric input with spinners

Code Examples

<form>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" required>
  </div>
  
  <div>
    <label for="url">Website:</label>
    <input type="url" id="url">
  </div>
  
  <div>
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
  </div>
  
  <div>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" min="1900-01-01" max="2024-12-31">
  </div>
  
  <div>
    <label for="time">Time:</label>
    <input type="time" id="time" min="09:00" max="17:00">
  </div>
  
  <div>
    <label for="datetime">DateTime:</label>
    <input type="datetime-local" id="datetime">
  </div>
  
  <div>
    <label for="range">Range:</label>
    <input type="range" id="range" min="0" max="100" value="50">
    <output id="rangeOutput">50</output>
  </div>
  
  <div>
    <label for="color">Color:</label>
    <input type="color" id="color" value="#007bff">
  </div>
  
  <div>
    <label for="number">Number:</label>
    <input type="number" id="number" min="0" max="100" step="5">
  </div>
  
  <div>
    <label for="search">Search:</label>
    <input type="search" id="search" placeholder="Search...">
  </div>
  
  <div>
    <label for="file">File:</label>
    <input type="file" id="file" accept="image/*" multiple>
  </div>
  
  <div>
    <output id="fileOutput"></output>
  </div>
  
  <button type="submit">Submit</button>
</form>

<script>
// Range slider output
const range = document.getElementById('range');
const rangeOutput = document.getElementById('rangeOutput');
range.addEventListener('input', () => {
  rangeOutput.textContent = range.value;
});

// File input preview
const fileInput = document.getElementById('file');
const fileOutput = document.getElementById('fileOutput');
fileInput.addEventListener('change', (e) => {
  Array.from(e.target.files).forEach(file => {
    const reader = new FileReader();
    reader.onload = (event) => {
      fileOutput.innerHTML += `<img src="${event.target.result}" width="100">`;
    };
    reader.readAsDataURL(file);
  });
});
</script>

Practice

Build a form using all HTML5 input types with validation.