Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

I’m not sure what’s wrong with the code I’m stumped. All your checkboxes inside #survey-form should have a value attribute and value. I’ve made a value attribute with a value but it still says there isn’t one.

I also wanted to make my check box section be like how it’s supposed to be in the example but I’ve tried almost everything and i just managed to make it inline.

Any help or hints would be appreciated.

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">M's Car Detailing Survey</h1>

    <p id="description">Please Help M's Detailing Service by filling out this quick Survey!</p>

  <form method="post" action='https://register-demo.freecodecamp.org' id="survey-form">

<fieldset>

      <Label id="name-label">Name: <input id="name" type="text" required placeholder="First name (last name optional)"></label>


      <Label id="email-label">Email Address:<input id="email" type="email" Required placeholder="Enter a valid email address"></label>

      <Label id="number-label">Satisfaction Score<input id="number" type="number" Min="1" Max="10" required placeholder="(Must be a 1-10 value)"></label>

</fieldset>

     <label for="referrer">How likely would you be willing to reference us? 

 <fieldset>  

<select id="dropdown" required>
  <option value=""> (Choose One)</option>
  <option>Highly Likely</option>
  <option>Likely</option>
  <option>Neutral</option>
  <option>Unlikely</option>
  <option>Highly Unlikely</option>  </select>
  </label>

</fieldset>

<fieldset>

  <legend>Would you hire our services the next time?</legend>

  <label for="yes"><input id="yes" type="radio" name="How likely" class="inline" checked value="1"> Yes </label>

  <label for="no"><input id="no" type="radio" name="How likely" class="inline" value="2"> No </label>

  <label for="maybe"><input id="maybe" type="radio" name="How likely" class="inline" value="3"> Maybe </label>

</fieldset>

<fieldset>

<Legend>What are some things we can improve on?</legend>

<input type="checkbox" value="1" class="inline">Affordablity</input>

<input type="checkbox" value="2" class="inline">Customer Service</input>

<input type="checkbox" value="3" class="inline">Flexibiltiy</input>

<input type="checkbox" value="4" class="inline">Detaling options</input>

<input type="checkbox" value="5" class="inline">Nothing everything is great!</input>


</fieldset>

<legend>Any final comments about our service.</legend>

  <textarea id="comments" rows="3" cols="30" placeholder="Any final comments?"></textarea>

  <input class="inline" id="answers-are-truthful" type="checkbox" name="answers-are-truthful" required/>The answers above are mine and truthful to my experience with M's Detailing Service. </input>
      
<input id="submit" value="submit" type="submit"/>

 </form>
  </body>
  </html>

/* file: styles.css */
Body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Arial;
  font-size: 18px;
}

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

form {
  margin: auto;
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
}

fieldset {
  padding: 1.5rem 0;
  border: none;
border-bottom: 3px solid white
}

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

label[type="number"] {
  width: 100px;
}

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

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

Input[type="submit"]{
  display: block;
  width: 70%;
  margin: 3em auto;
  font-size: .8em;
  border-color: white;
  background-color: #3b3b4f;
  min-width: 260px;
  }

.inline {
  display: inline;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2 Safari/605.1.15

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

“All your checkboxes inside #survey-form should have a value attribute and value.”

How many check boxes do you have? Don’t forget about the one at the bottom of the page.

4

Oh my god you’re right I forgot I had that one I thought I was going crazy thanks so much for the hint.

1 Like
5

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