Responsive Web Design Projects - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
I keep getting the following errors:

  • You should have an input or button element with an id of submit.

  • Failed:Your #submit should have a type of submit.

  • Failed:Your #submit should be a descendant of #survey-form.

Why is it not accepting what i have?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Color Experts Beauty Salon</title>
    <link rel="stylesheet" href="styles.css" />
      </head>
    <body>
       <h1 id="title">Color Experts Beauty Salon
    </h1>
     <p id="description">Create an account with us in order to make and view appointments.</p>
     <fieldset>
      <form id="survey-form">
      <label for="name" id="name-label">Name
      <input id="name"type="text" placeholder="Name" required>
      </label>
      <label for="email" id="email-label">Email
      <input id="email" placeholder="Email" type="email" validation="HTML5" required></label>
      <label for="number" id="number-label">Age
      <input id="number" placeholder="Age" validation="HTML5" type="number" min="0" max="9999">
      </label>
      <label for="dropdown">How did you hear about us?<select id="dropdown">
        <option value="">(Select one)</option>
        <option value="1">Facebook</option>
          <option value="2">Instagram</option>
          </label>
 <label for="personal-account"><input id="personal-account" type="radio" class="inline" value="personal" name="radio-group">Personal Account
        </label>
        <label for="professional-account"><input id="professional-account" type="radio" class="inline" value="professional" name="radio-group">Professional Account
        </label>
        <label for="business-account"><input id="business-account" type="radio" class="inline" value="business" name="radio-group">Business Account
        </label>
    <label for="terms-and-conditions" name="terms-and-conditions">
          <input id="terms-and-conditions" type="checkbox" name="terms-and-conditions" class="inline" 
          value="3"/> I accept the terms and conditions
          </label>
          <label for="newsletter"
          name="newsletter">
          <input id="newsletter" name="newsletter" type="checkbox" class="inline" value="4">I would like to sign up to recieve letters and promotions through email
    
    <label> Additonal Information
      <textarea placeholder="Comments/Concerns"> 
      </label>
      
      <button id="submit" type="submit" value="submit">Submit
      </button>
      </fieldset>
</form>
      </body>
      </html>

/* file: styles.css */
body{
  width:100%;
  height:100vh;
  margin: 0;
background-color:gold;
font-size:16px;
}
h1, p{
  margin:1em auto;
  text-align:center;
}
form{
  width:60vw;
  max-width:500px;
  min-width:300px;
margin: 0 auto;
padding:1em ;
}
input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;

Your browser information:

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

Challenge: Responsive Web Design Projects - Build a Survey Form

Link to the challenge:

2

Hey,

<textarea> is paired tag

3

Thank you! That completed it! :slight_smile:

1 Like
4

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