Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
am confused here please can you explain how i can write the following:

  1. You should have an input element with an id of name.

  2. Your #name should have a type of text.

3.Your #name should require input.

  1. Your #name should be a descedant of #survey-form.

    Your code so far

/* file: index.html */
<!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">Survey Form</h1>
  <p id="description" >Please let us know how we can improve freecode camp by answering the following questions</p>
  <form action="https://survey-form.freecodeccamp.rocks" id="survey-form">
  <fieldset>
    <label for="name-label">Enter your first name:<input type="text" id="name" id="name-label" placeholder="First Name" required></label>
    <label for="name-label">Enter your last name: <input type="text" name="name" id="name-label" placeholder="Last Name" required/></label>
    <label for="email-label">Enter your email: <input type="email" name="email" id="email-label"placeholder="Email Address"required/> </label>
    <label for="number-label">Enter your age: <input type="number" name="number" id="number-label" min="10" max="40" placeholder="Age" required /></label>
  </fieldset>
  <fieldset>
    <label for="dropdown">How did you hear about FreeCode Camp
      <select id="dropdown" name="dropdown">
        <option value="">(Select one)</option>
        <option value="1">Youtube</option>
        <option value="2">Google</option>
        <option value="3">From a friend</option>
        <option value="4">others</option>
      </select>
    </label>
  </fieldset>
  <fieldset>
    <p>Please rate us</p>
    <label for="rate"><input type="radio" id="rate" name="excellent"value="excellent" class="block-level" />Excellent</label>
    <label for="rate"> <input type="radio" id="rate" name="Very good" value="Very good" class="block-level">Very Good</input></label>
    <label for="rate"> <input type="radio" id="rate" name="poor" value="Poor" class="block-level">Poor</input></label>
    <p>Where do you want us to improve?</p>
    <label><input type="checkbox" name="checkbox" value="Front-end projects"/>Front-end project</label>
    <label><input type="checkbox" name="checkbox" value="Back-end projects"/>Back-end project</label>
    <label><input type="checkbox" name="checkbox" value="Forum"/>Forum</label>
    <label><input type="checkbox" name="checkbox" value="Wiki"/>Wiki</label>
    
    <label for="bio">Any Comments or suggestions?
      <textarea id="bio" name="bio"row="30"cols="50"placeholder="please type your suggestions here"></textarea>
  </fieldset>
  <input type="submit"value="submit"/>
  </form>

</body>
</html>

/* file: styles.css */
body{
width: 100%;
height: 100vh;
margin: 0;
background-color: #228B22;
color: #000000;
font-family: Verdana;
font-size: 17px;
background-image: url(  https://images.pexels.com/photos/935743/pexels-photo-935743.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);

}
h1, p{
margin: 1em auto;
text-align: center;
}

form {
width: 60vw;
max-width: 500px;
margin: 0 auto;
padding-bottom: 2em;
}

fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #FF1493;
}
feildset:last-of-type{
border-bottom: none;
}

label{
display: block;
margin: 0.5rem 0;
}

input,textarea,select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
}
input, textarea {
background-color: #8B008B;
border: 1px solid #8B008B;
color: #000000;
}

.block-level {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}

input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: #FFFFFF;
border-color: #000000;
min-width: 300px;
}


  **Your browser information:**

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

I’m confused :smile: The first error I am getting with your code is:

“You should have an input element with an id of email.”

The #name input is just fine. Did you mean #email instead?

Look at the id on the email input? Is the value of the id “email”? Or is it something else?

3

I would use an online HTML validator first to make sure all the syntax and broken html is fixed before trying to make the tests pass.
Here’s the one I use:

4

thank you @hbar1st will just try and get back to you if it works
Thank you

5

why does it give 20% completion of the task as I finish the tasks?

6

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