HTML5 Input Types You May Not Be Using

An HTML5 input type enhances user experience and minimizes the requirement for JavaScript validation. Some HTML5 input types that are rarely used but can noteworthily improve form on websites are listed below.

HTML5 input type Values

Input Type Purpose
<input type="tel">
 Numeric keypads are displayed on mobile browsers, thereby enhancing UX on devices.
<input type="date">
 Any specific date can be picked from a calendar, securing proper format.
<input type="month">
 It minimizes the complexities of entering inputs for month/year related data. For example, setting up the expiry date of credit cards.
<input type="file">
 It unifies the selection of files directly into the form and can specify the acceptable file types.
<input type="hidden">
 It can be used to pass confidential data, metadata, etc.
<input type="datetime-local">
 It allows more precise input that includes both date and time.
<input type="week">
 It can be used to chart and schedule meetings and also track weekly data.
<input type="email">
 It provides basic validation on modern browsers, such as checking for an '@' symbol.
<input type="range">
 It gives a simple, visual manner to input a number within a specified range.
<input type="url">
 Includes validation to make sure proper URL structure is useful for links.
<input type="password">
 Apt for password entry and ensures input is treated securely.
<input type="time">
 It provides time selection with validation and prevents invalid time formats.
<input type="color">
 It simplifies the input of color values visually.
<input type="search">
 It includes specific styling and behavior (such as "clear button") upgraded for search.
<input type="number">
 It automatically validates that input is a number with minimum and maximum attributes.

Examples of input type Values

In this example we will show you the usage of each type of value, you can check from the output after clicking any input field on your own.

Example

<!DOCTYPE html>
<html>

<head>
    <title>HTML5 Input Types</title>
</head>

<body>
    <h2>HTML5 Input Types</h2>
    <p>Please click on each input field to check the accepted values</p>
    <table>
        <tr>
            <th>Input Type</th>
            <th>Example</th>
        </tr>
        <tr>
            <td>type="tel"</td>
            <td><input type="tel" 
                       name="phone" 
                       placeholder="Enter your phone number"></td>
        </tr>
        <tr>
            <td>type="date"</td>
            <td><input type="date" 
                       name="birthday"></td>
        </tr>
        <tr>
            <td>type="month"</td>
            <td><input type="month" 
                       name="expiration_date"></td>
        </tr>
        <tr>
            <td>type="file"</td>
            <td><input type="file" 
                       name="curriculum vitae" accept=".pdf, .doc"></td>
        </tr>
        <tr>
            <td>type="hidden"</td>
            <td><input type="hidden" 
                       name="customer_id" value="1234"></td>
        </tr>
        <tr>
            <td>type="datetime-local"</td>
            <td><input type="datetime-local" id="interview" 
                       name="interview"></td>
        </tr>
        <tr>
            <td>type="week"</td>
            <td><input type="week" 
                       name="schedule_week"></td>
        </tr>
        <tr>
            <td>type="email"</td>
            <td><input type="email" 
                       name="email" 
                       placeholder="Enter your email id"></td>
        </tr>
        <tr>
            <td>type="range"</td>
            <td><input type="range" 
                       name="volume" min="1" max="100"></td>
        </tr>
        <tr>
            <td>type="url"</td>
            <td><input type="url" 
                       name="website" 
                       placeholder="Enter your website url"></td>
        </tr>
        <tr>
            <td>type="password"</td>
            <td><input type="password" 
                       name="password" 
                       placeholder="Enter your password"></td>
        </tr>
        <tr>
            <td>type="time"</td>
            <td><input type="time" 
                       name="interview_time"></td>
        </tr>
        <tr>
            <td>type="color"</td>
            <td><input type="color" 
                       name="favcolor"></td>
        </tr>
        <tr>
            <td>type="search"</td>
            <td><input type="search" 
                       name="search" 
                       placeholder="Search..."></td>
        </tr>
        <tr>
            <td>type="number"</td>
            <td><input type="number" 
                       name="quantity" min="1" max="100"></td>
        </tr>
</body>

</html>

Output


Deepak Subhash
Deepak Subhash

Open to write

Updated on: 2024-09-26T11:25:48+05:30

129 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements