HTML5 Input Types

HTML5 Input Types

What are 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 textboxes. 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>

 

Terry White

Terry White is a professional Drupal & WordPress developer, Web developer, Web designer, Software Engineer, and Blogger. He strives for pixel-perfect design, clean robust code, and a user-friendly interface. If you have a project in mind and like his work, feel free to contact him

View all posts by Terry White →