Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

I have done everything else, but it says that I need a value attribute in order to finish my survey, but I already did and I’ve tried many other things and my radio value works but my checkbox one doesn’t.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Food Survey Form</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<h1 id="title">Meal Survey Form</h1>
<p id="description">Let me know what your favorite food is!</p>
 <form method="post" action='https://register-demo.freecodecamp.org'id="survey-form">
  <fieldset>
        <legend>Sweet or Salty? (required)</legend>
        <label for="salty" id="name-label"><input id="salty" type="radio" name="food-type" class="inline" checked value="radio"/> Salty</label>
        <label for="sweet"><input id="sweet" type="radio" name="food-type" class="inline" value="radio"/> Sweet</label>
      </fieldset>
      <fieldset>
        <legend>Apples or Oranges? (pick one)</legend>
        <label for="Oranges" id="name-label"> <input  value="checkbox" id="fruit" type="checkbox" name="Oranges" class="inline" checked /> Oranges</label>
        <label for="Apples"> <input value="checkbox" id="fruit" type="checkbox" name="Apples" class="inline"/> Apples</label>
      </fieldset>
      <fieldset>
        <label for="favorite-food">Whats your favorite food? <input id="name" name="favorite-food" type="text" required placeholder="Enter here"/></label>
        <label id="name-label" for="favorite-drink">What's your favorite drink? <input id="name" name="favorite-drink" type="text" required placeholder="Enter your drink"/></label>
        <label for="dessert"> What's your favorite dessert?<input id="dessert" name="dessert" type="password"  required placeholder="Enter favorite dessert" /></label>        
<label for="email" id="email-label">Enter Your Email: <input id="email" name="email" type="email" required placeholder="ex:bananaman39@something.com" /></label>
      </fieldset>
      <fieldset>
  <label for="profile-picture">Upload a profile picture of your ideal meal: <input id="profile-picture" type="file" name="file" /></label>
        <label for="age" id="number-label">Enter the amount of nuggets you could eat: <input id="number" type="number" name="age" min="2" max="120" placeholder="nugs"/>
</label>
        <label for="referrer">Favorite food type?
          <select id="dropdown" name="referrer">
            <option value="">(select one)</option>
            <option value="1">Salty</option>
            <option value="2">Savory</option>
            <option value="3">Sweet</option>
            <option value="4">Spicy</option> <option value="4">Bitter</option>
          </select>
        </label>
        <label for="bio">Tell us about any allergies you have:
          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="peanuts, dogs, cherries, etc."></textarea>
        </label>
      </fieldset>
      <label for="terms-and-conditions">
        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
      </label>
      <input type="submit" value="Submit" id="submit"/> </form>
</body>
</html>

/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color:DodgerBlue;
  color:DarkSlateGrey;
  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:;
  border-color:#3b3b4f;
  min-width: 300px;
}

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

.inline{
  display: inline; 
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Hello, it looks like the HTML is were some of the problems may be, you are missing an opening form tag . Also you have a checked attr but no value at the end of one of the elements.

3

User story 14 says:

  1. Inside the form element, you can select several fields from a series of checkboxes, each of which must have a value attribute

On Oranges and Apples try a different value to “checkbox”. Not sure if having checkbox for both type and value throws it.

4

Remove the id attribute and it’s value from label element. And your for attribute value should match with the id attribute value for both input type checkbox and radio element.