Learn HTML Forms by Building a Registration Form - Step 41

HTML-CSS
1

Tell us what’s happening:
I didnt understand the instruction

" With form submissions, it is useful, and good practice, to provide each submittable element with a name attribute. This attribute is used to identify the element in the form submission.

Give each submittable element a unique name attribute of your choosing, except for the two radio inputs."

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">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
      </fieldset>
      <fieldset>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
        <label for="terms-and-conditions">
          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
        </label>
      </fieldset>
      <fieldset>
        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file"/></label>
        <label for="age">Input your age (years): <input id="age" type="number" min="13" max="120" /></label>
        <label for="referrer">How did you hear about us?
          <select id="referrer" name="referrer">
            <option value="">(select one)</option>
            <option value="1">freeCodeCamp News</option>
            <option value="2">freeCodeCamp YouTube Channel</option>
            <option value="3">freeCodeCamp Forum</option>
            <option value="4">Other</option>
          </select>
        </label>
        <label for="bio">Provide a bio:
          <textarea id ="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
        </label>
      </fieldset>

<!-- User Editable Region -->

      <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/109.0.0.0 Safari/537.36

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

Link to the challenge:

2

The instruction was

Give each submittable element a unique name attribute of your choosing, except for the two radio inputs.

So they just want you to add a new name attribute to the elements that are “submittable” except for the two radio buttons.

Look at your preview pane and try to fill the form out. Anything you can modify as a user filling the form is a “submittable element”.
So find the matching elements for everything the user can modify and add the name to their tags

3

still didnt got it completely

like for ex: in this code

< fieldset>
       label for="first-name">Enter Your First Name:    < input id="first-name" name="first-name" type="text" required /></label>

where am i supposed to give the unique name attribute
*removed < coz the code was not showing

4

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
5

the rule of thumb is to put the id in anything that you can change as a user in the form.
so which of the elements you shared: fieldset, label or input is something you are able to actually modify in the form?

6

i am able to modify inputs and label , so i am supposed to give unique name to label and input tags

7

You cannot modify the label though? If you try to type into a label in the preview pane what happens?

8

if you try to type into a label in the preview pane what happens?
ans: it takes text as input

why we cant modify label

9

This is the label. You cannot modify this label in the form correct? (In the preview pane area)

You can enter a name but that is being done in the input element which allows the user to edit.

Do you see what I mean? (You cannot change the words “Enter your last name:” to something else like “Enter your best friend’s name”)

10

oh now i got it, thanks for the help. i really appreciate it. :innocent:

1 Like
11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.