Survey Form - Build a Survey Form

MarisaB · October 18, 2022, 8:16pm

Tell us what’s happening:
i am building my survey app and am confused about what it is saying is wrong
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.

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.

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

hbar1st · October 18, 2022, 8:17pm

MarisaB:

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.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to p

Please edit your post and show us the code

MarisaB · October 18, 2022, 8:20pm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1id="title">YWEB Career Academy Survey</h1>
    <p id="description">Please fill out this form with the required information</p>
<form id="survey-form">
  <label class="labels" id="#name" type="text" required>Name</label>
    <div class="inputs">
      <input id="name" type="text" name="name" placeholder="Enter Your Name" required>
    </div>
    <label class="labels" id="email" type="email">Email</label>
    <div class="inputs">
  <input id="email" type="email" placeholder="Enter Your Email" required>
  </div>
<label class="labels" id="number" type="number">Age</label>
    <div class="inputs">
      <input id="number-label"  required min="12" max="100" type="number" placeholder="Enter Your Age">
    </div>
    <label class="labels" id="name-labels">Which option best describes your current role?</label>
    <div class="inputs">
      <select id="dropdown" type="dropdown">
         <option disabled selected value>Select an option</option> <option id="student">Student</option> 
        <option id="full-job">Full Time Job</option>
         <option id="full-learner">Full Time learner</option> 
         <option id="not-say">Prefer Not To Say</option> 
       </select>
    </div>
    <label>How likely is that you would recommend Yweb to a friend?</label>
    <ul>
      <li><input type="radio" id="definitely" name="recommend"  value="1" checked />
        <label for="louie">Definitely</label></li>
      <li><input type="radio" value="2" class="inputs" id="maybe" name="recommend" />
        <label for="maybe">Maybe</label></li>
      <li><input class="inputs" value="3" type="radio" id="not sure" name="recommend" />
        <label for="not sure">Not Sure</label></li>
        </ul>
    <div class="labels">
      <label>What do you like most in class</label>
      <select type="dropdown">
         <option disabled selected class="inputs" value>Select an option</option>
  <option class="inputs">Challenges</option>
        <option class="inputs">Projects</option>
        <option class="inputs">speakers</option>
        <option class="inputs">Community</option>
        <option class="inputs">the food</option>
        <option class="inputs">breaks</option>
        <option class="inputs">Getting paid to learn</option>
        
      </select>
       </div>
    <div class="labels">
      <label>Things that should be improved in the future<br>
(Check all that apply):</label>
      <div class="inputs">
        <input type="checkbox" value"1">
        <option class="inputs">Front-End-Projects</option>
        </input>
      <input type="checkbox" value="2" >
        <option class="inputs">Back-End-Projects</option>
        <option class="inputs">more time to learn</option>
        </input>
    <input type="checkbox" value="3" >
        <option class="inputs">Videos</option>
        </input>
        <input type="checkbox" value="4" >
        <option class="inputs">Data-Visualization</option>
        </input>
        <input type="checkbox" value="5" >
        <option class="inputs">Open-Source-Community</option>
        </input>
        <input type="checkbox" 
               value="6" >
        <option class="inputs">Gitter-Help-Rooms</option>
        </input>
        <input type="checkbox" value="7"  >
        <option class="inputs">City-Meetups</option>
        </input>
        <input type="checkbox" value="8" expected >
        <option class="inputs">Forum</option>
        </input>
        <input type="checkbox" value="9" >
        <option class="inputs">Additional Courses</option>
        </input>
 <input type="checkbox" value="10"  >
        <option class="inputs">wiki</option>
        </input>
<input type="checkbox" value="11"  >
        <option class="inputs">Challenges</option>
</input>
</ul>
<div class="labels">
  <label>Any Comments or Suggestions?</label>
</div>
</div>
<div class="inputs">
  <textarea placeholder="Enter Your Comment Here...."></textarea>
</div>
      </div>
    </div>

  <button type="submit" id="submit">Submit</button>

  </form>
</div>
       
     

  </input>

</form>
****html  below***
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1id="title">YWEB Career Academy Survey</h1>
    <p id="description">Please fill out this form with the required information</p>
<form id="survey-form">
  <label class="labels" id="#name" type="text" required>Name</label>
    <div class="inputs">
      <input id="name" type="text" name="name" placeholder="Enter Your Name" required>
    </div>
    <label class="labels" id="email" type="email">Email</label>
    <div class="inputs">
  <input id="email" type="email" placeholder="Enter Your Email" required>
  </div>
