Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

I have errors in the survey form I’ve developed. I’ve listed them below:

  1. Your #dropdown should be a descendant of #survey-form .
  2. You should have at least two radio buttons that are descendants of #survey-form .
  3. You should have at least two input elements with a type of checkbox (checkboxes) that are descendants of #survey-form .
  4. All your checkboxes inside #survey-form should have a value attribute and value.
  5. You should have at least one textarea element that is a descendant of #survey-form .
  6. Your #submit should be a descendant of #survey-form .

Your code so far

<!Doctype html>
<html>
<meta charset="utf-8" />
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css">
<h1 id="title">Improve your eating habits</h1>
<p id="description"
class="description text-center">Thank you for your time</p>
<fieldset>
<form id="survey-form">
  <div class="input-element">
<label id="name-label">Name:
  <input id="name"
  type="text"
  placeholder="Enter your name"
  required />
  </label>
  </div>
  <div class="input-element">
<label id="email-label">Email:
  <input id="email"
  type="email"
  placeholder="Enter your email"
  required />
  </label>
  </div>
  <div class="input-element">
<label id="number-label">Enter your age (years):
  <input id="number"
  type="number"
  placeholder="age"
  required
  min="10"
  max="100"/>
  </label>
  </div>
  </fieldset>
  <fieldset>
  <label>What is your favourite fruit:</label>
  <select id="dropdown">
    <option value="0">Select a fruit</option>
    <option value="1">Apple</option>
    <optiom value="2">Banana</option>
    <option value="3">Mango</option>
  </select>
  </fieldset>
  </form>
  <div>
    <label>Do you eat vegetables?</label>
    </div>
    <div>
    <label>Yes<input type="radio" value="Yes"
    name="vegetables"/></label>
    <label>No<input
    type="radio" value="No"
    name="vegetables"/></label>
</div> 
  <div>
    <label>Pick your favourite vegies:<label>
      </div>
      <div>
<fieldset>
  <label>Butternut<input
        type="checkbox"
    name="butternut"
    value="butternut"></label>
    <label>Sweet potatoe<input
    type="checkbox"
    name="butternut"
    value="butternut"></label>
    <label>Carrot<input
    type="checkbox"
    name="carrot"
    value="carrot"></label>
    <label>Squash<input
    type="checkbox"
    name="squash"
    value="squash"></label>
    <label>Cabbage<input
    type="checkbox"
    name="cabbage"
    value="cabbage"></label>
    <label>Tomatoe<input
    type="checkbox"
    name="tomatoe"
    value="tomatoe"></label>
    </fieldset>
        </div>
        <label>Comment your thoughts below:</label>
        <textarea>Enter your thoughts here...</textarea>
        
        <div class="form-group">
          <button type="submit" id="submit" class="submit-button">
            Submit
          </button>
        </div>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

i belive you should get red of all the html tags along with all the head elements and what inside of them, you don’t need any of that , you’re already coding inside the body of an HTML page.
as for the tests to pass , inclose all of your other elements after your header and text inside the form element.

3

What do they mean when they say " descendants of #survey-form"?

4

Okay so in this example, the p element is a descendent of main.

<main>
<h1>Hello</h1>
<p>I am a sentence.</p>
</main>

Your form element closes too soon, which is causing the issue.

5

the form element is called #survey-form , # means id

6

I have this in the code

<form id="survey-form">
7

closes too soon, it closes at the end, look at the code I submitted

8

I have looked at your code. I have also completed this project and know what is needed to pass.

Look at the html comments I have put in your code, they explain what you need to do.

<!Doctype html>
<html>
<meta charset="utf-8" />
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css">
<h1 id="title">Improve your eating habits</h1>
<p id="description"
class="description text-center">Thank you for your time</p>
<fieldset><!--fieldsets should be inside the form.-->
<form id="survey-form"><!--your form starts here-->
  <div class="input-element">
<label id="name-label">Name:
  <input id="name"
  type="text"
  placeholder="Enter your name"
  required />
  </label>
  </div>
  <div class="input-element">
<label id="email-label">Email:
  <input id="email"
  type="email"
  placeholder="Enter your email"
  required />
  </label>
  </div>
  <div class="input-element">
<label id="number-label">Enter your age (years):
  <input id="number"
  type="number"
  placeholder="age"
  required
  min="10"
  max="100"/>
  </label>
  </div>
  </fieldset>
  <fieldset>
  <label>What is your favourite fruit:</label>
  <select id="dropdown">
    <option value="0">Select a fruit</option>
    <option value="1">Apple</option>
    <optiom value="2">Banana</option>
    <option value="3">Mango</option>
  </select>
  </fieldset>
  </form><!--your form ends here-->
  <div>
    <label>Do you eat vegetables?</label>
    </div>
    <div>
    <label>Yes<input type="radio" value="Yes"
    name="vegetables"/></label>
    <label>No<input
    type="radio" value="No"
    name="vegetables"/></label>
</div> 
  <div>
    <label>Pick your favourite vegies:<label>
      </div>
      <div>
<fieldset>
  <label>Butternut<input
        type="checkbox"
    name="butternut"
    value="butternut"></label>
    <label>Sweet potatoe<input
    type="checkbox"
    name="butternut"
    value="butternut"></label>
    <label>Carrot<input
    type="checkbox"
    name="carrot"
    value="carrot"></label>
    <label>Squash<input
    type="checkbox"
    name="squash"
    value="squash"></label>
    <label>Cabbage<input
    type="checkbox"
    name="cabbage"
    value="cabbage"></label>
    <label>Tomatoe<input
    type="checkbox"
    name="tomatoe"
    value="tomatoe"></label>
    </fieldset>
        </div>
        <label>Comment your thoughts below:</label>
        <textarea>Enter your thoughts here...</textarea>
        
        <div class="form-group">
          <button type="submit" id="submit" class="submit-button">
            Submit
          </button>
        </div>
<!--your form should end here-->
</html>
1 Like
9

Thank you vert much. The fieldset and the closing form element were the ones that delayed. I’m on to the next challenge

1 Like