Survey Form - Problems with descendant of #survey-form

HTML-CSS
1

I don’t know what I should do. Can someone help me out?
The code is fine except that I should make my inputs, textarea, radio-buttons and so on to be descendant of #survey-form. How do I do that?

Your code so far

<!-- file: index.html -->
<DOCTYPE! html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title">Sports Survey Form</h1>
    <p id="description">Thank you for taking the time to answer all the questions</p>
    <div>
    <form id="survey-form">
      <label id="name-label">
        <p>Name</p>
        <input id="name" type="text" placeholder="Enter your name" class="box" required></input>
      </label>
      <label id="email-label">
        <p>Email</p>
        <input id="email" type="email" placeholder="Enter your Email" class="box" required></input>
      </label>
      <p>Age (optional)</p>
      <label id="number-label" >
        <input id="number" type="number" min="8" max="90" placeholder="Age" class="box"></input>
      </label>
      </div>
      <p>How often do you train per week?</p>
      <select id="dropdown" class="box">
        <option value="" disabled selected hidden>Select current capacity</option>
        <option>1-2 times</option>
        <option>3-5 times</option>
        <option>6-7 times</option>
        <option>more than 7 times</option>
        <option>I don't train currently</option>
      </select>
      <p>Would you like to train more than you currently are?</p>
      <input name="certanity" type="radio" value="yes"> Yes, for sure! <br>
      <input name="certanity" type="radio" value="no"> No, thanks! <br>
      <input name="certanity" type="radio" value="not-sure"> Not sure
      <p>Do you enjoy exercising?</p>
      <select id="dropdown" class="box">
        <option value="" disabled selected hidden>Select an option</option>
        <option>Yes</option>
        <option>No</option>
        <option>I don't mind</option>
      </select>
      <p>Why do you exercise?</p>
      <input type="checkbox" value="healthier"> To be healthier <br>
      <input type="checkbox" value="fitter"> To be fitter <br>
      <input type="checkbox" value="look"> To look better
      <p>Any additional comments?</p>
      <textarea placeholder="Enter your comment here..." cols="20" rows="4"></textarea>
      <p></p>
      <input type="submit" value="Click to submit" id="submit" class="submit">
    </form>
  </body>
</html>

/* file: styles.css */
body {
  font-family: arial, sans-serif;
  text-align: center;
  background-color: rgba(50, 0, 899, 0.2);
  color: rgba(100, 0, 200, 1);
  border-style: solid;
  margin: 10% 5%;
}

.box {
  width: 55%;
  margin: auto;
  text-align: center;
}

.submit {
  width: 55%;
  margin: auto;
  height: 50px;
  background-color: rgba(0, 150, 256, 0.7);
}

h1 {
  font-weight: bold;
  font-variant: small-caps;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

an online html validator will help you fix your code so that you can find the issue with the test

(paste your HTML there and correct as many errors as you know how to. Or if you are unsure how to correct an error, respond back here and we can advise)

3

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