Build a Survey Form

HTML-CSS
1

This is the code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=UTF-8>
    <title>Vet Visit Survey</title>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <h1 id="title">Pet visit Survey</h1>
    <p id="description">Please fill out this form with the required information</p>
    <form method="post" action="/action_page.php" id="survey-form" name="survey-form">
      <fieldset>
        <legend>Personal information</legend>
        <label for="name-label">Tutor's name:<input id="name-label" name="name-label" type="text" placeholder="Name" required/></label><br>
        <label for="name">Pet's name:<input id="name" name="name" type="text" placeholder="Pet" required/></label><br>
        <label for="number">Pet's age (years):<input id="number" name="number" type="number" min="00" max="50" placeholder="xx" required/></label><br>
        <label for="breed">Pet's breed:<input id="breed" name="breed" type="text" placeholder="--" required/></label><br>
    </fieldset>
    <fieldset>
      <legend>Pet type</legend>
      <label for="cat"><input id="cat" value="cat" type="radio" name="pet-type" inline="inline" checked/>Cat</label>
      <label for="dog"><input id="dog" value="dog" type="radio" name="pet-type" inline="inline"/>Dog</label><br>
   </fieldset>
   <Fieldset>
      <label for="size">Pet's Size:
        <select id="dropdown" name="dropdown">
          <option value="">(select one)</option>
          <option value="1">Smal (1-10kg)</option>
          <option value="2">Medium (11=26kg)</option>
          <option value="3">Large (27-45kg)</option>
          <option value="4">X-Large (+46kg)</option>
        </select>
      </label>
    </fieldset>
    <fieldset>
      <legend>Contact</legend>
      <label for="number-label">Phone number:<input id="number-label" name="number-label" type="tel" placeholder="(xx)xxxxx-xxxx" pattern="[0-9]{2}-[0-9]{5}-[0-9]{4}required/></label><br>
      <label for="email-label"> E-mail:<input id="email" name="email-label" type="email" placeholder="email@.com" required/></label><br>
    </fieldset>
    <fieldset>
      <legend>What service would you like to see in our store?</legend>
      <label for="pet-supplies"><input value="pet-supplies" id="pet-supplies" type="checkbox" name="pet-supplies"/>Pet supplies</label><br>
      <label for="pet-addoption"><input id="pet-adoption" value="pet-addoption" type="checkbox" name="pet-addoption"/>Pet addoption</label><br>
      <label for="grooming"><input id="grooming" value="grooming" type="checkbox" name="grooming"/>Grooming</label><br>
      <label for="pet-boarding"><input id="pet-boarding" value="pet-boarding" type="checkbox" name="pet-boarding"/>Pet boarding</label><br>
      <label for="training"><input id="training" value="training" type="checkbox" name="training"/>Training classes</label><br>
      <label for="pet-care"><input id="pet-care" value="pet-care" type="checkbox" name="pet-care"/>Pet care</label><br>
      <label for="vet"><input id="vet" value="vet" type="checkbox" name="vet"/>Veterinary service</label><br>
      <label for="fish"><input id="fish" value="fish" type="checkbox" name="fish"/>Fish and Aquarium supplies</label><br>
      <label for="reptiles"><input id="reptiles" value="reptiles" type="checkbox" name="reptiles"/>Reptiles supplies</label><br>
      <label for="bird"><input id="bird" value="bird" type="checkbox" name="bird"/>Bird supplies</label><br>
    </fieldset>
    <fieldset>
      <label for="comments">Any comments & suggestions
        <textarea id="comments" name="comments" rows="5" cols="50" placeholder="write your comment here..."></textarea>
      </label>
    </fieldset>
    <input type="submit" id="submit" value="submit" name="submit"/>
    </form>
  </body>
</html>

Aparently, I’m failing to:

  • Failed:You should have a label element with an id of name-label.
  • Failed:You should have a label element with an id of email-label.
  • Failed:You should have a label element with an id of number-label.
  • Failed:Your #name-label should contain text that describes the input.
  • Failed:Your #email-label should contain text that describes the input.
  • Failed:Your #number-label should contain text that describes the input.
  • Failed:Your #email-label should be a descendant of #survey-form.

I really don’t know what I’m doing wrong. Can anybody help me?

2

Move the id attributes from input elements to the corresponding label elements.

Let me know which step this is so I can help with the second part.

1 Like
3

It did work! thank you!

Still failing:
Failed:You should have a label element with an id of email-label.
Failed:Your #email-label should contain text that describes the input.

1 Like
4

The pattern attribute is missing a double quote, then a space at the end.

You could search for the text:

required

to find the location.

5

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