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

book
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

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

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<!-- Change the code below -->
<form onsubmit="return false">
<label for="name">Name:</label>
<input type="___" id="name" name="name" placeholder="___" ___ />

<label for="___">Email:</label>
<input type="___" id="email" name="email" placeholder="___" ___ />

<label ___="___">Password:</label>
<input type="___" ___="___" name="password" ___ />

<button type="submit">Submit</button>
</form>
</body>
</html>
  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

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<form onsubmit="return false">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="John" autofocus />

<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
placeholder="example@gmail.com"
required
/>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required />

<button type="submit">Submit</button>
</form>
</body>
</html>
Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 5. Chapter 6
some-alt