Input Types & Validation

HTML5 provides powerful input types and built-in validation to create user-friendly forms with better data quality and user experience.

Email Input Type

<form>
  <label for="email">Email Address:</label>
  <input 
    type="email" 
    id="email" 
    name="email" 
    required 
    placeholder="user@example.com">
  <button type="submit">Submit</button>
</form>
→
[Email input with automatic @ validation and mobile keyboard]

Email input benefits:

  • Automatic email format validation
  • Specialized mobile keyboard with @ symbol
  • Browser shows helpful error messages
  • Prevents form submission with invalid emails

Date Input Type

<form>
  <label for="birthdate">Birth Date:</label>
  <input 
    type="date" 
    id="birthdate" 
    name="birthdate" 
    min="1900-01-01" 
    max="2024-12-31" 
    required>
  <button type="submit">Submit</button>
</form>
→
[Date picker with calendar widget and range validation]

Date input attributes:

  • min - Earliest acceptable date
  • max - Latest acceptable date
  • value - Default date (YYYY-MM-DD format)
  • Provides native date picker in most browsers

More Input Types

<!-- Number input with range -->
<input type="number" min="1" max="100" step="5">

<!-- Phone number -->
<input type="tel" placeholder="(555) 123-4567">

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

<!-- Time input -->
<input type="time" min="09:00" max="17:00">

<!-- Range slider -->
<input type="range" min="0" max="100" value="50">
→
[Specialized inputs with appropriate keyboards and validation]

Validation Attributes

<form>
  <!-- Required field -->
  <input type="text" required placeholder="Required field">

  <!-- Pattern validation -->
  <input 
    type="text" 
    pattern="[A-Z]{3}[0-9]{3}" 
    title="3 uppercase letters followed by 3 numbers"
    placeholder="ABC123">

  <!-- Length validation -->
  <input 
    type="password" 
    minlength="8" 
    maxlength="20" 
    required>
</form>
→
[Form validates before submission with helpful messages]

Validation attributes:

  • required - Field must be filled
  • pattern - Regular expression validation
  • minlength/maxlength - Text length limits
  • min/max - Numeric/date range limits

Custom Error Messages

<form>
  <input 
    type="email" 
    required 
    title="Please enter a valid email address">

  <input 
    type="text" 
    pattern="[0-9]{5}" 
    title="Please enter exactly 5 digits"
    placeholder="12345">

  <button type="submit">Submit</button>
</form>
→
[Custom tooltips appear on validation errors]

Common Errors

<!-- Wrong: Validation without form -->
<input type="email" required> <!-- No form wrapper -->

<!-- Wrong: Invalid date format -->
<input type="date" value="12/25/2024"> <!-- Use YYYY-MM-DD -->

<!-- Wrong: Pattern without title -->
<input pattern="[0-9]+" > <!-- No user guidance -->

<!-- Correct: Proper validation setup -->
<form>
  <input type="date" value="2024-12-25" required>
</form>

Practical Use: Registration Form

<form class="registration">
  <h2>Event Registration</h2>
  
  <label for="email">Email Address:</label>
  <input type="email" id="email" name="email" required
         title="Please enter a valid email address">
  
  <label for="phone">Phone Number:</label>
  <input type="tel" id="phone" name="phone" 
         pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
         title="Format: 123-456-7890" placeholder="123-456-7890">
  
  <label for="event-date">Preferred Event Date:</label>
  <input type="date" id="event-date" name="event-date"
         min="2024-01-01" max="2024-12-31" required>
  
  <label for="guests">Number of Guests:</label>
  <input type="number" id="guests" name="guests"
         min="1" max="10" value="1" required>
  
  <button type="submit">Register for Event</button>
</form>
→
[Professional registration form with comprehensive validation]

Your Task: Validation Form

Create a form with:

  1. Email input with required validation
  2. Date input field with min/max constraints
  3. At least one other HTML5 input type
  4. Pattern validation example
  5. Custom error messages using title attribute
Section 1/8Email Input Type

Email Input Type

Email input benefits:Automatic email format validationSpecialized mobile keyboard with @ symbolBrowser shows helpful error messagesPrevents form submission with invalid emails

Input Types & Validation

HTML5 provides powerful input types and built-in validation to create user-friendly forms with better data quality and user experience.

Email Input Type

<form>
  <label for="email">Email Address:</label>
  <input 
    type="email" 
    id="email" 
    name="email" 
    required 
    placeholder="user@example.com">
  <button type="submit">Submit</button>
</form>
→
[Email input with automatic @ validation and mobile keyboard]

Email input benefits:

  • Automatic email format validation
  • Specialized mobile keyboard with @ symbol
  • Browser shows helpful error messages
  • Prevents form submission with invalid emails

HTML Editor

Preview