In this lesson, we will explore advanced input types in HTML forms, such as number, date, and color. These input types provide more functionality and better user experience than the basic text input. Let's dive in!
The number
input type allows users to enter a number. It provides a numeric keypad and optional arrows for increasing or decreasing the value. Let's create a number input field for entering the age of a user.
xxxxxxxxxx
<form>
<label for='age'>Age:</label>
<input type='number' id='age' name='age'>
</form>
The date
input type allows users to select a date from a calendar picker. This is useful for fields like birthdate or event dates. Let's create a date input field for selecting a user's birthdate.
xxxxxxxxxx
<form>
<label for='birthdate'>Birthdate:</label>
<input type='date' id='birthdate' name='birthdate'>
</form>
The color
input type allows users to select a color from a color picker. This is useful for fields like choosing a favorite color or customizing the appearance of a website. Let's create a color input field for selecting a user's favorite color.
xxxxxxxxxx
<form>
<label for='favoriteColor'>Favorite Color:</label>
<input type='color' id='favoriteColor' name='favoriteColor'>
</form>
Now that you've learned about these advanced input types, it's time to put them into practice. Enhance the following form by adding a number input for age, a date input for birthdate, and a color input for favorite color.
xxxxxxxxxx
<form>
<label for='name'>Name:</label>
<input type='text' id='name' name='name'>
<!-- Add your code for age, birthdate, and favorite color here. -->
</form>