HTML
Advanced
60 mins
Teacher/Student led
85 points
What you need:
Chromebook/Laptop/PC or iPad/Tablet

Advanced Input Types

Delve into the world of advanced HTML input types in this step-by-step lesson. Learn to create number, date, and colour input fields, enhancing user experience. Then, put your knowledge into practice by enhancing a form with these advanced input types.
Learning Goals Learning Outcomes Teacher Notes

Live Class Feed

This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.
Load previous activity

    1 - Introduction to Advanced Input Types

    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!

    2 - Number Input Type

    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.

    3 - Date Input Type

    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.

    4 - Color Input Type

    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.

    5 - Enhancing a Form with Advanced Input Types

    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.

    Unlock the Full Learning Experience

    Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

    Copyright Notice
    This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more