Responsive Web Design Projects - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I don’t know what it mean by “Every radio button group should have at least 2 radio buttons.”

Your code so far

<!-- file: index.html -->
 <!DOCTYPE html>
<html lang="en">
<meta charset="uft-8"/>
 
<link rel="stylesheet" href="styles.css">
 
<h1 id="title"> Dream Dog Survey Form</h1>
 
<p id="description"> In this form, tell me about your dream dog</p>
 <form id="survey-form">
  <fieldset>
  <div>
  <input id="name" for="name" name="name" type="text" required placeholder="Enter your name">
  </div>
  <div>
   <input id="email" for="email" name="email" type="email" required placeholder="Enter your email">
   </div>
  <div>
   <input id="number" for="age" name="age" type="number" min="10" max="55" required placeholder="Age">
   </div>
   </fieldset>
  
   <label id="name-label">Enter your name;</label>
   
    
   <label id="email-label">Enter your email;</label>
  
   <label id="number-label"> Enter your age.</label>
  <fieldset>
  <div>
   
   <label id="gender">Gender</label>
   <select id="dropdown" name="gender">
     <option value="">Select your gender</option>
 
     <option value="male">Male</option>
     <option value="female">Female</option>
 
     <option value="other">Other</option>
   </select>
   </div>
   </fieldset>
  <fieldset>
Which one do you prefer?
   
   <input type="radio" value="shih-tzu" name="shih-tzu">
   <option for="shih-tzu">Shih-Tzu</option>
   
  <input type="radio" value="golden-doodle" name="golden-doodle">
    <option for="golden-doodle">Shih-tzu and Golden Doodle<option>
 
   
    
   
        </fieldset>
       <fieldset>
         <input type="radio" value="outdoor" name="Outdoors">
         <label for="outdoor">Outdoors</label>
         <input type="radio" value="indoor" name="Indoors">
         <label for="indoor">Indoors</label>
         </fieldset>
         <fieldset>
  <div>
    <input type="checkbox" value="under-10-years-old">
    <label for="under-10-years-old">Under 5 years old</label>
     
    <input type="checkbox" value="over-10-years-old">
     <label for="over-10-years-old">Over 5 years old</label>
     </div>
     </fieldset>
     
    
     <textarea name="comments" rows="5" cols="36" placeholder="Enter your comments here"></textarea>
        <fieldset>
    <button="submit"></button>
     <input id="submit" <input id="submit" name="submit" type="submit" value="Submit"></>
   </div>
   </fieldset>
</form>

/* file: styles.css */
h1{
   color:rgb(250,100,2150)
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: Responsive Web Design Projects - Build a Survey Form

Link to the challenge:

2

a radio button “group” is characterized by the radio buttons all sharing the same name attribute value.
This tells the browser that the user is only allowed to choose one of the radio buttons in that group.
Say you have a true/false question. You would present 2 radio buttons labelled true and false respectively.
You want the user to click only one of these at a time (they both cannot be selected).
So you set their name to be a value that is identical in both input elements.

ref
https://www.w3schools.com/tags/att_input_type_radio.asp

3

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