Survey Form - Build a Survey Form

Tell us what’s happening:
Describe your issue in detail here.
I am confused on the requirement:
You should have at least one textarea element that is a descendant of #survey-form .
I’ve tried a variety of approaches, but currently can’t find the correct one.
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styles.css" 
            type="text/css" 
            rel="stylesheet">
    <title>Survey</title>
</head>

<body>
  <h1 id="title">Survey
  </h1>
  <p id="description">
    This is a survey of how well you like this survey!
  
  </p>
<fieldset>
<form action="https://survey-form.freecodecamp.rocks" id="survey-form">
  <label id="name-label" for="first-name">Enter First Name: 
    <input id ="name" type="text" placeholder="Full Name" required>
  </label>
  <label id="email-label" for="email"> Enter Email Address: 
    <input id="email" type="email" placeholder="Email Address" required>
    </label>
    <label id="number-label" for="number"> Enter Phone Number: 
    <input id="number" type="number" placeholder="(###)###-####" required min="10" max="11">
    </label>
    <label id="radio-label" for="radio"> Cats or Dogs: 
    <label id="cats-label" for="cats"><input id="cats" type="radio" name="cats-dogs" class="inline" value="dogs-cats" /> Cats </label>
        <label id="dogs-label" for="dogs"><input id="dogs" type="radio" name="cats-dogs" class="inline" value="dogs-cats" /> Dogs</label>
        <label id="terms-and-conditions-label" for="terms-and-conditions">
          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" value="value"> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/" target="_blank">terms and conditions</a>
        </label>
        <label id="awesome-label" for="awesome">
          <input id="awesome" type="checkbox" required name="awesome" class="inline" value="value1" /> I accept that this survey is awesome!
    </label>
    <label id="dropdown-label" for="dropdown">Please rank this Survey!
          <select id="dropdown" name="dropdown">
            <option value="">(select one)</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
          </select>
        </label> 
  </form>
<form id ="survey-form" for="textarea">
  <label is="textarea-label" for="textarea"> You can type stuff here if you want!
    <input id="textarea" type ="textarea" placeholder="Typing space">
  </label>
</form>
</fieldset>
<form id="survey-form" action="submit">
<label id="submit-form">
<input id="submit"type="submit" value="Submit" /> 
</label>
</form>
</body>
</html>
/* file: styles.css */
body {
    width: 100%;
    height: 100vh;
    margin: 0;
    background-color:black;
    color: #f5f6f7;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 16px;
  }
  
  h1, p {
    margin: 1em auto;
    text-align: center;
  }
  
  form {
    width: 64vw;
    max-width: 500px;
    min-width: 300px;
    margin: 0 auto;
    padding-bottom: 4em;
  }
  
  fieldset {
    border: none;
    padding: 1rem 0;
    border-bottom: 3px solid darkgrey;
  }
  
  fieldset:last-of-type {
    border-bottom: none;
  }
  
  label {
    display: block;
    margin: 0.8rem 0;
  }
  
  input,
  textarea,
  select {
    margin: 8px 0 0 0;
    width: 100%;
    min-height: 1em;
  }
  
  input, textarea {
    background-color: #0a0a23;
    border: 1px solid #0a0a23;
    color: #ffffff;
  }
  
  
  input[type="submit"] {
    display: block;
    width: 35%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: #3b3b4f;
    border-color: white;
    min-width: 300px;
  }
  
  input[type="file"] {
    padding: 1px 2px;
  }

  a {
    color:dfdfe2;
  }
  .inline {
    width: unset;
    margin: 0 0.5em 0 0;
    vertical-align: middle;
  }

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Hi there! Welcome to the community.

You’re on the right path. Textarea is not defined using the input tag. It is a separate HTML element using <textarea>.

I also noticed you have a typo in one of your labels attributes:

1 Like

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