THE INSTRUCTION IS UNCLEAR. I have to skip a few steps just to copy everything and paste it into my current code. I just repeatedly press ctrl+z ctrl+y just to know that NOT every submittable element needed the said attribute. Only 3 of them needed the “name” attribute but you highlighted 28 lines of code when the changes only occur on about 5 lines of code. At this point just tell me what the answer is and explain to me why only certain lines of code have changed. I miss the old freeCodeCamp where you can get answer right away instead of needing to wait for hours or even days for a simple question to be answered. If the instant hint/answer is paid feature, I would subscribe to it because English is not my first language and it’s hard to follow your instruction which is very unclear to me
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 name="first-name" 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 name="age"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>
I’m not sure I saw a question in your post. (I saw some complaints yes but no question)
If you would like some help, it would be great if you can think of what it is that is confusing you and let us know so we can try to explain it better or uncomplicate it.
I did notice that you placed a name attribute inside a label element at one point. Since this exercise is about teaching you to add name attributes to submittable elements in forms, you should not be adding a name attribute to a label element as it is -not- submittable.
A form is used to gather the user response(s) and send it to a server.
In this case, the label is not part of the user’s response and does not need a name attribute.
Everything that the user can edit though, does need a name attribute. If the user can type into it (like an input or textarea for eg) or if they can select it (like choosing a profile picture), then it is a ‘submittable element’.
That’s why, to my understanding “every submittable element” is basically every label such as: first name, last name, email, password, profile picture, age, and bio. All that. So why I only saw 5 changes when the “submittable attribute” (to my understanding) got around 7? And I don’t even understand why the “name” attribute is placed as it were at ‘step 44’. Ok, how about this? This is what I took from step 47:
<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" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" 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" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
Can someone tell me why there are such changes compared to my original one? The instruction is very unclear and the hint really not helping in explaining what is about to happen, what has happened, and why it happened. It’s better that you bring back the old feature if the explanation were this vague.
Just tell whoever is in charge to bring back the instant answer feature. Make it paid feature so that you can force me to “donate” 5$ for it. I just want the complete code of this project so I can experiment with it later in my VScode and study deeper. Sure I can skip to the final step and copy everything but I also want to follow the syllabus because it’s like refreshing my knowledge which is rusty because of lack of practice and that is why I remember the old feature, I was inconsistent before and came back to fully commit but only to realize the old feature is gone. I went through the complete code of this project and I can tell the function of almost every line of code. Only some lines that I don’t know what it does hence why I follow your syllabus. But for damn sure I wasn’t supposed to be stuck here.
I’m typing this not to cause a fight but demanding the old feature back which is the instant answer. It really breaks my consistency and really cuts off the supply of my “knowledge” dopamine to my brain when the answer is just so simple. Many times I got the answer right, I was right and the dopamine was almost there, but my answer was in the wrong position/line/typo. Many times I have to erase my almost-right answer to a completely wrong answer. Really messed up my mood but I kept going on with the syllabus hoping that I kept getting the next step without a hassle so that I can pay back the dopamine I was supposed to get 30 minutes before.
Make the instant answer a paid feature, I will subscribe to it.
Basically, the code shown to you in step 41 should -not- have included the name attributes in all the submittable elements already filled in.
The goal of this step originally was to explain that name attributes were to be added to submittable elements (not labels) and have the learner do it themselves in all 9 or more areas that needed (minus the radio button).
For now, feel free to skip this step if you have understood the objectives.
If you want to discuss your suggestions about a paid feature, feel free to open a new topic for this specifically in the Contributors forum.
I didn’t do anything to my code and just submit it and the hint said something like “p/s: I prefer to put ‘file’ instead of ‘name’”. What does that even mean? It’s so frustrating like, just give me the answer: am I the problem or the system? For hours I researched and stuff trying to figure out what did I miss and it turns out the system is at fault. As I said, I already went through the full code because I think after this step is all about css.styles. So I compare the code at step 47 and the current code at step 41 and I didn’t see anything significant.
p/s: sorry if I sounded rude because Grammarly said my tone is “Accusatory” and thank you for your attention I moved on from it already