Survey Form - Build a Survey Form

Tell us what’s happening:

I’m having trouble correcting the errors that were detected, may anyone please tell me what’s the solution or how do I make these changes? Here are what I was told is an error:

You should have at least two input elements with a type of radio (radio buttons).

You should have at least two radio buttons that are descendants of #survey-form.

All your radio buttons should have a valueattribute and value.

Your code so far

<!-- file: index.html -->
  <head>
  <!DOC TYPE HTML>
<link rel="stylesheet" href="styles.css">
</head>
  <body>
  <h1 id="title">Billie</h1>
<p id="description">singer</p>
</body>
<form id="survey-form">
  <fieldset>
     <label id="name-label">Please enter a name</label>
 <input id="name" type="text" required placeholder="teagan">
 <label id="name-label"></label>
 </input> 
 </fieldset>
   <fieldset>
   <label id="email-label">Please enter an email</label>
   <input id="email" placeholder="tgan@gmail.com" type="email" required></input>
 </fieldset>
 <fieldset>
    <label id="number-label">enter telephone no</label>
  <input id="number" placeholder="012-2" type="number" min="5" max="10">
  </input>
 </fieldset>

 <select id="dropdown">
  <option type="radio" name="1" id="survey-form"></option>
     <option type="radio" name="2"></option>
  </select>

    <input type="checkbox" value="met her" name="met" id="met" ></input>
    <label for="met">met her</label>
    <input type="checkbox" value="haven't met her" name="no met" id="no met"></input>
    <label for="no met">haven't met her</label>
    <input type="checkbox" value="about to" name="soon" id="soon" ></input>
    <label for="soon">about to</label>
    <textarea class="texttt">
     NOTE: THIS DOCUMENT IS Private
      </textarea>
      <button id="submit">Submit
        </button>
 </form>

 <style>
   .texttt{
     color: rgb(255,127,0);
     margin-top: 20px;
    }
    
    </style>
    
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Safari/605.1.15

Challenge Information:

Survey Form - Build a Survey Form

1 Like

Hi there! That’s the issue, there is no option with the type of radio, check this link to figure out how to create radio buttons properly:

1 Like

thank you! however now there’s 2 more problems:

Every radio button group should have at least 2 radio buttons.
Your #dropdown should have at least two selectable (not disabled) option elements.

1 Like

No problem, show your edited code please

1 Like

Tell us what’s happening:

now there are only 2 issues

Your code so far

<!-- file: index.html -->
  <head>
  <!DOC TYPE HTML>
<link rel="stylesheet" href="styles.css">
</head>
  <body>
  <h1 id="title">Billie</h1>
<p id="description">singer</p>
</body>
<form id="survey-form">
  <fieldset>
     <label id="name-label">Please enter a name</label>
 <input id="name" type="text" required placeholder="teagan">
 <label id="name-label"></label>
 </input> 
 </fieldset>
   <fieldset>
   <label id="email-label">Please enter an email</label>
   <input id="email" placeholder="tgan@gmail.com" type="email" required></input>
 </fieldset>
 <fieldset>
    <label id="number-label">enter telephone no</label>
  <input id="number" placeholder="012-2" type="number" min="5" max="10">
  </input>
 </fieldset>

 <select id="dropdown">
   <option>
  <input type="radio" name="1" value="option1"></input>
  <label for="1">unlikely </label><br>
  </option>
  <option>
     <input type="radio" name="2" value="option 2"></input>
     <label for="2">Likely</label><br>
     </option>
  </select>

    <input type="checkbox" value="met her" name="met" id="met" ></input>
    <label for="met">met her</label>
    <input type="checkbox" value="haven't met her" name="no met" id="no met"></input>
    <label for="no met">haven't met her</label>
 <input type="checkbox" value="about to" name="soon" id="soon" ></input>
    <label for="soon">about to</label>
    <textarea class="texttt">
     NOTE: THIS DOCUMENT IS Private
      </textarea>
      <button id="submit">Submit
        </button>
 </form>

 <style>
   .texttt{
     color: rgb(255,127,0);
     margin-top: 20px;
    }
    
    </style>
    
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Safari/605.1.15

Challenge Information:

Survey Form - Build a Survey Form

1 Like

Your radio buttons are nested within select element. Only options should be nested here. So move out radio buttons to their own fieldset.
Example of a proper drop-down list:

2 Likes

Tell us what’s happening:

like this? also the last issue is that “Every radio button group should have at least 2 radio buttons.”

Your code so far

<!-- file: index.html -->
  <head>
  <!DOC TYPE HTML>
<link rel="stylesheet" href="styles.css">
</head>
  <body>
  <h1 id="title">Billie</h1>
<p id="description">singer</p>
</body>
<form id="survey-form">
  <fieldset>
     <label id="name-label">Please enter a name</label>
 <input id="name" type="text" required placeholder="teagan">
 <label id="name-label"></label>
 </input> 
 </fieldset>
   <fieldset>
   <label id="email-label">Please enter an email</label>
   <input id="email" placeholder="tgan@gmail.com" type="email" required></input>
 </fieldset>
 <fieldset>
    <label id="number-label">enter telephone no</label>
  <input id="number" placeholder="012-2" type="number" min="5" max="10">
  </input>
 </fieldset>


