Survey Form - Build a Survey Form

Tell us what’s happening:
I have develope the app.
all test pass except on that is “Your #name should require input.” but my code have required attribute eventually my code did not pass the test i dont know.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">
      Thank you for taking the time to help us improve the platform
    </p>
    <form id="survey-form">
      <div>
        <label id="name-label" for="name"
  >Name<input type="text" id="name" 
name="name"          placeholder="ENTER YOUR NAME" required</label>
      </div>
      <div>
        <label id="email-label"
          >Email<input type="email" id="email" 
name="email"          placeholder="ENTER YOUR EMAIL"
          required
        </label>
      </div>
      <div>
        <label id="number-label"
          >Age<input 
          required
id="number"          type="number" name="age" placeholder="ENTER YOUR AGE"
          min="13" max="120"</label
        >
      </div>
      <div>
        <label for="dropdown"
          >Which option best describes your current role?
          <select id="dropdown">
            <option value="">select current role</option>
            <option value="1">student</option>
            <option value="2">full time job</option>
            <option value="3">full time learner</option>
            <option value="4">prefer not to say</option>
            <option value="5">other</option>
          </select>
        </label>
      </div>
      <div>
        <label>Would you recommend freeCodeCamp to a friend?</label
        ><label>
          <input
            type="radio"
            name="radio"
            value="definetly"
            class="inline"
          />Definetly
        </label>
        <label>
          <input type="radio" name="radio" value="maybe" class="inline" />Maybe
        </label>
        <label>
          <input type="radio" name="radio" value="not sure" class="inline" />Not
          sure
        </label>
      </div>
      <div>
        <label>What would you like to see improved?</label>
        <label
          ><input
            type="checkbox"
            name="checkbox"
            value="Front-end"
            class="inline"
          />Front-end Projects</label
        >
        <label
          ><input
            type="checkbox"
            class="inline"
            name="checkbox"
            value="Back-end"
          />Back-end Projects</label
        >
        <label
          ><input
            type="checkbox"
            name="checkbox"
            value="Open Source Community"
            class="inline"
          />Open Source Community</label
        >
        <label>
          <input
            value="Forum"
            type="checkbox"
            name="checkbox"
            class="inline"
          />Forum
        </label>
        <label>
          <input
            name="checkbox"
            class="inline"
            value="Additional Courses"
            type="checkbox"
          />Additional Courses
        </label>
      </div>
      <div>
        <label for="textarea"
          >Any comments or suggestions?
          <textarea
            name="textarea"
            cols="30"
            rows="4"
            placeholder="ENTER YOUR COMMENTS HERE..."
          ></textarea>
        </label>
      </div>
      <div>
        <label> <button type="submit" id="submit" class="sub" />submit </label>
      </div>
    </form>
  </body>
</html>

Replace these two sentences with your copied code.
Please leave the line above and the line below,
because they allow your code to properly format in the post.

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    background-color: #1b1b32;
    color: #f5f6f7;
    font-family: Tahoma;
    font-size: 16px;
  }
  
h1, p {
    margin: 1em auto 16px auto;
    text-align: center;
  }
p{
      padding-bottom: 40px;
      margin-top: 2px;
      
  }
  
  form {
    width: 60vw;
    max-width: 500px;
    min-width: 300px;
    margin: 0 auto;
    padding-bottom: 2em;
  }
  label {
    display: block;
    margin: 0.5rem 0;
  }
  input,
textarea,
select {
  margin: 10px 0 0 0;
  min-height: 2em;
  width: 100%;
}
.inline {
    width: unset;
    margin: 0 0.5em 0 0;
    vertical-align: middle;
  }
  
.sub{
    display: block; 
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: #f1c917;
    border:none;
    min-width: 300px;
  }
  div{
      padding: 10px 5px;
  }
  

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Here’s a tip

always remember to close all your tag both the ones that have opening and closing and the self closing tag

1 Like

Hi!
I advise running your html code though this html validator. I’m seeing unclosed elements.

https://validator.w3.org/nu/#textarea

I also advise indenting your code. This will make it easier to find mistakes.

1 Like

oops thank you… its my first time so i dont know.once again thank you

1 Like

No problem! It was everyone’s first time once after all.

Also if you want to reply to someone directly so they will see a notification that you replied, press the text that says ‘reply’ next to the left pointing arrow.