Tell us what’s happening:
I don’t understand why and how to write “for” with the input.
Describe your issue in detail here.
Step 28
Follow accessibility best practices by linking the input
elements and the label
elements in the second fieldset
.
Personal Account
Business Account
I accept the terms and conditions
Use personal-account
, business-account
, and terms-and-conditions
as values for the respective id
attributes.
Test
Sorry, your code does not pass. Hang in there.
Hint
The first label
element should have a for
attribute with a value of personal-account
.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" id="personal-account" /> Personal Account</label>
<label><input type="radio" name="account-type" id="business-account" /> Business Account</label>
<label><input type="checkbox" required id="terms-and-conditions" /> I accept the terms and conditions</label>
</fieldset>
<fieldset></fieldset>
<input type="submit" value="Submit" />
</form>
</body>
</html>
/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
}
label {
display: block;
margin: 0.5rem 0;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
Challenge: Learn HTML Forms by Building a Registration Form - Step 28
Link to the challenge: