Survey Form - Build a Survey Form

Tell us what’s happening:

Unlike the “radios” where you can only choose one option, in the "checkboxes"I allow the user to choose up to 3 options, but in my current form you can choose the 9 options and submit it, I want a submit error when doing that or when choosing 4 checkboxes one is automatically removed and they return to 3, how can I do that?

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>Gacha Game Survey Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <header class="header">
    <h1 id="title" class="text-center">Gacha Game Survey</h1>
    <p id="description" class="description text-center">Let us know your opinion about the game by answering the following survey.</p>
    </header>
    <p>Required items: (<span class='asterisk'>*</span>)</p>
    <form id="survey-form">
    <div class="form-group">
      <label id="name-label" for="name">Name <span class='asterisk'>*</span> </label><input id="name" name="name" type="text" placeholder="Enter your name"
" required /></div>
<div class="form-group">
     <p>Tell us your gender <span class='asterisk'>*</span></p> 
     <label><input type="radio" name="gender" value="male" class="input-radio" checked  /> Male</label>
     <label><input type="radio" name="gender" value="female" class="input-radio"  /> Female</label>
     <label><input type="radio" name="gender" value="other" class="input-radio"  /> Other</label></div>
         <div class="form-group">
<label id="number-label" for="number">Tell us your age <span class='asterisk'>*</span></label><input id="number" type="number" name="age" min="14" max="110" placeholder="Age" /></div>
    <div class="form-group">
  <p>Tell us your current ocupation <span class='asterisk'>*</span></p>
  <label><input type="radio" name="ocupation" value="student" class="input-radio" checked /> Student</label>
  <label><input type="radio" name="ocupation" value="full-time-employee" class="input-radio" /> Full-time employee</label>
  <label><input type="radio" name="ocupation" value="part-time-employee" class="input-radio" /> Part-time employee</label>
  <label><input type="radio" name="ocupation" value="self-employed" class="input-radio" /> Self-employed</label>
  <label><input type="radio" name="ocupation" value="unemployed" class="input-radio" /> Unemployed</label>
  <label><input type="radio" name="ocupation" value="other" class="input-radio" /> Other</label>
</div>
<div class="form-group">
<p>How did you found out about the game? <span class='asterisk'>*</span></p>
    <select id="dropdown" name="where-how" class="form-control" required>
    <option value="">select one</option>
    <option value="twitter">Ad on X (formerly Twitter)</option>
    <option value="instagram">Ad on Instagram</option>
    <option value="yt">Ad on YouTube</option>
    <option value="otherMedia">Video ad on other media
    <option value="friendFamily">Introduced by a friend/family</option>
    <option value="other">Other</option></select>
</div>
<div class="form-group">
  <p>What do you think needs improvement or do you want to see added to the game? <span class="clue">(multi choice - 3 max)</span> <span class='asterisk'>*</span></p>
  <label><input type="checkbox" name="suggestions" value="summonRates" class="input-checkbox" checked /> Summon rates</label>
  <label><input type="checkbox" name="suggestions" value="gameplay" class="input-checkbox" required /> Gameplay</label>
  <label><input type="checkbox" name="suggestions" value="moreGameModes" class="input-checkbox" required /> More game modes</label>
  <label><input  type="checkbox" name="suggestions" value="cinematicAnimations" class="input-checkbox" /> Cinematic animations</label>
  <label><input type="checkbox" name="suggestions" value="characterArt" class="input-checkbox" /> Characters' art</label>
  <label><input type="checkbox" name="suggestions" value="pvp" class="input-checkbox" /> PvP implementation</label>
  <label><input type="checkbox" name="suggestions" value="moreSummonAnimations" class="input-checkbox" /> More summon animations</label>
  <label><input type="checkbox" name="suggestions" value="missionRewards" class="input-checkbox" /> Mission rewards</label>
  <label><input type="checkbox" name="suggestions" value="pve" class="input-checkbox" /> More PvE content</label>
</div>
<div class="form-group" 
 <label for="personal-suggestion">Please tell us if you have any other suggestions <span class="clue">(optional)</span>
<textarea id="personal-suggestion" name="personalSuggestion" rows="5" cols="40" placeholder="Enter your suggestions here" class="input-textarea" /></textarea></div>
    <div class="form-group">
    <label for="email" id="email-label"> Lastly please introduce your email to obtain the rewards in-game <span class='asterisk'>*</span><input id="email" type="email" name="email" placeholder="Enter your email" required ></label>
    </div>
      <div class="form-group">
      <button type="submit" id="submit" class="submit-button" />Submit</button>
      </form>
       </div>
  </body>
</html> 

body {
padding: 20px;
display: block;
background-color: #1b1b32;
color: #f5f6f7;
font-family: sans-serif;
font-size: 17px;
}
.text-center {
  margin: 1.5em auto;
  text-align: center;
}
h1 {
  font-family: garamond;
  font-size: 45px;  
}
.asterisk{
  color: red;
}
.clue{
  font-size: 0.8rem;
}
form {
  width: 60vw;
  max-width: 500px;
  min-width: 200px;
  margin: 0 auto;
  padding-bottom: 2em;
}
.container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}
label {
  display: block;
  margin: 0.5rem 0;
}
select, textarea {
   margin: 10px 0 0 0;
   width: 100%;
   min-height: 2em;
}
.input-radio, .input-checkbox {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}
.description {
  font-style: italic;
}
input {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}
.submit-button {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;
  color: #f5f6f7;
}
.submit-button:hover {
  color: #d1d9de;
  }

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

I don’t think this type of validation can be done in css. You will need to write some JavaScript.

I haven’t gotten to that point yet, is it okay to leave it like this?

Yes, it is okay. You have satisfied the requirement.

Hi @canuna1778

You could create three drop down lists, each list grouping one aspect of the game.

  1. game content: summon rates, characters’ art, mission rewards
  2. animation: cinematic animations, more summon animations
  3. game design: PvP implementatiom, more PvE content, more game modes, gameplay

Or leave it as it as. You did indicate there is a maximum selection of three options.

Happy coding