HTML5 Input Types

HTML5 Input Types

What are the new HTML5 Input Types?

The newest version of the HTML language comes with new input types like date, color, time, and range that aim at improving the user experience by making the forms on a webpage more interactive. To avoid conflict, browsers that do not recognize these new input types will regard them as normal text boxes. Below are a few commonly used input types and their definitions.

HTML5 Elements

Input type color: Allows a user to select a color from a drop-down menu and returns its hexadecimal value.

<form>
    <label>
        Select Color: <input type="color" name="mycolor">
    </label>
</form>

Date: Allows users to input dates by selecting them from a drop-down calendar.

<form>
    <label>
        Select Date: <input type="date" name="mydate">
    </label>
</form>

Datetime: Similar to the date input type but it allows users to include the time and time zone.

<form>
    <label>
        Date & Time: <input type="datetime" name="mydatetime">
    </label>
</form>

Email: This input requires a user to enter a valid email.

<form>
    <label>
        Email Address: <input type="email" name="myemail" required>
    </label>
</form>

 

Join Telegram Join Whatsapp