Checkbox issue build a hotel feedback form

HTML-CSS
1

hi. doing the build a feedback form. totally blind and using a screen reader. now it says my label needs to be below the legend which i have. have reset the lesson, typed up the code. have got the code in my local copy of vs code. what stupid thing am i doing wrong? why? and not sure, did reset it again, not passing. and i dont know why. did listen to the sample code. unless got the label in the wrong place. or maybe a bug with the editor or the vallidation. can you shed any light on this. so how to get it to pass. pasting the error and my code below.
help. stratching my head. the other legend passed. and not sure why.
Sorry, your code does not pass. You’re getting there.

You should have a label element below your legend.Social Media Ads

2

you always need to share your code, or people can’t help you

3 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hotel Feedback Form</title>
  </head>
  <body>
    <header>
      <h1>Hotel Feedback Form</h1>
      <p>
        Thank you for staying with us. Please provide feedback on your recent
        stay.
      </p>
    </header>
    <main>
      <form method="POST" action="https://hotel-feedback.freecodecamp.org">
        <fieldset>
          <legend>Personal Information</legend>
          <label for="full-name">Name (required):</label>
          <input type="text" id="full-name" name="name" placeholder="Ex. John Doe" required size="20">

          <label for="email">Email address (required):</label>
          <input
            placeholder="example@email.com"
            required
            id="email"
            type="email"
            name="email"
            size="20"
          />
          <label for="age">Age (optional):</label>
          <input type="number" name="age" id="age" min="3" max="100" />
        </fieldset>

        <fieldset>
          <legend>Was this your first time at our hotel?</legend>
          <label for="yes-option">Yes</label>
          <input id="yes-option" type="radio" name="hotel-stay" />
          <label for="no-option">No</label>
          <input id="no-option" type="radio" name="hotel-stay" />
        </fieldset>

        <fieldset>
          <legend>
            Why did you choose to stay at our hotel? (Check all that apply)
            <label for="ads">Social Media Ads</label>
            <input type="checkbox" id="ads" name="ads" value="ads">
            
          </legend>
          
        </fieldset>
      </form>
    </main>
  </body>
</html>
4

how many topics do you have open asking for help with the hotel feedback form? I am confused. Please once you open one topic for one challenge, keep posting in that topic, do not open more topics.

5

hi, okay then just delete the other topics.

6 
hi. okay pasting my code. does not like says the label needs to be below the legend. did do that and in my local copy had two closing field set sections. only one. so then deleted that. so why is it not passing. what am i doing wrong? just looked at my label and checkbox code. now, it is under the check that all apply heading which is under the field set and legend. is it a bug with the editor? or am i only having this issue. any other people having the same issue. pasting below and got preformatted text selected.marvin.
Skip to content
Search 11,800+ news articles, tutorials, and books


Menu
Profile
Certified Full Stack Developer Curriculum
Build a Hotel Feedback Form
index.htmlEditor
ConsoleHide the previewPreviewMove the preview to a new window and focus it
4344454647484950
Step 22
When you want a user to select multiple options from a list, you can use checkboxes.

Here is an example of how to work with checkboxes dealing with food options:

Example Code
<fieldset>
  <legend>Food Options</legend>
  <label for="pizza">Pizza</label>
  <input type="checkbox" id="pizza" name="food" value="pizza">
  <label for="burger">Burger</label>
  <input type="checkbox" id="burger" name="food" value="burger">
</fieldset>
The value attribute is used to specify the value that will be sent to the server when the form is submitted.

Below your legend element, add a label element with the text of Social Media Ads. The for attribute should be set to "ads".

Below your label element, add a checkbox input with the id, name and value attributes set to "ads".

          <input id="no-option" type="radio" name="hotel-stay" />
        </fieldset>

        <fieldset>
          <legend>
            Why did you choose to stay at our hotel? (Check all that apply)
        <label for="ads">Social Media Ads</label>
            <input type="checkbox" id="ads" name="ads" value="ads">
          </legend>
         

Check Your Code (Ctrl + Enter)
Sorry, your code does not pass. Hang in there.

You should have a label element below your legend.

Reset

Help

Navigated to Build a Hotel Feedback Form: Step 22 | freeCodeCamp.org
b
7

It looks like your label is within your legend element, not below it.

Remember that an element refers to the opening and closing tags

8

hi. so should i then just reset, delete the legend and field set, type that up again and then copy and paste the text which i have in my local copy. had a second closing fieldset at the bottom. took that out. my mistake. so if i do this, will it pass? please advice.
marvin.

9

hi, tried that. still not liking it says i need the label. and got it under the text check that all apply. so i think you have a bugt. please check at your end. not passing, and totally frustrated.

10 
hi. heres my code/ so why is it failing. not sure why. and cannot see.using text to speech. so pasting below. how to get it to fix. is it a bug with the validation.
marvin.
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Hotel Feedback Form</title>
    </head>
    <body>
    <header>
        <h1>Hotel Feedback Form</h1>
        <p>Thank you for staying with us. Please provide feedback on your recent stay.</p>
    </header>    
    <main>
        <form action="https://hotel-feedback.freecodecamp.org" METHOD="POST">
    <fieldset> 
        <legend>
            Personal Information
        <label for="full-name">Name (required):</label>
        <input type="text" id="full-name" name="name" placeholder="Ex. John doe" size="20" required>
    <label for="email">Email address (required):</label>
    <input type="email" id="email" name="email" placeholder="example@email.com" size="20" required>
    <label for="age">Age (optional):</label>
    <input type="number" id="age" name="age" min="3" max="100">
        </legend>
    <fieldset>
        <legend>
            Was this your first time at our hotel?
    <label for="yes-option">Yes</label>
    <input type="radio" id="yes-option" name="hotel-stay">
    <label for="no-option">No</label>
    <input type="radio" id="no-option" name="hotel-stay">
        </legend>
    </fieldset>
    <fieldset>
        <legend>
            Why did you choose to stay at our hotel? (Check all that apply)
            <label for="ads">Social Media Ads</label>
            <input type="checkbox" id="ads" name="ads" value="ads">

        </legend> 
    </fieldset>
            </form>
        
    </main>
    </body>
    </html>
11

Here’s a paragraph element:

<p>This is a paragraph element.</p>

Below the p element I’ll put an h1 element:

<p>This is a paragraph element.</p>
<h1>This is a header</h1>

Below, or after, means that the h1 comes after the closing tag of the p element.

Your label element comes before the closing tag of the legend and so is nested inside the legend, not below or after.