Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Hi sorry, I seem to be struggling on getting the “Every radio button group should have at least 2 radio buttons.” to be checked. Can someone help me please?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Year 13</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    
    <h1 id="title">Year 13</h1>
    <p id="description">
      <em>Join the world in adulthood</em>
    </p>
    <form id="survey-form">
     
      <div>
        <legend>Enter in your details:</legend>
      <label for="name" id="name-label">Name: 
        <input required id="name" type="text" placeholder="Enter your name" />
      </label>
      <label for="email" id="email-label">Email:  
        <input id="email" type="email" placeholder="Enter your email" required />
      </label>
      <label for="number" id="number-label" >Number: 
        <input id="number" type="number" min="8" max="10" placeholder="Enter your number"/>
      </label>
      </div>
      <div>
        <legend>What are planning for next year?</legend>
      <label>
        <select id="dropdown" >
          <option value="">Select one</option>
          <option value="GP_Work">Gap Year - Working</option>
          <option value="GP_Travel">Gap Year - Traveling</option>
           <option value="Uni">Straight to Uni</option>
           <option value="Tafe">Trying Tafe</option>
           <option value="Work">Working</option>
          <option value="Not_preferable">Prefer not to say</option>
          <option value="Other">Other</option>
        </select>
      </label>
      </div>
      <div>
        <legend>Did you take ATAR?</legend>
        <label for="yes" ><input checked name="yes" type="radio" value="yes" id="yes"/>Yes</label>
        <label for="no"><input type="radio" value="no" id="no" name="no"/>No</label>
        <label for="half"><input id="half" type="radio" value="half" name="half"/>Switched to Generals</label>
        <label for="secret"><input id="secret" type="radio" value="secret" name="secret"/>I prefer not to say</label>
      </div>
      <div>
        <legend>Where do you see yourself next year?</legend>
        <label><input type="checkbox" value="home" class="radio-label"/>Still in town</label>
        <label><input type="checkbox" value="city" class="radio-label"/>Moving to the city</label>
        <label><input type="checkbox" value="world" class="radio-label"/>Traveling the world</label>
        <label><input type="checkbox" value="undecided" class="radio-label"/>I don't know yet</label>
      </div>
      <div>
        <label for="feedback">Any advice to your younger peers?
          <textarea id="feedback" name="feedback" rows="3" cols="30" placeholder="Please enter any feedback here..."></textarea>
        </label>
      </div>
      <div>
        <button type="submit" id="submit">Submit</button>
      </div>
    </form>
  </body>
</html>

/* file: styles.css */
body {
  width: 100%
  height: 100vh;
  margin: 0;
  background-image: url(https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  font-family: Tahoma;
  font-size: 16px;
  color: black;
}

h1, p {
  margin: 1em auto;
  text-align: center;
  
}

label {
  display: block;
  margin: 0.4rem
}

legend {
  margin: 0.25rem;
}

form{
  width: 80vw;
  margin: 0 auto;
  max-width: 500px;
  min-width: 300px;
}

div {
  padding: 2rem 0;
  background-color: #e4f1fea7
}

input {
  width: 75%;
  margin: 10px 0 0 0;
}

input[type="radio"], input[type="checkbox"]{
  width: unset;
  margin: 0 0.75em 0 0.5em ;
  vertical-align: middle;
}

button {
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  border-color: white;
  background-color: #3b3b4f;
  min-width:30px;
  display: block;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Your group of radio buttons should have “name” attribute with same value for each group of buttons. You have different name value for your radio inputs.
@samnic.hello

3

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