Challenge: Create Form with Inputs and Labels
Goal
Elevate the website's user experience by creating an interactive form that requires inputs for name, email, and password, complete with associated labels.
Task
Add a simple, user-friendly form to your page. Follow these requirements:
- Name input
- Use a text input.
- Set the placeholder to
John. - Make the input focused by default (autofocus).
- Email input
- Use an email input.
- Set the placeholder to
example@gmail.com. - Mark the field as required.
- Password input
- Use a password input.
- Make this field required.
index.html
index.css
autofocus: automatically focuses the input field when the page loads.required: marks the input field as mandatory, preventing form submission if left empty.placeholder: provides a hint or example text for the input field.forandid: associates a label with an input field for improved accessibility.type: specifies the type of data expected in the input field (e.g., text, email, password).
index.html
index.css
Everything was clear?
Thanks for your feedback!
SectionΒ 5. ChapterΒ 6
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Awesome!
Completion rate improved to 2.38
Challenge: Create Form with Inputs and Labels
Swipe to show menu
Goal
Elevate the website's user experience by creating an interactive form that requires inputs for name, email, and password, complete with associated labels.
Task
Add a simple, user-friendly form to your page. Follow these requirements:
- Name input
- Use a text input.
- Set the placeholder to
John. - Make the input focused by default (autofocus).
- Email input
- Use an email input.
- Set the placeholder to
example@gmail.com. - Mark the field as required.
- Password input
- Use a password input.
- Make this field required.
index.html
index.css
autofocus: automatically focuses the input field when the page loads.required: marks the input field as mandatory, preventing form submission if left empty.placeholder: provides a hint or example text for the input field.forandid: associates a label with an input field for improved accessibility.type: specifies the type of data expected in the input field (e.g., text, email, password).
index.html
index.css
Everything was clear?
Thanks for your feedback!
SectionΒ 5. ChapterΒ 6