Course Content
Ultimate HTML
Ultimate HTML
Challenge: Input and Label
🏆 Challenge:
🏁 Goal
Elevate the website's user experience by creating an interactive form that requires inputs for name, email, and password, complete with associated labels.
Incorporate a user-friendly form into your website, enhancing user engagement and interaction. Your task is to:
- For the Name Input: Create a text input that collects users' names. Utilize the correct attributes to ensure a seamless experience.
- Define the appropriate
type
for the text input. - Set the
placeholder
toJohn
. - Ensure the input is focused by default.
- Define the appropriate
- For the Email Input: Establish an email input that collects users' email addresses. Ensure data accuracy by utilizing the appropriate attributes.
- Define the correct
type
for the email input. - Set the
placeholder
toexample@gmail.com
. - Mark the field as required.
- Define the correct
- For the Password Input: Create a secure password input that keeps user data safe. Utilize the appropriate attributes to enhance data protection.
- Define the correct
type
for the password input. - Make the field required.
- Define the correct
Hint
1.
2.
3.
4.
5.
autofocus
: Automatically focuses the input field when the
page loads. 2.
required
: Marks the input field as mandatory, preventing
form submission if left empty. 3.
placeholder
: Provides a hint or example text for the input
field. 4.
for
and id
: Associates a label with an input
field for improved accessibility. 5.
type
: Specifies the type of data expected in the input field
(e.g., text, email, password).
Everything was clear?
Section 5. Chapter 6