Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Hello I think i have done everything correctly but it wont pass
any hints ?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Delivery Survey Form</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  
  <body>
    <h1 id="title"> Delivery Survey Form </h1>
    <p id="description"> Please fill out this form feedback form.</p>
<form id="survey-form">
  <fieldset class="general"
  <label for="name" id="name-label"> Name*<input class="space" id="name" placeholder="Mr/Mrs/Ms"type="text" required/></label>
  
    <label for="email" id="email-label"> Email* <input class="space" id="email" placeholder="stevencharmy@gmail.com" type="email" required/></label>
  
  <label for="number" id="number-label">Number<input class"space" id="number" type="number" min="13" max="120" placeholder="+77" /></label>
  
  <label for="occupation">Occupation
    <select class="select" id="dropdown">
      <option>Select one </option>
      <option>Student</option>
      <option>Employed</option>
      <option>Self employed</option>
      <option>Retired</option>
 </select></label>
 <fieldset class="fix"><legend>Customer category</legend>
   <label for="regular=cutomer"><input id="regular-customer" type="radio" value="regular" name="customer-category" class="set" checked />Regular</label>
   <label for="non-regular"><input  id="non-regular" type="radio" value="non-regular"name="customer-category" class="set"/>Non Regular</label></fieldset>
   <fieldset class="expand"<div><legend>How would you rate us?</legend>
   <div class="orderly"><input id="very-good" type="checkbox" name="rate" value="very-good" checked/><label for="very-good">Very good</label></div>
  <div class="orderly"><input id="good" type="checkbox" name="rate" value="good"/><label for="good">Good</label></div>
  <div class="orderly"><input id="satisfied" type="checkbox" name="rate" value="satisfied"/><label for="satisfied">Satisfied</label></div>
  <div class="orderly"><input id="fair" type="checkbox" name="rate" value="fair"/><label for="fair">Fair</label></div>
  <div class="orderly"><input id="bad" type="checkbox" name="rate" value="bad"/><label for="bad">Bad</label></div>
   
   <label class="distance" for="experience">Share your experience(optional)<textarea id="experience" name="experience" rows="4" cols="20" placeholder="I had a great experience..."></textarea></label>
   </fieldset>
   <input type="submit" id="submit" value="Submit"/>
   </fieldset>

</form>
    

  </body>
  
  <body>

/* file: styles.css */
body{
  background-color: rgb(23,117,30);
  color:rgb(255,255,255);
}
form{
  width:60vw;
  margin:0 auto;
  margin-right:auto;
  margin-left:auto;
}
h1,p{
  text-align:center;
  margin-top:10px;
  margin-bottom:10px;
}
.space{
margin-bottom:10px;
}
textarea{
  width:100%;
  margin-left:0 auto;
  margin-right:0 auto;
  background-color:rgb(0,13,78);
  color:white;
  }
label{
  display:block;
  
}
input{
  width:100%;
  background-color:rgb(0,13,78);
  color:white;
  position:relative;
}  
input[type="submit"]{
  display:block;
  width:30%;
  background-color:rgb(0,13,78);
  color:white;
}
input[type="text"],[type="email"],[type="number"]{
  min-height:2em;
  text:18px;
}
.general{
  width:50vw;
  margin-left:auto;
  margin-right:auto;
  margin-top:15px;
  max-width:70%;
  }
.expand{
  height:40vh;
  border-top:;
}
.distance{
  width:100%;
}
.set{
  width:unset;
  display:inline;  
}
.fix,select{
  margin-bottom:10px;
  margin-top:10px;
}

.orderly{
display:flex;
margin-left:0;
margin-right:0;
}
[type="checkbox"]{
width:unset;
color:black;
}
.select{
background-color:#3f3f4f;
color:white;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

what errors are you seeing?

3

Hey Buddy Hints will only get passed when you do Code accordingly.

If you have any issue kindly let us know , paste your code here.

Hope You Understand !!

4

It says I should give the name label and Id with attribute Name-Label , I have done it but it still won’t pass

5

it can’t see your label because your fieldset tag is missing the >

6

Hi @Steven1987,

If this is the part that is causing you problems, it may be due to the label for is not the same as the id of the input.

You may also come across another problem:

You should not have more than 1 body in the html document. The last element starts a new body.

Hope that helps you.