Form Survey Submit & Radio ERROR

HTML-CSS
1

Tell us what’s happening:
Hi, I’m starting to code in HTML and CSS, and while finishing the first “course”(“Responsive Web Design - Form Survey”) the site has to offer for that matter, I’m left with some errors in the compilation of the tutorial, namely:
“Every radio button group should have at least 2 radio buttons”;
"You should have an input or button element with an id of submit";
" Your #submit should have a type of submit";
" Your #submit should be a descendant of #survey-form",
that won’t let me proceed with the tutorial.
I can’t point my self error, and would appreciate if anyone brings some clarity to the code, thank you.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <title>Survey Form</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
  <h1 id="title">Survey Form</h1>
  <p id="description">Complete the survey:</p>
  <form id="survey-form" action='https://database.com'>
    <fieldset>
      <label>
        <input type="text" id="name" placeholder="Your name here." required />
      </label>
      <label>
        <input type="email" id="email" placeholder="Your email here." required/>
      </label>
      <label>
        <input type="number" min="0" max="99" id="number" placeholder="Your number here."/>
      </label>
      <label id="name-label" placeholder="Label name here.">
        Name label
      </label>
      <label id="email-label" placeholder="Label email here.">
        Email label
      </label>
      <label id="number-label" placeholder="Label number here.">
        Number label
      </label>
      <select id="dropdown">
        <option value="M"></option>
        <option value="F"></option>
      </select>
      <label>
        <input type="radio" name="radio-A" value="A"/>
      </label>
      <label>
        <input type="radio" name="radio-B" value="B"/>
      </label>
      <label>
        <input type="checkbox" name="radio-C" value="C"/>
      </label>
      <label>
        <input type="checkbox" name="radio-D" value="D"/>
      </label>
      <label>
        <textarea name="textarea" rows="" cols="">
        </textarea>
      </label>
    </fieldset>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

/* file: styles.css */


  **Your browser information:**

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

Challenge: Build a Survey Form

Link to the challenge:

2

I’ll get you started with a hint for this one. A radio button group is determined by the name attribute. All radio buttons that have the same name attribute are part of the same group. So if you want your two radio buttons to be part of the same group then what would you need to do to their name attributes?

1 Like
3

Hey there, thank you for the hint. So, from what you said, I should make two radio groups (with the same name per radio per group) with at least two radio buttons (different values per radio button) each like:
Your code so far

/* file: index.html */
<!DOCTYPE html>
<html>
<body>
  <form id="survey-form" action='https://database.com'>
    <fieldset>
      <label>
          <input type="radio" name="radio-1" value="A"/>
        </label>
        <label>
          <input type="radio" name="radio-1" value="B"/>
        </label>
        <label>
          <input type="radio" name="radio-2" value="C"/>
        </label>
        <label>
          <input type="radio" name="radio-2" value="D"/>
        </label>
  </form>
</body>
</html>

/* file: styles.css */

With that in mind, I corrected my code and it works for the task, thank you very much!

4

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