Input Types — Semantic Form Controls for Accessibility

In this tutorial, you will learn about Input Types. We cover key concepts, practical examples, and best practices to help you master this topic.

Semantic input types tell browsers and assistive technologies what kind of data a field expects, enabling specialized keyboards on mobile and built-in validation.

What You'll Learn

Which input types to use for different data, how they improve Accessibility, and how to handle browser inconsistencies.

Why It Matters

Using type=email on mobile shows a keyboard with the @ symbol. type=tel shows a numeric keypad. Screen readers announce the input type so users know what format to enter.

Real-World Use

A user on a mobile phone fills out a form to book a flight. The date field uses type=date, showing a native date picker. The email field shows a keyboard with the @ key. The phone field shows a numeric keypad.

Semantic Input Types

<!-- Email with appropriate keyboard -->
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email">

<!-- Telephone shows numeric keypad -->
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" autocomplete="tel">

<!-- Number with step, min, max -->
<label for="quantity">Quantity</label>
<input type="number" id="quantity" name="quantity" min="1" max="99" step="1">

<!-- URL keyboard -->
<label for="website">Website</label>
<input type="url" id="website" name="website" autocomplete="url">

<!-- Date picker -->
<label for="birthdate">Date of birth</label>
<input type="date" id="birthdate" name="birthdate">

<!-- Search -->
<label for="q" class="sr-only">Search</label>
<input type="search" id="q" name="q" autocomplete="search">

Validation Attributes

<!-- Pattern attribute for custom validation -->
<label for="promo">Promo code</label>
<input type="text" id="promo" name="promo"
       pattern="[A-Z0-9]{8}"
       title="8-character alphanumeric code">

<!-- minlength and maxlength -->
<label for="username">Username</label>
<input type="text" id="username" name="username"
       minlength="3" maxlength="20"
       aria-describedby="username-hint">
<p id="username-hint">3-20 characters</p>

Browser Support Note

<!-- type=date fallback for older browsers -->
<label for="travel-date">Travel date</label>
<input type="date" id="travel-date" name="travel-date"
       pattern="\d{4}-\d{2}-\d{2}"
       placeholder="YYYY-MM-DD">

Common Mistakes

1. Using type=text for everything

Specific types enable mobile keyboards, built-in validation, and screen reader announcements.

2. Ignoring type=number accessibility

type=number has precision issues with screen readers. Consider type=text with inputmode=numeric as an alternative.

3. Missing placeholder explanations

type=date shows different formats by locale. Provide a hint using aria-describedby.

4. Overriding native validation

Do not use novalidate unless you implement custom validation that matches or exceeds native behavior.

5. Forgetting autocomplete

Browser autofill reduces errors and speeds up form completion for all users.

Practice Questions

1. What input type shows a numeric keypad on mobile? type=tel shows a numeric keypad on mobile devices.

2. How does type=email help screen reader users? The screen reader announces "email edit field" so the user knows to enter an email address format.

3. What attribute provides a custom validation pattern? The pattern attribute accepts a regex that the input value must match for the form to submit.

Challenge: Create a registration form with at least 5 different input types (email, tel, password, date, number). Test on mobile to verify the correct keyboard appears for each field.

FAQ

Mini Project

Build a contact form with fields for name, email, phone, website, date of birth, and preferred contact time. Use the correct semantic input type for each field. Test keyboard behavior and mobile keyboards.

What's Next

Learn how to mark Required Fields with both visual indicators and programmatic attributes like aria-required.