Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Having trouble understanding what’s wrong with the checkbox value attributes.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head> 
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    </head>

 <body>
  <div class="title">
    <header class="header">
      <h1 
        id="title"
        class="heading" bold>Broccoli Is Life 
  <div class="broccoli-heading" id="broccoli-heading">
    <img src="https://artfiles.alphacoders.com/610/thumb-61055.jpg" alt="Broccolini">
          </div>
          </h1>
  <p id="description" class="sub-heading" bold>!The Lord Broccolini Beckons!
            </p> </header> </div>
  <form id="survey-form">
    <div class="form-layout">
      <label id="name-label" for="name">Name</label>
        <input
          id="name"
          name="name"
          type="text"
          class="content"
          placeholder="Enter your name"
          Required
           /> </div>
  <form id="survey-form">
    <div class="form-layout">
      <label id="email-label" for="email">Email</label>
        <input
          id="email"
          name="email"
          type="email"
          class="content"
          placeholder="Enter your Email"
          Required/> </div>
  <form id="survey-form">
    <div class="form-layout">
      <label id="number-label" for="age">Age(optional)</label>
        <input
          id="number"
          name="age"
          type="number"
          class="content"
          placeholder="Age"
          min="1"
          max="99"
           </fieldset> </div>
  <form id="survey-form">
    <div class="form-layout">
      <p>Which option best describes your lifestyle?</p>
        <select 
          id="dropdown"
          name="role"
          class="dropdown"
          required/>
        <option disabled selected value>Select current role</option>
        <option id="rawr" value="Rawr">Carnivore </option>
        <option value="Baller">Omnivore </option>
        <option value="Dirty">Vegetarian </option>
        <option value="Fishy">Pescetarian </option>
        <option value="Other">Other</option>
          </select> </div>
    <div class="form-layout">
      <p>Would you consider Broccoli an important part of your life?</p>
       </div>
  <form id="survey-form">
    <div class="dropdown-layout">
      <label for="i'm adddicted">
        <input
          name="radio-content"
          value="I'm addicted"
          type="radio"
          id="i'm addicted"
           />I'm Addicted </label> </div>
    <div class="dropdown-layout">
      <label for="definetly">
        <input
          name="radio-content"
          value="Definetly"
          type="radio"
          id="definetly"
            />Definetly </label> </div>
    <div class="dropdown-layout">
      <label for="most certainly">
        <input
          name="radio-content"
          value="Most Certainly"
          type="radio"
          id="most certainly"
            />Most Certainly </label> </div>
  <form id="survey-form">
    <div class="dropdown-layout">
      <label class="heck no">
        <input
          name="radio-content"
          value="Heck No"
          type="radio"
          id="heck no"
            />Heck No </label> </div>
  <form id="survey-form">
    <div class="dropdown-layout">
      <label for="green devil">
        <input
          name="radio-content"
          value="Green Devil"
          type="radio"
          id="green devil"
            />Green Devil </label> </div> </form>
  <form id="survey-form">
    <div class="form-layout">
      <label id="comment-box" for="comments">How has Broccoli enriched your life? </label> </div>
    <textarea 
          id="comment" 
          name="comment"
          class="textarea2" 
          rols="5" 
          cols="40"
          placeholder="Explain in explict detail!"
                /> </textarea> </label>
  <form id="survey-form">
    <div>
        <p>Would you reccomend the <a class="holy">LORD ALMIGHTY BROCCOLINI</a> to your loved ones? </div>
      <label
          for="broccolini-y"/>YAY 
        <input
          id="broccolini-y"
          name="broccolini-y"
          type="checkbox"
          class="yay"
          value="Positive"/>
        <label
          for ="broccolini-n"/>NAY
        <input
          id="broccolini-n"
          name="broccolini-n"
          type="checkbox"
          class="nay"
          value="Negative"/>
    <fieldset>
      <label 
          for="terms-and-conditions" 
          name="terms-and-conditions"
          class="form-layout">
        <input 
          id="terms-and-conditions" 
          type="checkbox" 
          required name="terms-and-conditions" 
          class="t-c" />I accept the 
        <a href="https://youtu.be/q-_G_Crh6ic?t=15">broccoli almighty 
         </a> </form>
  <form id="survey-form">
      <button id="submit" class="submit">
        <input type="submit" value="Submit"/>
  </fieldset>
 </body>