<label class="labels" id="number" type="number">Age</label>
    <div class="inputs">
      <input id="number-label"  required min="12" max="100" type="number" placeholder="Enter Your Age">
    </div>
    <label class="labels" id="name-labels">Which option best describes your current role?</label>
    <div class="inputs">
      <select id="dropdown" type="dropdown">
         <option disabled selected value>Select an option</option> <option id="student">Student</option> 
        <option id="full-job">Full Time Job</option>
         <option id="full-learner">Full Time learner</option> 
         <option id="not-say">Prefer Not To Say</option> 
       </select>
    </div>
    <label>How likely is that you would recommend Yweb to a friend?</label>
    <ul>
      <li><input type="radio" id="definitely" name="recommend"  value="1" checked />
        <label for="louie">Definitely</label></li>
      <li><input type="radio" value="2" class="inputs" id="maybe" name="recommend" />
        <label for="maybe">Maybe</label></li>
      <li><input class="inputs" value="3" type="radio" id="not sure" name="recommend" />
        <label for="not sure">Not Sure</label></li>
        </ul>
    <div class="labels">
      <label>What do you like most in class</label>
      <select type="dropdown">
         <option disabled selected class="inputs" value>Select an option</option>
  <option class="inputs">Challenges</option>
        <option class="inputs">Projects</option>
        <option class="inputs">speakers</option>
        <option class="inputs">Community</option>
        <option class="inputs">the food</option>
        <option class="inputs">breaks</option>
        <option class="inputs">Getting paid to learn</option>
        
      </select>
       </div>
    <div class="labels">
      <label>Things that should be improved in the future<br>
(Check all that apply):</label>
      <div class="inputs">
        <input type="checkbox" value"1">
        <option class="inputs">Front-End-Projects</option>
        </input>
      <input type="checkbox" value="2" >
        <option class="inputs">Back-End-Projects</option>
        <option class="inputs">more time to learn</option>
        </input>
    <input type="checkbox" value="3" >
        <option class="inputs">Videos</option>
        </input>
        <input type="checkbox" value="4" >
        <option class="inputs">Data-Visualization</option>
        </input>
        <input type="checkbox" value="5" >
        <option class="inputs">Open-Source-Community</option>
        </input>
        <input type="checkbox" 
               value="6" >
        <option class="inputs">Gitter-Help-Rooms</option>
        </input>
        <input type="checkbox" value="7"  >
        <option class="inputs">City-Meetups</option>
        </input>
        <input type="checkbox" value="8" expected >
        <option class="inputs">Forum</option>
        </input>
        <input type="checkbox" value="9" >
        <option class="inputs">Additional Courses</option>
        </input>
 <input type="checkbox" value="10"  >
        <option class="inputs">wiki</option>
        </input>
<input type="checkbox" value="11"  >
        <option class="inputs">Challenges</option>
</input>
</ul>
<div class="labels">
  <label>Any Comments or Suggestions?</label>
</div>
</div>
<div class="inputs">
  <textarea placeholder="Enter Your Comment Here...."></textarea>
</div>
      </div>
    </div>

  <button type="submit" id="submit">Submit</button>

  </form>
</div>
       
     

  </input>

</form>

hbar1st · October 18, 2022, 10:04pm

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

hbar1st · October 18, 2022, 10:05pm

I noticed that you have 2 closing form tags.
Does that mean that you have 2 forms in this html?

MarisaB · October 19, 2022, 6:37pm

what does this mean?

You should have an h1 element with an id of title.
Failed:Your #title should not be empty.

hbar1st · October 19, 2022, 6:38pm

try fixing this line so that there is a space between the h1 and the id

MarisaB · October 19, 2022, 6:39pm

also * You should have a label element with an id of name-label.

Failed:You should have a label element with an id of email-label.
Failed:You should have a label element with an id of number-label.
Failed:Your #name-label should contain text that describes the input.
Failed:Your #email-label should contain text that describes the input.
Failed:Your #number-label should contain text that describes the input.
Passed:Your #name-label should be a descendant of #survey-form.
Failed:Your #email-label should be a descendant of #survey-form.
Failed:Your #number-label should be a descendant of #survey-form.
Passed:Your #name should have a placeholder attribute and value.
Failed:Your #email should have a placeholder attribute and value.

system · April 20, 2023, 6:39am

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

Topic		Replies	Views
Survey Form - Build a Survey Form HTML-CSS	2	169	October 10, 2023
Survey Form - Build a Survey Form HTML-CSS	2	98	August 15, 2024
Survey Form - Build a Survey Form HTML-CSS	3	251	August 24, 2023
Survey Form - Build a Survey Form HTML-CSS	2	106	July 30, 2024
Survey Form - Build a Survey Form HTML-CSS	2	179	February 3, 2024

Survey Form - Build a Survey Form

Related topics