Survey Form - Build a Survey Form

You should have a label element with an id of email-label .

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css" >
  <title>Survey form<title>
    <head>
<body>
  <h1 id="title">Survey form</h1>
  <p id="description">kindly fill in the form with required information</p>

  <form id="survey-form" method="post">
    <fieldset>
<Label for="name-label">
  name:<input id="name"  name="name"type="text" placeholder="name" required>
  </label>
  <Label for="email-label">
  email:<input id="email" name="email" type="email" placeholder="email" required>
</label>
  <Label for="number-label">
number:<input id="number" name="number" type="number" min="5" max="10" placeholder="number">
  </label>
  </fieldset>

  <fieldset>
    <label for="employed"><input id="employed" type="radio" name="working-status" class="inline">

    </label>
    <label for="unemployed"><input id="unemployed" type="radio" name="working-status" class="inline">
</label>
</label>
    <label for="under-employed"><input id="under-employed" type="radio" name="working-status" class="inline">
</label>

<h2>SCHOOL QULIFICATION</h2>

<label for="school qulification">
<input id="school qulification" type="checkbox" class="inline">bachelor's degree
</label>

<label for="school qulification">
<input id="school qulification" type="checkbox" class="inline">diploma
</label>

<label for="school qulification">
<input id="school qulification" type="checkbox" class="inline">post-graduate
</label>

</fieldset>

<fieldset>
    <label for="dropdown">How did you hear about us?
         <select id="dropdown" name="dropdown">
<option value="">(select one)</option>
<option value="1">radio</option>
<option value="2">television</option>
<option value="3">social media</option>
<option value="4">newspaper</option>
         </select>
    </label>
    <label for="bio">statment of purpose:
          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="input statement in here..."></textarea>
    </label>
  </fieldset>
  <input type="submit" value="Submit" />
</form>
</body>
</html>
/* file: styles.css */
body{
  width:100%;
  height:100vh;
  margin:0;
  background-color:#330000;
  color:#f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
  }
  h1,h2,p{
    margin:1em auto;
    text-align:center;
  }
  form{
  width:600vw;
  max-width: 500px;
  min-width: 300px;
  margin:0 auto;
  padding-bottom:2em;
  }
  fieldset{
    border:none;
    padding:2rem 0;
    border-bottom:3px solid 
 #b30000;
  }
  label{
    display:block;
    margin:0.5em 0;
  }
  input,
  textarea,
  select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}
input, textarea {
  background-color: #1a0000;
  border: 1px solid #1a0000;
  color: #ffffff;
}
.inline {
  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: #3b3b4f;
  border-color: white;
  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/115.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Welcome to our community!

You have an unclosed element: <title>Survey form<title>

here, you can see that the ‘for’ and ‘id’ attributes have the same value:

<label for="employed"><input id="employed" ...

In your code, this is not the case.

thank you, i am having a problem with the placement of the “id” in my code

All of your ‘label’ elements should have an ‘id’ attribute. The ‘id’ attribute must be unique. So, it should differ from the id put in the corresponding ‘input’ element.

This is an example:

<label id="smth-label">Text
   <input type="smth" id="smth" required placeholder="Text">
</label>

This is guidance.

1 Like

thanks for the guidance. finally completed the form.

1 Like

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