HELP! Certification Project Survey Form

HTML-CSS
1

I’m working on the first Certification Project: Survey Form in the (New) Responsive Web Design Certification. All of the tests coming out corrected, except for two. Here is my code: `

Favourite Animals

Please fill out the following survey to document your favourite animals.

First Name:

Email:

Phone:

2

The code didn’t quite work when I put it in my question? Let me try again…

Favourite Animals

Please fill out the following survey to document your favourite animals.

First Name:

Email:

Phone:

3

Blockquote

Favourite Animals

Please fill out the following survey to document your favourite animals.

First Name:

Email:

Phone:

4

Welp, this isn’t working. Guess I need help with that too. Sorry!

5

Hi

When you enter a code block into a forum post, please precede it with a separate line of three backticks (```) and follow it with a separate line of three backticks.

Alternatively, you can use the “preformatted text” tool in the editor ( </> ) to add backticks around text.

Either of those should format your code correctly.

6 
<!DOCTYPE HTML>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title">Favourite Animals</h1>
    <p id="description">Please fill out the following survey to document your favourite animals.</p>
    <form id="survey-form">
    <fieldset>
      <p><label id="name-label"> First Name: <input id="name" type="text" placeholder="Jane Doe" required></label></p>
      <p><label id="email-label"> Email: <input id="email" type="email" placeholder="JaneDoe@email.com" required></label></p>
      <p><label id="number-label"> Phone: <input type ="number" id="number" min="0" max="9" placeholder="123 456 7890"></label></p>
    <p><select name="mythical-animal" id="dropdown">
      <option value="">Please choose a mythical creature.</option>
      <option value="werewolf">Werewolf</option>
      <option value="Dragon">Dragon</option>
      <option value="Kitsune">Kitsune</option>
      <label>Favourite Dragon Type</label>
      <label><input type="radio" name="Western" value="Western"></label>
      <label>Eastern Dragon <input type="radio" name="Eastern" value="Eastern"></label>
      <label>Favourite Werewolf</label> <label>Lupin <input type="radio" name="Lupin" value="Lupin"></label>
      <label> Hellsing<input type="radio" name="Hellsing" value="Hellsing"></label>
      <label>Werewolf or Vampire?</label>
      <label>Werewolf <input type="checkbox" name="Werewolf" value="werewolf"></label>
      <label for="werewolf">Werewolf</label>
      <input type="checkbox" name="Vampire" value="vampire">
      <label for="vampire">Vampire</label>
    </fieldset>
      <fieldset>
      <label>Background with animals
    <input type="textarea" name="background" placeholder="Write background here"></label>
    </fieldset>
      <fieldset>
        <button id="submit" type="submit"><label>Submit</label>
        </fieldset>
    </form>
  </body>
7

Thanks for the help :slight_smile:

8

Read this MDN doc on how to create a radio button group.

I don’t see a textarea element in your code?

9

Awesome! Thanks.

It still says that I " should have at least one textarea element that is a descendant of #survey-form ."

  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title">Favourite Animals</h1>
    <p id="description">Please fill out the following survey to document your favourite animals.</p>
    <form id="survey-form">
    <fieldset>
      <p><label id="name-label"> First Name: <input id="name" type="text" placeholder="Jane Doe" required></label></p>
      <p><label id="email-label"> Email: <input id="email" type="email" placeholder="JaneDoe@email.com" required></label></p>
      <p><label id="number-label"> Phone: <input type ="number" id="number" min="0" max="9" placeholder="123 456 7890"></label></p>
    <p><select name="mythical-animal" id="dropdown">
      <option value="">Please choose a mythical creature.</option>
      <option value="werewolf">Werewolf</option>
      <option value="Dragon">Dragon</option>
      <option value="Kitsune">Kitsune</option></select>
      <p><label>Favourite Dragon Type</label></p>
      <div>
      <input type="radio" id="Western" name="dragon" value="western">
      <label for="western">Western Dragon</label>
      </div>
      <div>
        <input type="radio" id="Eastern" name="dragon" value="eastern">
      <label for="eastern">Eastern Dragon</label>
        <p><label>Favourite Werewolf</label>
        <div> 
        <input type="radio" id="Lupin" name="werewolf" value="lupin">
        <label for="lupin">Lupin</label>
        </div>
        <div>
      <input type="radio" id="Hellsing" name="werewolf" value="hellsing">
      <label for="hellsing">Hellsing</label>
      <div>
      <p><label>Werewolf or Vampire?</label>
      <p></div>
      <div>
      <input type="checkbox" id="werewolf" name="wolforvamp" value="werewolf">
      <label for="werewolf">Werewolf</label>
      <input type="checkbox" id="vampire" name="wolforvamp" value="vampire"> <label for="vampire">Vampire</label>
      </div>
    </fieldset>
      <fieldset>
      <label for="background">Background with animals</label>
    <p><input type="textarea" <id="background" name="background" placeholder="Write background here"></p>
    </fieldset>
      <fieldset>
        <button id="submit" type="submit"><label>Submit</label>
        </fieldset>
    </form>
  </body>```
10

Hi @buddymemphis13 ,

You should use the textarea element instead.

The <textarea> element defines a multi-line text input control.

11

I just figured it out by looking at a previous project of mine. Thank you! :slight_smile:

1 Like
12

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