Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge: Input and Label | Forms
Ultimate HTML

Challenge: Input and LabelChallenge: Input and Label

🏁 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.
    1. Define the appropriate type for the text input;
    2. Set the placeholder to John;
    3. Ensure the input is focused by default.
  • For the Email Input: Establish an email input that collects users' email addresses. Ensure data accuracy by utilizing the appropriate attributes.
    1. Define the correct type for the email input;
    2. Set the placeholder to example@gmail.com;
    3. Mark the field as required.
  • For the Password Input: Create a secure password input that keeps user data safe. Utilize the appropriate attributes to enhance data protection.
    1. Define the correct type for the password input;
    2. Make the field required.
html

index.html

css

index.css

js

index.js

  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).
html

index.html

css

index.css

js

index.js

Все було зрозуміло?

Секція 5. Розділ 6

Challenge: Input and LabelChallenge: Input and Label

🏁 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.
    1. Define the appropriate type for the text input;
    2. Set the placeholder to John;
    3. Ensure the input is focused by default.
  • For the Email Input: Establish an email input that collects users' email addresses. Ensure data accuracy by utilizing the appropriate attributes.
    1. Define the correct type for the email input;
    2. Set the placeholder to example@gmail.com;
    3. Mark the field as required.
  • For the Password Input: Create a secure password input that keeps user data safe. Utilize the appropriate attributes to enhance data protection.
    1. Define the correct type for the password input;
    2. Make the field required.
html

index.html

css

index.css

js

index.js

  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).
html

index.html

css

index.css

js

index.js

Все було зрозуміло?

Секція 5. Розділ 6
some-alt