Learn HTML Forms by Building a Registration Form - Step 18

label element input element

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 method="post" action='https://register-demo.freecodecamp.org'>

<!-- User Editable Region -->

      <fieldset>
        <label for="first-name"><input id="first-name"> Enter Your First Name: <input /></label>
        <label for="last-name"><input id="last-name">Enter Your Last Name: <input /></label>
        <label for="email"><input id="email">Enter Your Email: <input /></label>
        <label for="new-password"><input id="new-password">Create a New Password: <input /></label>
      </fieldset>

<!-- User Editable Region -->

      <fieldset></fieldset>
      <fieldset></fieldset>
    </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/117.0.0.0 Safari/537.36

Challenge: Learn HTML Forms by Building a Registration Form - Step 18

Link to the challenge:

You added a new input element, so now you have two inputs inside the label. You only want one input inside each label.

Can someone please explain to me what is going on with the label “for” and “id” attributes? It seems FCC is assuming this linking of sorts makes sense.

Any help is appreciated.

Thanks

The for attribute on the label allows you to give an input a programmatic name. For example:

<label for="fname">First Name</label>
<input id="fname" type="text">

The for attribute points to the id of the text input. This establishes a programmatic link between the label’s text and the input. In other words, the input now has the programmatic name “First Name”. This is important for accessibility because people using assistive technology rely on the programmatic name of the input to know what the input is for.

This is especially important for people using screen readers to listen to the page. With the label attached to the input, a screen reader user will hear something like “text input First Name” when they navigate to the input and thus they will know that the input is asking them to enter their first name. If the input didn’t have a programmatic name, then they would just hear “text input” and would have to do extra work to figure out what they are supposed to type in the input.

1 Like

Thanks for that. It’s good to get a clear explanation.

What question are you answering? :slightly_smiling_face:

Oh! I’m Sorry. By mistake!