Survey Form - Build a Survey Form

HTML-CSS
1

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Build a Survey Form</title>
</head>

<body>
    <!-- HEADING -->
    <header>
        <h1 id="title">freeCodeCamp Survey Form</h1>
        <p id="description">Thank you for taking the time to help us improve the platform</p>
    </header>


    <form id="survey-form">

        <!-- NAME -->
        <div class="form-group">
            <label id="name-label" for="name">Name <input type="text" name="name" id="name" class="form-control"
                    placeholder="Enter Your Name" required></label>
        </div>
        <!-- EMAIL -->
        <div class="form-group">
            <label id="email-label" for="email"> Email<input type="email" name="email" id="email" class="form-control"
                    placeholder="Enter Your Email" required></label>
        </div>
        <!-- AGE -->
        <div class="form-group">
            <label id="number-label" for="number">Age <span class="clue">(Optional)</span> <input type="number"
                    name="age" id="number" class="form-control" placeholder="Enter Your Age (Optional)" min="10"
                    max="120"></label>
        </div>

        <!-- CURENT ROLE / DROPDOWN MENU -->
        <div class="form-group">
            <p>Which option best describes your current role?</p>
            <select name="role" id="dropdown" class="form-control" required>
                <option value="student">Student</option>
                <option value="job">Full Time Job</option>
                <option value="learner">Full Time Learner</option>
                <option value="preferNo">Prefer not to say</option>
                <option value="other">Other</option>
            </select>
        </div>

        <!-- RECOMENDATION -->

        <div class="form-group">
            <label> <input name="user-recommed" value="Definityly" type="radio" class="input-radio">Definityly</label>
            <label> <input name="user-recommed" value="Maybe" type="radio" class="input-radio">Maybe</label>
            <label> <input name="user-recommed" value="not-sure" type="radio" class="input-radio">Not Sure</label>
        </div>

        <!-- FEATURE -->

        <div class="form-group">
            <P>What is your favorite feature of freeCodeCamp?</P>
            <select name="mostlike" id="most-like" class="form-control" required>
                <option value="challenges">Challenges</option>
                <option value="projects">Projects</option>
                <option value="community">Community</option>
                <option value="openSource">Open Source</option>
            </select>
        </div>

        <!-- CHECKBOX SERIES -->
        <div class="form-group">
            <p>What would you like to see improved? <span class="clue">(Check all that apply)</span></p>
            <label> <input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox">Front-end
                Projects</label>
            <label> <input name="prefer" value="" type="checkbox" class="input-checkbox">Back-end Projects</label>
            <label> <input name="prefer" value="data-visulalization" type="checkbox" class="input-checkbox">Data
                Visualization</label>
            <label><input name="prefer" value="challenges" type="checkbox" class="input-checkbox">Challenges</label>
            <label><input name="prefer" value="open-source-community" type="checkbox" class="input-checkbox">Open Source
                Community</label>
            <label><input name="prefer" value="open-source-community" type="checkbox" class="input-checkbox">Open Source
                Community</label>
            <label><input name="prefer" value="gitter-help-rooms" type="checkbox" class="input-checkbox">Gitter help
                rooms</label>
                <label><input name="prefer" value="videos" type="checkbox" class="input-checkbox">Videos</label>
                <label><input name="prefer" value="city-meetups" type="checkbox" class="input-checkbox">City Meetups</label>
                <label><input name="prefer" value="wiki" type="checkbox" class="input-checkbox">Wiki</label>
                <label><input name="prefer" value="forum" type="checkbox" class="input-checkbox">Forum</label>
                <label><input name="prefer" value="additional-courses" type="checkbox" class="input-checkbox">Additional Courses</label>
        </div>

        <!-- TEXT AREA -->
        <div class="form-group">
            <p>Any comments or suggestions?</p>
            <textarea name="comments" id="comments" class="input-textarea" placeholder="Enter your comment"></textarea>
        </div>
        <!-- SUBMIT -->
        <div class="form-group">
            <button type="submit" id="submit" class="submit-button">Submit</button>
        </div>
    </form>

</body>

</html>
2

You have an empty string for one of the value attributes.

3

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