Survey Form - Build a Survey Form

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">
<meta charset="UTF-8">
<title>Food Survey Form</title>
<link rel="stylesheet" href="styles.css"/>
<h1 id="title">Meal Survey Form</h1>
<p id="description">Let me know what your favorite food is!</p>
 <form method="post" action=''id="survey-form">
        <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>
        <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>
        <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="" /></label>
  <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 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>
        <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 for="terms-and-conditions">
        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="">terms and conditions</a>
      <input type="submit" value="Submit" id="submit"/> </form>
/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  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;

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;
  min-width: 300px;

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

  display: inline; 

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

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.

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.

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.