Survey Form - Build a Survey Form

HTML-CSS
1

Every radio button group should have at least 2 radio buttons.
I need your help on this matter!!!

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>Book Genre preferences?</h2>
    <div>
      <select id="dropdown">
        <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><input type="radio"id="yes"value="yes"name="yes"/>Yes</label>
<label><input type="radio"id="no"value="no"name="no"/>No</label></br>
    </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: Serif;
  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: 1.5em;
}

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

2

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!

3

Hello @Gamzeklkn !

To make a group of radio buttons, the name should be the same for them.

<input type="radio"  value="yes"  name="choice">
<input type="radio"  value="no"  name="choice">
<input type="radio"  value="maybe"  name="choice">

This is a group of three.

I hope this helps you.

Happy coding
1 Like
4

Give the input tags here the same name attribute value, that’s how we group radio buttons.