HTML New Input Types

HTML New Input Types

HTML New 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 webpages 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.

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>