Build a Survey Form - Descendant help

HTML-CSS
1

Hi, I’m working on my survey form project and i’m running into some issues where i’m not sure i understand the logic behind them.

I’m running into issues where I don’t completely understand what a descendant of something is in my code. I’m at the point with my code whereI need a dropdown menu and two radio buttons as descendants of my form element. I’ve already written the code for a dropdown menu and two radio buttons but i’m not sure how to make them descendants.

<!DOCTYPE html>
<html lang="en"
<link rel="stylesheet" href="styles.css">
<head>
  <meta charset="UTF-8">
  <title>You've been chosen to participate in a <strong>TOTALLY RADICAL survey!</title>
  <h1 id="title">You've been chosen to participate in a <strong>TOTALLY RADICAL</strong> survey!
    <h2>(This survey will not affect your credit.)
</head>
<body>
  <h3>
    <p id="description">
    So, uh yeah. This is the survey to find out how cute you think i am. This is totally placeholder text btw.
    </p>
  </h3>
    <section>
      <fieldset>
        <form id="survey-form" class="survey-form">
          <label id="name-label">Enter your first name:<input id="name" name="first-name" type="text" placeholder="First Name" required></label>
          <label id="last-name">Enter your last name:<input id="last-name" name="last-name" type="text" placeholder="Last Name" required></label>
          <label id="email-label">Enter your email:<input id="email" name="email" type="email" required="@gmail.com" placeholder="Email"></label>
          <label id="number-label">Enter in a random number:<input id="number" name="numbers" type="number" placeholder="69, Dudes!" pattern="[0-9]{0,8}" min="0" max="420" required>
      </fieldset>
    </section>
    <section>
      <fieldset>
      <legend>Do you like me?</legend>
        <label for="yes">Yes
          <input id="yes" type="radio" name="yes-no" value="yes" checked>
        </label>
        <label for="no">No
          <input id="no" type="radio" name="yes-no" value="no">
        </label>
    </fieldset>
    </section>
    <section>
      <fieldset>
        <label for="bio">Bio goes here:
          <textarea id="bio" name="bio" rows="4" columns="30" placeholder="Blah blah blah..."></textarea>
     </section>
    <fieldset>
      <label for="horror"> Favorite horror movie/short?
        <select id="dropdown" name="horror">
          <option value="">(Select one)</option>
          <option value="1">Skinamarink</option>
          <option value="2">Unedited Footage of a Bear</option>
          <option value="3">M3gan</option>
          <option value="4">the Backrooms</option>
        </select>
    </fieldset>
    <fieldset>
      <legend>What is your favorite snack?</legend>
        <input id="korean-corn-dogs" type="checkbox" name="korean-corn-dogs" value="korean-corn-dogs"><label for="korean-korn-dogs">Korean corn dogs</label>
        <input id="bubble-tea" type="checkbox" name="bubble-tea" value="bubble-tea"><label for="bubble-tea">Bubble Tea</label>
        <input id="custard" type="checkbox" name="custard" value="custard">Custard</label>
        <input id="crumbl" type="checkbox" name="crumbl" value="crumbl"><label for="crumbl">Crumbl Cookies</label>
    </fieldset>
    </form>


</html>
2

Hi @discorout !

Welcome to the forum!

It looks like you have a few issues with your HTML strucuture.
Let’s go from top to bottom

Your first issue is the opening html tag here. it is missing a closing >

The second issue is the head section here

Your head section should only contain meta elements, link elements and the title elements.

You need to get rid of the strong, h1 and h2 elements.

The third issue is your form. It looks like you are trying to place a form inside the fieldset which is incorrect

The fieldsets should be inside the form

Also, I don’t think you need all of those section elements.
I would suggest removing those and that will help clean up your code

part of the issue is that your formatting is off.
So it hard to see which elements are nested inside which elements.

In the fcc editor, you can right click and then click on format document

Screenshot 2023-10-16 at 8.45.54 PM
Screenshot 2023-10-16 at 8.45.54 PM1438×748 97 KB

Are you referring to these failing tests?

You should have at least two radio buttons that are descendants of #survey-form .

Your #dropdown should be a descendant of #survey-form .

If so, then I was able to pass those tests once I did some cleanup of your code that I talked about earlier.

I think cleaning up those issues will help you pass some more tests

Hope that helps

2 Likes