</html>

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2
  1. <label for ="broccolini-n"> unclosed ‘label’ element.
    2.<label for ="broccolini-y"> ----------unclosed ‘label’ element.
  2. <form id="survey-form"> -------------two times the same id in the code
  3. the last ‘fieldset’ contains an unclosed ‘form’ element
    .
    .
    .
    Use some Html validator on the Web to check everything. There are a lot of conflicts in your code, for example:
    image
    image948×328 9.74 KB

    Two times the ‘id’ attribute with the same value of “survey-form”, after the closing ‘textarea’ tag you have the closing ‘label’ tag but there is no its opening tag…
4

Yeah, I had a lot of mistakes. Used the validator and all is acceptable, but still can’t seem to fix the issue related to: All your checkboxes inside #survey-form should have a value attribute and value.

I’ve changed all the attribute values multiple times within the labels, but not sure what i’m missing.

5 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Broccoli Is Life</title> 
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    </head>
 <body>
  <div class="title">
    <header class="header">
      <h1 
        id="title"
        class="heading">Broccoli Is Life 
    <img src="https://artfiles.alphacoders.com/610/thumb-61055.jpg" alt="Broccolini">
          </h1>
  <p id="description" class="sub-heading">!The Lord Broccolini Beckons!
            </p> </header> </div>
  <form id="survey-form">
    <div class="form-layout">
      <label id="name-label" for="name">Name</label>
        <input
          id="name"
          name="name"
          type="text"
          class="content"
          placeholder="Enter your name"
          Required> </div>
    <div class="form-layout">
      <label id="email-label" for="email">Email</label>
        <input
          id="email"
          name="email"
          type="email"
          class="content"
          placeholder="Enter your Email"
          Required> </div>
    <div class="form-layout">
      <label id="number-label" for="number">Age(optional)</label>
        <input
          id="number"
          name="age"
          type="number"
          class="content"
          placeholder="Age"
          min="1"
          max="99">b</div>
    <div class="form-layout">
      <p>Which option best describes your lifestyle?</p>
        <select 
          id="dropdown"
          name="dropdown"
          class="dropdown"
          required>
        <option disabled selected value>Select current role</option>
        <option value="Rawr">Carnivore </option>
        <option value="Baller">Omnivore </option>
        <option value="Dirty">Vegetarian </option>
        <option value="Fishy">Pescetarian </option>
        <option value="Other">Other</option></select> </div>
    <div class="form-layout">
      <p>Would you consider Broccoli an important part of your life?</p>
       </div>
    <div class="dropdown-layout">
      <label for="i'm-addicted">
        <input
          name="radio-content"
          value="I'm addicted"
          type="radio"
          id="i'm-addicted">I'm Addicted </label> </div>
    <div class="dropdown-layout">
      <label for="definetly">
        <input
          name="radio-content"
          value="Definetly"
          type="radio"
          id="definetly">Definetly </label> </div>
    <div class="dropdown-layout">
      <label for="most-certainly">
        <input
          name="radio-content"
          value="Most Certainly"
          type="radio"
          id="most-certainly">Most Certainly </label> </div>
    <div class="dropdown-layout">
      <label for="heck-no">
        <input
          name="radio-content"
          value="Heck No"
          type="radio"
          id="heck-no">Heck No </label> </div>
    <div class="dropdown-layout">
      <label for="green-devil">
        <input
          name="radio-content"
          value="Green Devil"
          type="radio"
          id="green-devil">Green Devil </label> </div>
    <div class="form-layout">
      <label for="comment">How has Broccoli enriched your life? </label> </div>
    <textarea 
          id="comment" 
          name="comment"
          class="textarea2" 
          rows="3" 
          cols="5"
          placeholder="Explain in explict detail!"> </textarea>
    <div>
        <p>Would you reccomend the <a class="broc">LORD ALMIGHTY BROCCOLINI</a> to your loved ones? </div>
/*ISSUE*/<label
          for="broccolini-y"></label> 
        <input
          id="broccolini-y"
          name="question"
          type="checkbox"
          class="check-box"
          value="positive"> YAY
    <div>
        <label
          for ="broccolini-n"></label>
        <input
          id="broccolini-n"
          name="question"
          type="checkbox"
          class="check-box"
          value="negative"> NAY </div>/*ISSUE*/
      <label 
          for="terms-and-conditions"></label>
        <input 
          id="terms-and-conditions" 
          type="checkbox" 
          required name="terms-and-conditions" 
          class="t-c">I accept the 
        <a href=" /*External link removed for post*/
          </a>
    <label
          for="submit">
        <input id="submit" type="submit" value="Submit">
         </label>
   </form>
 </body>
</html>

type or paste code here

6

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

7

try adding a value to this checkbox?

8

Yep that did it thank you, missed it a thousand times…

1 Like
9

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