<input type="radio" name="1" value="option1"></input>
  <label for="1">unlikely</label><br>
  <input type="radio" name="2" value="option 2"></input>
     <label for="2">Likely</label><br>
 <select id="dropdown" name="1">
   <option value="unlikley">unlikely</option>
  <option value="2" name="2"> likely</option>
  </select>
 

    <input type="checkbox" value="met her" name="met" id="met" ></input>
    <label for="met">met her</label>
    <input type="checkbox" value="haven't met her" name="no met" id="no met"></input>
    <label for="no met">haven't met her</label>
 <input type="checkbox" value="about to" name="soon" id="soon" ></input>
    <label for="soon">about to</label>
    <textarea class="texttt">
     NOTE: THIS DOCUMENT IS Private
      </textarea>
      <button id="submit">Submit
        </button>
 </form>

 <style>
   .texttt{
     color: rgb(255,127,0);
     margin-top: 20px;
    }
    
    </style>
    
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Safari/605.1.15

Challenge Information:

Survey Form - Build a Survey Form

1 Like

Yes, this is more correct way. To fulfill this requirement

you have to put these sections within fieldset elements

1 Like

Tell us what’s happening:

I think I did it, but nothing has changed , could you please tell me if this is how its done?

Your code so far

<!-- file: index.html -->
  <head>
  <!DOC TYPE HTML>
<link rel="stylesheet" href="styles.css">
</head>
  <body>
  <h1 id="title">Billie</h1>
<p id="description">singer</p>
</body>
<form id="survey-form">
  <fieldset>
     <label id="name-label">Please enter a name</label>
 <input id="name" type="text" required placeholder="teagan">
 <label id="name-label"></label>
 </input> 
 </fieldset>
   <fieldset>
   <label id="email-label">Please enter an email</label>
   <input id="email" placeholder="tgan@gmail.com" type="email" required></input>
 </fieldset>
 <fieldset>
    <label id="number-label">enter telephone no</label>
  <input id="number" placeholder="012-2" type="number" min="5" max="10">
  </input>
 </fieldset>


<input type="radio" name="1" value="option1"></input>
  <label for="1">unlikely</label><br>
  <input type="radio" name="2" value="option 2"></input>
     <label for="2">Likely</label><br>
     <fieldset>
 <select id="dropdown" name="1">
   <option value="unlikley">unlikely</option>
  <option value="2" name="2"> likely</option>
  </select>
  </fieldset>
 

    <input type="checkbox" value="met her" name="met" id="met" ></input>
    <label for="met">met her</label>
    <input type="checkbox" value="haven't met her" name="no met" id="no met"></input>
    <label for="no met">haven't met her</label>
 <input type="checkbox" value="about to" name="soon" id="soon" ></input>
    <label for="soon">about to</label>
    <textarea class="texttt">
     NOTE: THIS DOCUMENT IS Private
      </textarea>
      <button id="submit">Submit
        </button>
 </form>

 <style>
   .texttt{
     color: rgb(255,127,0);
     margin-top: 20px;
    }
    
    </style>
    
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Safari/605.1.15

Challenge Information:

Survey Form - Build a Survey Form

1 Like

The group of radio buttons must have the same name (the value of the name attribute) to be recognized as a group.
Also, input is a self-closing tag (no need for </input>)

thank you! the only problem now is that is says: " Your #dropdown should have at least two selectable (not disabled) option elements."

  <head>
  <!DOC TYPE HTML>
<link rel="stylesheet" href="styles.css">
</head>
  <body>
  <h1 id="title">Billie</h1>
<p id="description">singer</p>
</body>
<form id="survey-form">
  <fieldset>
     <label id="name-label">Please enter a name</label>
 <input id="name" type="text" required placeholder="teagan">
 <label id="name-label"></label>
 </input> 
 </fieldset>
   <fieldset>
   <label id="email-label">Please enter an email</label>
   <input id="email" placeholder="tgan@gmail.com" type="email" required></input>
 </fieldset>
 <fieldset>
    <label id="number-label">enter telephone no</label>
  <input id="number" placeholder="012-2" type="number" min="5" max="10">
  </input>
 </fieldset>

 <select id="dropdown">
  <input type="radio" name="1" value="option1">
  <label for="1">unlikely </label><br>
     <input type="radio" name="1" value="option 2">
     <label for="2">Likely</label><br>
  </select>

    <input type="checkbox" value="met her" name="met" id="met" ></input>
    <label for="met">met her</label>
    <input type="checkbox" value="haven't met her" name="no met" id="no met"></input>
    <label for="no met">haven't met her</label>
    <input type="checkbox" value="about to" name="soon" id="soon" ></input>
    <label for="soon">about to</label>
    <textarea class="texttt">
     NOTE: THIS DOCUMENT IS Private
      </textarea>
      <button id="submit">Submit
        </button>
 </form>

 <style>
   .texttt{
     color: rgb(255,127,0);
     margin-top: 20px;
    }
    
    </style>
    

The same issue again: radio buttons within select element

like this?

<fieldset>
  <input type="radio" name="1" value="option 1">
  <input type="radio" name="1" value="option1">
 <select id="dropdown">
  <label for="1">unlikely </label><br>
     <label for="1">Likely</label><br>
  </select>
  </fieldset>

Don’t change fieldset with dropdown list, this snippet:

     <fieldset>
 <select id="dropdown" name="1">
   <option value="unlikley">unlikely</option>
  <option value="2" name="2"> likely</option>
  </select>
  </fieldset>

Only fix name attributes of your radio buttons

THANK YOU (it worked😭)

1 Like

You’re welcome, congrats!