1. Exploring New HTML5 Input Types

Objective: The aim of this assignment is to familiarize students with the new HTML5 input types and their practical applications in web form development. Students will learn how to use these input types to enhance user experience and streamline data collection.

Task 1: Implementing Email Input

Create an HTML form with a text input field of type email.
Add a label and placeholder text to indicate that this input is for an email address.
Implement HTML5 validation to ensure that only valid email addresses are accepted.
Provide a submit button to allow users to submit their email addresses.

Expected Outcomes: Students should be able to create an email input field and use HTML5 validation for email addresses.

Task 2: Utilizing Number Input

Now add a number input field to your existing form.
Add a label and placeholder text to instruct users to enter a quantity.
Use HTML5 attributes to define the minimum and maximum values accepted for this input.
(BONUS) Include step attributes for incrementing or decrementing the value.

Expected Outcomes: Students should be able to create a number input field with specified constraints and step increments.

Task 3: Employing Date Input

Now add a date input field to your existing form.
Add a label and placeholder text to indicate that users should select a date.
Implement HTML5 attributes to specify the date format and range.

Expected Outcomes: Students should be able to create a date input field and define date format and range using HTML5 attributes.

Task 4: Enhancing User Experience with Range Input

Now add a range input field to your existing form.
Include a label and placeholder text indicating what the range represents (e.g., rating or quantity).
Utilize HTML5 attributes to set the minimum and maximum values for the range.

Expected Outcomes: Students should be able to create a range input field, set its constraints.

(BONUS) Task 5: Capturing Color with Color Input

Lastly, add a color input field to your existing form.
Include a label and placeholder text indicating that users should select a color.
Utilize the value attribute to set an initial color.

Expected Outcomes: Students should be able to create a color input field and set an initial color using the value attribute.

Lesson 3: Assignments | HTML Forms