Survey Form Project Opinions

Hey! I just recently finished my first project and I would like some opinions/feedback on my code! I’m not sure if this is the place to put this.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sweaty Gamer survey</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Heading and paragraph section -->
    <section>
      <h1 id="title">Sweaty Gamer survey</h1>
      <p id="description">Hey! We want to know what type of competitve gamer you are!</p>
    </section>

    <!-- Form section -->
    <section>
      <form id="survey-form"> 
        <label for="name" id="name-label">Name:</label>
        <input placeholder="Enter your name" required type="text" id="name" name="name">
        <label for="email" id="email-label">Email:</label>
        <input placeholder="Enter your email" required type="email" id="email" name="email">
        <label for="number" id="number-label">Age:</label>
        <input placeholder="Enter your age" required type="number" id="number" name="number" min="18" max="30">
        
        <!-- Dropdown menu -->
        <p> What genre of competitive games do you play the most? </p>
        <select id="dropdown"> 
          <option value="" disabled selected>Select your comp game genre</option>
          <option>FPS</option>
          <option>Fighting games</option>
          <option>MOBA</option>
        </select>
        
        <hr>
       
        <!-- Radio buttons -->
        <p>How much do you play?</p>
        
        <label for="play-duration">Daily<input type="radio" id="play-duration" name="play-duration" value="play-duration"> </label>
        <label for="play-duration">3 times a week <input type="radio" id="play-duration" name="play-duration" value="play-duration"> </label>
        <label for="play-duration">Once a week <input type="radio" id="play-duration" name="play-duration" value="play-duration"> </label>
        
        <hr>
      
        <!-- Checkboxes -->
        <p>Pick the games you play</p>
        
        <p class="game-type">FPS</p>
        <label for="game"><input type="checkbox" id="game" name="game" value="game"> Valorant</label>
        <label for="game"><input type="checkbox" id="game" name="game" value="game"> Overwatch</label>
        <label for="game"><input type="checkbox" id="game" name="game" value="game"> COD</label>
        <label for="game"><input type="checkbox" id="game" name="game" value="game"> Halo</label>

     
        <p class="game-type">Fighting games</p>
        <label for="game"><input type="checkbox" id="game" name="game" value="game"> Street Fighter</label>
        <label for="game"><input type="checkbox" id="game" name="game" value="game"> Smash</label>

         <p class="game-type">MOBA</p>
         <label for="game"><input type="checkbox" id="game" name="game" value="game"> LoL</label>
         <label for="game"><input type="checkbox" id="game" name="game" value="game"> DOTA</label>
        
        <!-- Textarea -->
        <p class="game-type">Are we missing a competitve game? Add it here!</p>
        <textarea>Add it here!</textarea>
        <button id="submit" type="submit">Submit</button>

      </form>
    </section>
  </body>
</html>

CSS code

html * {
  font-family: Monaco, Garamond, Arial;
  background-color: #E78E79;
}

h1, p {
  text-align: center
}

#name, #email, #number {
  display: block;
  width: 75%;
  margin-bottom: 15px;
  }

::placeholder {
  color: black
}

#dropdown {
  width: 100%
}

label {
  display: block;
}

.game-type {
  text-align: left
}

textarea {
  display: block;
  margin: 15px 0 15px 0;
  width: 40%;
  height: 5em;
}

hr{
  height: 1px;
  margin: 15px 0 15px 0;
  background-color: black;
  border-width: 0.5;
  border-color: black;
}

Welcome to our community!

Duplicate ids are not allowed in HTML:

1 Like
  • Add box-sizing: border-box as shown in previous challenges.

  • Limit the width of the form element and center it. Probably give it some padding as well.

  • Give the form, including the form elements inside it, a different color from the background.

  • Make the first 4 input elements larger (e.g. give them some padding).

  • I would make the first 4 input elements and the textarea the same width.

  • Add resize: vertical to the textarea.


You can go back to the form challenge section if you need a refresher.

2 Likes

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