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

Build a web form with a number input field.
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.
Include step attributes for incrementing or decrementing the value.
Implement a submit button for users to submit their chosen quantity.

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

Task 3: Employing Date Input

Create an HTML form that includes a date input field.
Add a label and placeholder text to indicate that users should select a date.
Implement HTML5 attributes to specify the date format and range.
Provide a submit button for users to submit their chosen date.

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

Develop an HTML form with a range input field.
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.
Display the current value of the range to users.
Add a submit button for users to submit their chosen value.

Expected Outcomes: Students should be able to create a range input field, set its constraints, and display the current value to users.

Task 5 (BONUS): Capturing Color with Color Input

Build an HTML form featuring a color input field.
Include a label and placeholder text indicating that users should select a color.
Utilize the value attribute to set an initial color.
Add a submit button for users to submit their chosen color.

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

Module 7 Lesson 3: Assignments | HTML Forms