Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

After running my test it states I need at least 2 radio buttons at least. I added a 3rd one and even made a second section with another set of radio buttons. And still reads the same results.

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Survey Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1 id="title">Survey Form</h1>

<p id="description">Please fill out this survey in order to improve your experience.</p>

<form id="survey-form" requierd>

 <fieldset>
<label id="name-label">Name:</label><br>
<input id="name" type="text" placeholder="My name is..." required></input><br>

<label id="email-label">Email:</label><br>
 <input id="email" type="email" placeholder="my-email@..." required></input><br>
<label id="number-label">Age:</label><br>
<input id="number" type="number" min="13" max="120" placeholder="My age in years..." required></input><br>
</fieldset>

<fieldset>
<label id="how">How did you hear about us?</label>
<select id="dropdown">
<option value="">Select one</option>
<option value="web">Web</option>
<option value="referral">Referral</option>
</select></fieldset>

<fieldset>
 <label id="would">Would you recommend our site to your friends?</input>

<input type="radio" name="yes" value="yes">Yes</input>
<input type="radio" name="no" value="no">No</input>
<input type="radio" name="now" value="now">Doing it now!</input>
</fieldset>
<fieldset>
<div><label id="will">Will you visit our site again?</input></div>

<input type="radio" name="maybe" value="maybe">Maybe</input>
<input type="radio" name="definitely" value="definitely">Definitely</input>
<input type="radio" name="absolutely" value="absolutely">Absolutely</input>
</fieldset>

<fieldset>
 <div><label id="what"> What would you like to see improve?</label></div>
<input type="checkbox"  value="background">Background</input>
<input type="checkbox"  value="content">Content</input>
<input type="checkbox"  value="forum">Forum</input>
<input type="checkbox" value="challenges">Challenges</input></fieldset>
<fieldset>
<div><label>Additional Comments:</div>
 <textarea name="comments" rows="3" cols="30" placeholder="I would like to..."></textarea></label>

<input type="Submit" id="submit" value="Submit">Submit</input>

</fieldset>

</form>
</body>



/* file: styles.css */
form{
background-color:lightblue;
margin-left:0;
margin-right: 0;
margin-top:0;
margin-bottom:0;
 border: 2px solid black;
}
h1{
color:purple;
text-align:center;
}
p{
 text-align:center;
 color:purple;
 }
 fieldset{
   
 }

   **Your browser information:**

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

For the radio groups, the value of the name attribute needs to be the same. You can read more about it here:

3

I studied the link you shared, I applied what I learned but my code still reads the same. only issue is with my radio buttons.

Screen Shot 2022-08-26 at 8.10.00 PM
Screen Shot 2022-08-26 at 8.10.00 PM1920×1200 258 KB

4

I also tried other things I found online but no matter what I do, it marks the same. Am I missing something?

Screen Shot 2022-08-26 at 8.29.26 PM
Screen Shot 2022-08-26 at 8.29.26 PM1920×1200 237 KB

5

Please post your actual code instead of a picture. Thanks

7

Please post actual code when you make changes so we can try your actual code. Pictures are hard to read. It can also be hard to find the bug when we try to manually type out your changes into your old code ourselves. It’s polite to make it easy for the people who you are asking for help from. Thanks for your comment anyways. <3

8

Yes, as JeremyLT wrote, it would be much easier to read your code if you provided your actual code instead of screenshots.

I looked at both your screenshots and it doesn’t look like you understood what I meant nor the link from MDN. For each of your radio button groups, the value of the name attribute must be the same. Per the MDN link:

A radio group is defined by giving each of the radio buttons in the group the same name.

For example, from that MDN link I shared:

  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio" id="contactChoice1"
     name="contact" value="email">
    <label for="contactChoice1">Email</label>

    <input type="radio" id="contactChoice2"
     name="contact" value="phone">
    <label for="contactChoice2">Phone</label>

    <input type="radio" id="contactChoice3"
     name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>

If you look closely at each radio button’s name attribute, they all have the same value, name="contact".

9

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