Survey Form - Build a Survey Form

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Favorite Book Genre Survey</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 id="title">Favorite Book Genre Survey</h1>
    <p id="description"> Please fill out this survey regarding your favorite book genre preference</p>
    <form id="survey-form">
      <div class="form-group">
     <label id="name-label"for="name">Enter your name: <input id="name"type="text"placeholder="enter your name here" required /></label>
   </div>
   <form id="survey-form">
   <div class="form-group">
   <label id="email-label" for="email">Enter your email: <input id="email" name="email" type="email"placeholder="enter youe email here" required /></label>
  </div>
  <br>
  <div class="form-group">
    <label id="number-label"for="age">Age</label>
    <input id="number"name="age"type="number"placeholder="your age"min="18"max="110">
    </div>
    <h2>How do you like your book genre?</h2>
    <div>
      <label for="book genre Preferences">Book Genre preferences</label>
      <select id="novels"name="book genre preferences">
        <option value="novels">Novels</option>
        <option value="stories">Stories</option>
        <option value="history">History</option>
        </select>
          <h3>Do you read books every day?</h3>
          <div>
            <label for="time of day">Every day</label>
            <input id="morning"value="morning"input type="radio"name="morning">Morning</label>
            <input id="noon"value="noon"type="radio"name="noon">Noon</label>
    <input id="evening"value="evening"input type="radio"name="evening">Evening</label>
    <input id="late night"value="late night"input type="radio"name="late night">Late Night</label>
    </div>
    <br>
    <div class="rowtab">
    <div class="labels">
      <Label for="preferences">How many pages of books do you read?</label>     
      </div>     
 <ul id="preferences"style="list-style: none;">
 <li class="checkbox"><label><input name="prefer" value="1" type="checkbox"class="userRatings">Ten</input></label></li>
  <li class="checkbox"><label><input name="prefer" value="2" type="checkbox"class="userRatings">Fifty</input></label></li>
  <li class="checkbox"><label><input name="prefer" value="3" type="checkbox"class="userRatings">One Hundred</input></label></li>
  </ul>
<label>Reviews of book lovers</label>
<div id="message">
  <textarea type="message" placeholder="type message here"></textarea>
  </div>
  <input type="submit" id="submit"> </input>    
   </form>
</body>
</html>
/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
}

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

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

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}

fieldset: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: #0a0a23;
  border: 1px solid #0a0a23;
  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;
}

input[type="file"] {
  padding: 1px 2px;
}


Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

  • your given select “id” is not same as what asked in instructions
  • radio buttons are not same “group”, i.e. they all need to be of same “name” value

address those changes and it should be alright, happy coding :slight_smile:

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