Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

It won’t detect the value attributes I’ve added for the checkboxes.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>D&D Survey Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 id="title">D&D Survey Form</h1>
    <p id="description">Thank you for taking the time to fill out this short survey regarding D&D VTTs and books</p>
    <br>
    
    <p>Please provide the information below: </p>
    <form id="survey-form" method="post" action='https://register-demo.freecodecamp.org'>
      
        <label id="name-label" for="name">Enter Your Name: <input id="name" name="name" type="text" placeholder="JohnDoe" required /></label>
        <label id="email-label" for="email">Enter Your Email: <input id="email" name="email" type="email" placeholder="johndoe@domain.com" required /></label>
        <label id="number-label" for="number">Input Phone Number: <input id="number" name="number" type="number" min="8" max="10" placeholder="901123123" required /></label>
        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
        <p class="inline">I am a...</p>
        <label for="player-character" class="inline"><input id="player-character" type="radio" name="player-type" class="inline" value="player-character" checked /> Player</label>
        <label for="dungeon-master" class="inline"><input id="dungeon-master" type="radio" name="player-type" class="inline" value="dungeon-master" /> Dungeon Master</label>
       
<p>Which physical books do you own? Select all that apply: </p>
        <label for="PHB"><input value="PHB" id="PHB" type="checkbox" name="books" class="inline"/>Player's Handbook (2014)</label>
        <label for="DMG"><input value="DMG" id="DMG" type="checkbox" name="books" class="inline"/>Dungeon Master's Guide (2014)</label>
        <label for="MoM"><input value="MoM" id="MoM" type="checkbox" name="books" class="inline"/>Monster Manual (2014)</label>
        <label for="MPMM"><input value="MPMM" id="MPMM" type="checkbox" name="books" class="inline"/>Mordenkainen Presents: Monsters of the Multiverse</label>   
        <label for="XGE"><input value="XGE" id="XGE" type="checkbox" name="books" class="inline"/>Xanathar's Guide to Everything</label>
        <label for="TCoE"><input value="TCoE" id="TCoE" type="checkbox" name="books" class="inline"/>Tasha's Cauldron of Everything</label>

        <label for="dropdown">What VTT do you use to play Dungeons and Dragons?
          <select id="dropdown" name="dropdown">
            <option value="">(select one)</option>
            <option value="1">D&D Beyond</option>
            <option value="2">Roll20</option>
            <option value="3">TaleSpire</option>
            <option value="4">Owlbear Rodeo</option>
            <option value="5">Other</option>
          </select>
        </label>
        <label for="other-vtt">Others:
          <textarea id="other-vtt" name="other-vtt" rows="3" cols="30" placeholder="I don't use VTTs..."></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 id="submit" type="submit" value="Submit" />
      </fieldset>
    </form>
  </body>
</html>

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, 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 (').

1 Like
3

Sorry, done editing! I’m not sure if I’m supposed to include the whole thing (from the DOCTYPE)

4

Please include everything

1 Like
5

Hey buddy, Can you please define your problem a little more, so that we will be able to help you.

Hope You will definitely do it.

1 Like
6

Hey, thanks!

Ok, so I think I got everything according to the requirements/specs, but I can’t seem to get this one requirement credited:

Failed: All your checkboxes inside #survey-form should have a value attribute and value.

Strangely enough, removing <fieldset> earlier resolved the one below, but it doesn’t detect the value attribute itself within the <input type="checkbox">

You should have at least two input elements with a type of checkbox (checkboxes) that are descendants of #survey-form .

7

Just fyi, fieldsets should be defined inside of forms: and legends are supposed to be defined inside of fieldsets.

1 Like
8

changed both <legend> to <p>, just to see what would happen. Still marking as failed though

9

Buddy to tackle this , You need to put value attribute with it’s value.

<input type="radio" value="radio button">

For this section here you need to put 2 input need to assign it’s type to checkbox.

If still you have any issue , kindly prove us your code.

10

Sorry, dont think I understand. Are you saying i should set value to “checkbox”? I have satisfied the other value requirements for the other input types (e.g. radio) but the checkbox just won’t work.

<label for="PHB"><input value="PHB" id="PHB" type="checkbox" name="books" class="inline"/>Player's Handbook (2014)</label>
        <label for="DMG"><input value="DMG" id="DMG" type="checkbox" name="books" class="inline"/>Dungeon Master's Guide (2014)</label>
        <label for="MoM"><input value="MoM" id="MoM" type="checkbox" name="books" class="inline"/>Monster Manual (2014)</label>
        <label for="MPMM"><input value="MPMM" id="MPMM" type="checkbox" name="books" class="inline"/>Mordenkainen Presents: Monsters of the Multiverse</label>   
        <label for="XGE"><input value="XGE" id="XGE" type="checkbox" name="books" class="inline"/>Xanathar's Guide to Everything</label>
        <label for="TCoE"><input value="TCoE" id="TCoE" type="checkbox" name="books" class="inline"/>Tasha's Cauldron of Everything</label>
11 
<label for="PHB"><input value="PHB" id="PHB" type="checkbox" name="books" class="inline"/>Player's Handbook (2014)</label>
        <label for="DMG"><input value="DMG" id="DMG" type="checkbox" name="books" class="inline"/>Dungeon Master's Guide (2014)</label>
        <label for="MoM"><input value="MoM" id="MoM" type="checkbox" name="books" class="inline"/>Monster Manual (2014)</label>
        <label for="MPMM"><input value="MPMM" id="MPMM" type="checkbox" name="books" class="inline"/>Mordenkainen Presents: Monsters of the Multiverse</label>   
        <label for="XGE"><input value="XGE" id="XGE" type="checkbox" name="books" class="inline"/>Xanathar's Guide to Everything</label>
        <label for="TCoE"><input value="TCoE" id="TCoE" type="checkbox" name="books" class="inline"/>Tasha's Cauldron of Everything</label>

Hi there!

The above code formation is correct for checkbox input elements.

12

this checkbox is missing the value attribute

2 Likes
13

Thank you! This one fixed it. I guess I assumed I did not need to add a value to the Terms and Conditions. Thank you for your help everyone!

3 Likes