Survey Form (Chess Player Survery) - Feedback Request

Code Feedback
1

Hello!

I just completed the survey form project. I’d love to get any feedback that someone is willing to offer.

Here’s a link to the survey form that I hosted on GitHub

Here is the html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Chess Player Survey</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
</head>
<body>
    <div id="header">
        <h1 id="title">Chess Player Survey</h1>
        <p id="description">Let us know your chess player profile!</p>
    </div>
    <form action="" method="post" id="survey-form">
        <fieldset>
            <legend>Player details:</legend>
            <label id="name-label" for="name">Name
                <input type="text" id="name" required placeholder="Enter your name">
            </label>
            <label id="email-label" for="email">Email
                <input type="email" id="email" required placeholder="Enter your email">
            </label>
            <label id="number-label" for="number">Age(optional)
                <input type="number" id="number" min="0" max="120" placeholder="Enter your age">
            </label>
        </fieldset>
        <fieldset>
            <legend>Who is your favourite chess legend?</legend>
            <label id="dropdown-label" for="dropdown">
                <select id="dropdown">
                    <option disabled selected>Select an option</option>
                    <option>Magnus Carlsen</option>
                    <option>Bobby Fischer</option>
                    <option>Garry Kasparov</option>
                    <option>Paul Morphy</option>
                </select>
            </label>
        </fieldset>
        <fieldset>
            <legend>Pick your favourite starting color:</legend>
            <label for="white-pieces">
                <input id="white-pieces" type="radio" name="color-preference" value="white">White Pieces
            </label>
            <label for="black-pieces">
                <input id="black-pieces" type="radio" name="color-preference" value="black">Black Pieces
            </label>
        </fieldset>
        <fieldset>
            <legend>Describe your playing style:</legend>
            <label for="aggressive-style">
                <input type="checkbox" value="aggressive" id="aggressive-style"> Aggressive or Attacking Style
            </label>
            <label for="defensive-style">
                <input type="checkbox" value="defensive" id="defensive-style"> Defensive or Solid Style
            </label>
            <label for="positional-style">
                <input type="checkbox" value="positional" id="positional-style"> Positional Style
            </label>
            <label for="tactical-style">
                <input type="checkbox" value="tactical" id="tactical-style"> Tactical Style
            </label>
            <label for="dynamic-style">
                <input type="checkbox" value="dynamic" id="dynamic-style"> Dynamic Style
            </label>
            <label for="endgame-specialist">
                <input type="checkbox" value="endgame" id="endgame-specialist"> Endgame Specialist
            </label>
            <label for="universal-style">
                <input type="checkbox" value="universal" id="universal-style"> Universal Style
            </label>
        </fieldset>
        <fieldset>
            <label for="additional-comments">
                <textarea name="additional-comments" id="additional-comments" cols="65" rows="7" placeholder="Tell us why you love chess"></textarea>
            </label>
        </fieldset>
        <button type="submit" id="submit">Submit</button>
    </form>
</body>
</html>

And here is the CSS:

body {
    background-color: #31304D;
    color: #F0ECE5;
    font-family: 'Roboto', sans-serif;
}

#header {
    text-align: center;
}

input, select, textarea, button {
    font-family: 'Roboto', sans-serif;
}

form {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    background-color: #161A30;
    position: relative;
    padding: 20px 0;
}

label {
    display: block;
    margin: 10px 5px;
}

legend {
    font-weight: 500;
    margin-top: 5px;
    font-size: 1.15rem;
    color:blanchedalmond;
}

fieldset {
    border: 0;
    padding-left: 25px; 
}

#name, #email, #number, #additional-comments {
    display: block;
    width: 90%;
    margin-top: 5px;
}

button {
    font-size: 1rem;
    text-align: center;
    margin: auto;
    display: block;
    border-radius: 10%;
    width: 30%;
}

I look forward to hearing feedback!

1 Like
2

It looks great! The UI is clean and simple.

Notes:

I get that the project requirement would’ve probably wanted you to do this but for the sake of extra knowledge, I’ll just let you know.
Label elements dont need a for attribute if the element they’re bound to is a direct child.

for attribute needed:

<label for="input"></label>
<input type="text "id="input">

for attribute uneeded:

<label for="">
  <input text="text">
</label>

It’s just one of thist things that’s nice to know that’ll help keep your code just that little bit cleaner.

Other than that extra tip, your survey is good. Well done! :clap:

3

Thanks so much for the feedback! Much appreciate :slight_smile:

1 Like
4

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