Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Challenge: Create Form with Inputs and Labels | HTML Forms and User Input
Ultimate HTML

bookChallenge: 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:

  1. Name input
    • Use a text input.
    • Set the placeholder to John.
    • Make the input focused by default (autofocus).
  2. Email input
    • Use an email input.
    • Set the placeholder to example@gmail.com.
    • Mark the field as required.
  3. Password input
    • Use a password input.
    • Make this field required.
index.html

index.html

index.css

index.css

copy
  1. 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).
index.html

index.html

index.css

index.css

copy
Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 5. ChapterΒ 6

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

bookChallenge: 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:

  1. Name input
    • Use a text input.
    • Set the placeholder to John.
    • Make the input focused by default (autofocus).
  2. Email input
    • Use an email input.
    • Set the placeholder to example@gmail.com.
    • Mark the field as required.
  3. Password input
    • Use a password input.
    • Make this field required.
index.html

index.html

index.css

index.css

copy
  1. 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).
index.html

index.html

index.css

index.css

copy
Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 5. ChapterΒ 6
some-alt