Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

What it says when I run a test:
// running tests You should have a label element with an id of number-label . Your #number-label should contain text that describes the input. Your #number-label should be a descendant of #survey-form . // tests completed.

Apologies for the messy code importing from VSCode made it worse. Its telling me to add a number-label and what not but I already have. Any help please have been stuck on this for a couple days now

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1 id="title" class="title">Dungeon and Dragons: Code Wars</h1>
        <p id="description" class="description">Welcome to the new season of D&D create your new character here!</p>
    </header>
    <form id="survey-form">
        <div class="form-group">
            <label id="name-label" for="name" class="name"> Name </label>
            <input id="name" type="text" placeholder="Enter your name" class="form-control" required/>
        </div>
        <div class="form-group">
            <label id="email-label" for="email"> Email </label>
            <input id="email" type="email" placeholder="Enter your email" class="form-control" required/>
        </div>
        <div class="form-group">
            <label id="gender-label" for="gender"> Gender </label>
            <select id="dropdown" name="player-gender" class="form-control" required/>
                <option disabled selected value>Choose Gender</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
        </div>
        <div class="form-group">
            <label id="number-label" for="number"> Age (Optional) </label>
            <input id="number" type="number" min="10" max="100" placeholder="Age" class="form-control"/>
        </div>
        <div class="form-group">
            <label>Select your class</label>
            <select id="dropdown" name="player-class"  class="form-control" required>
                <option disabled selected value>Select current role</option>
                <option value="Warrior">Warrior</option>
                <option value="Mage">Mage</option>
                <option value="Rogue">Rogue</option>
                <option value="Healer">Healer</option>
            </select>
        </div>
        <div class="form-group">
            <label>What faction do you wish to fight alongside with?</label>
            <label>
                <input name="user-faction" value="light-bringer" type="radio" class="input-radio"
                />Light-Bringer
            </label>
            <label>
                <input name="user-faction" value="grim-dawn" type="radio" class="input-radio"
                />Grim-Dawn
            </label>
        </div>
        <div class="form-group">
            <label>What would you like to see added to the game? <span> (Check all that apply)</span></label>
            <label>
                <input name="feedback" value="world-pvp" type="checkbox" class="input-checkbox"
                /> World PvP
            </label>
            <label>
                <input name="feedback" value="housing" type="checkbox" class="input-checkbox"
                /> Housing System
            </label>
            <label>
                <input name="feedback" value="gvg" type="checkbox" class="input-checkbox"
                /> Guild vs Guild
            </label>
        </div>

        <div class="form-group">
            <p> We're always open to new feedback and suggestions!</p>
            <textarea
                id="suggestions"
                class="input-textarea"
                name="suggestion"
                placeholder="Suggestions here..."
            ></textarea>
        </div>

        <div class="form-group">
            <button type="submit" id="submit" class="submit-button">
                Submit
            </button>
        </div>
    </form>
</body>
</html>

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

      <div class="form-group">
            <label id="gender-label" for="gender"> Gender </label>
            <select id="dropdown" name="player-gender" class="form-control" required/>
                <option disabled selected value>Choose Gender</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
        </div>
        <div class="form-group">
            <label id="number-label" for="number"> Age (Optional) </label>
            <input id="number" type="number" min="10" max="100" placeholder="Age" class="form-control"/>
        </div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

Hello @rob907 !

Try moving the form group with the number-label to above the form-group with the gender dropdown and see what happens.

I hope this helps you continue on your coding journey.

2 Likes
3

Hey first off thank you for your time and help. I switched the two form groups order around and while that got the age label to show it also simultaneously caused the player class label to disappear. I did turn it in and it completed my project though. I’m still curious on what’s causing that certain part of code for the labels to be hidden if you don’t mind helping me troubleshoot it further. (Edit: Grammar)

1 Like
4

I am glad you were able to complete the project @rob907 .

I am taking a look at your code, again, to see if I can find the reason for it.

Thank you for pointing this out to me, and for allowing me to learn with you, while I attempt to find out the reason it canceled out the player class label@rob907 !

I found that the select element is missing its closing tag which should be entered after the last option in the group and before the closing div for that group.

Try adding the closing select tag and see what happens.

Keep up the good progress @rob907

2 Likes
5

Beautiful everything is working perfect now thank you good friend

2 Likes
6

You are very welcome!

Keep up the good progress!

1 Like
7

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