Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML5 Input Types You May Not Be Using
HTML5 introduced several specialized input types that enhance user experience and reduce the need for custom JavaScript validation. Many developers overlook these powerful input types that can significantly improve form usability, especially on mobile devices.
Syntax
Following is the basic syntax for HTML5 input types
<input type="inputType" name="fieldName" [additional attributes]>
Where inputType is one of the HTML5 input types like tel, date, email, etc., and additional attributes provide specific constraints and behaviors.
HTML5 Input Types Overview
Following table lists the specialized HTML5 input types and their primary purposes
| Input Type | Purpose | Mobile Benefit |
|---|---|---|
tel |
Telephone number input | Shows numeric keypad on mobile devices |
email |
Email address with built-in validation | Shows keyboard with @ symbol easily accessible |
url |
Web URL with format validation | Shows keyboard optimized for URLs |
date |
Date picker with calendar interface | Native date picker prevents format errors |
time |
Time selection with validation | Native time picker with proper format |
datetime-local |
Combined date and time input | Unified date/time picker interface |
month |
Month and year selection | Simplified month/year picker |
week |
Week selection for scheduling | Native week picker interface |
number |
Numeric input with constraints | Numeric keypad with validation |
range |
Slider for value selection | Touch-friendly slider control |
color |
Color picker interface | Native color selection tool |
search |
Search input with clear button | Search-optimized keyboard and styling |
file |
File upload with type filtering | Direct access to device files |
Contact Information Input Types
These input types are specifically designed for collecting contact information with better mobile experience and validation.
Example Tel, Email, and URL
<!DOCTYPE html>
<html>
<head>
<title>Contact Input Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Information</h2>
<form>
<label for="phone">Phone Number:</label><br>
<input type="tel" id="phone" name="phone" placeholder="+1-555-123-4567" style="margin: 5px 0; padding: 8px; width: 250px;"><br><br>
<label for="email">Email Address:</label><br>
<input type="email" id="email" name="email" placeholder="user@example.com" style="margin: 5px 0; padding: 8px; width: 250px;"><br><br>
<label for="website">Website URL:</label><br>
<input type="url" id="website" name="website" placeholder="https://www.example.com" style="margin: 5px 0; padding: 8px; width: 250px;"><br><br>
<input type="submit" value="Submit" style="padding: 10px 20px;">
</form>
</body>
</html>
On mobile devices, each input type displays an optimized keyboard. The email type shows easy access to @ symbol, while tel type displays a numeric keypad.
Date and Time Input Types
HTML5 provides several date and time input types that eliminate the need for custom date pickers and ensure proper format validation.
Example Date and Time Inputs
<!DOCTYPE html>
<html>
<head>
<title>Date and Time Inputs</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Schedule Event</h2>
<form>
<label for="event-date">Event Date:</label><br>
<input type="date" id="event-date" name="event_date" style="margin: 5px 0; padding: 8px; width: 200px;"><br><br>
<label for="event-time">Event Time:</label><br>
<input type="time" id="event-time" name="event_time" style="margin: 5px 0; padding: 8px; width: 200px;"><br><br>
<label for="meeting">Meeting Date & Time:</label><br>
<input type="datetime-local" id="meeting" name="meeting" style="margin: 5px 0; padding: 8px; width: 250px;"><br><br>
<label for="expire-month">Expiry Month:</label><br>
<input type="month" id="expire-month" name="expire_month" style="margin: 5px 0; padding: 8px; width: 200px;"><br><br>
<label for="project-week">Project Week:</label><br>
<input type="week" id="project-week" name="project_week" style="margin: 5px 0; padding: 8px; width: 200px;"><br><br>
<input type="submit" value="Schedule" style="padding: 10px 20px;">
</form>
</body>
</html>
Each date/time input provides a native picker interface that varies by browser and operating system, ensuring consistent user experience and proper validation.
Numeric and Range Input Types
These input types provide better control for numeric values with built-in validation and user-friendly interfaces.
Example Number and Range Inputs
<!DOCTYPE html>
<html>
<head>
<title>Numeric Input Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Product Configuration</h2>
<form>
<label for="quantity">Quantity (1-100):</label><br>
<input type="number" id="quantity" name="quantity" min="1" max="100" value="1" style="margin: 5px 0; padding: 8px; width: 100px;"><br><br>
<label for="volume">Volume Level:</label><br>
<input type="range" id="volume" name="volume" min="0" max="100" value="50" style="margin: 5px 0; width: 250px;">
<span id="volumeValue">50</span><br><br>
<label for="price">Price ($):</label><br>
<input type="number" id="price" name="price" min="0" step="0.01" placeholder="0.00" style="margin: 5px 0; padding: 8px; width: 150px;"><br><br>
<input type="submit" value="Configure" style="padding: 10px 20px;">
</form>
<script>
const volumeSlider = document.getElementById('volume');
const volumeValue = document.getElementById('volumeValue');
volumeSlider.oninput = function() {
volumeValue.textContent = this.value;
}
</script>
</body>
</html>
The number input provides increment/decrement buttons and validates numeric input. The range input creates a slider that's particularly touch-friendly on mobile devices.
Specialized Input Types
These input types provide specialized interfaces for specific data types like colors, files, and search functionality.
Example Color, File, and Search
<!DOCTYPE html>
<html>
<head>
<title>Specialized Input Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Preferences</h2>
<form>
<label for="theme-color">Theme Color:</label><br>
<input type="color" id="theme-color" name="theme_color" value="#3366cc" style="margin: 5px 0; width: 60px; height: 40px; border: none;"><br><br>
<label for="search-query">Search:</label><br>
<input type="search" id="search-query" name="search" placeholder="Search tutorials..." style="margin: 5px 0; padding: 8px; width: 250px;"><br><br>
<label for="profile-pic">Profile Picture:</label><br>
<input type="file" id="profile-pic" name="profile_pic" accept="image/*" style="margin: 5px 0; padding: 8px; width: 250px;"><br><br>
<label for="resume">Resume (PDF/DOC):</label><br>
<input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" style="margin: 5px 0; padding: 8px; width: 250px;"><br><br>
<input type="submit" value="Save Preferences" style="padding: 10px 20px;">
</form>
</body>
</html>
The color input opens a native color picker, the file input can filter acceptable file types using the accept attribute, and the search input often includes a clear button on many browsers.
212 Views
