Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
iv added the button element with the id and type etc im still not able to pass the code and im not sure where im going wrong
-You should have an input or button element with an id of submit .

  • Your #submit should have a type of submit .

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Doggie Day Camp</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<h1 id="title">Doggie Day Camp</h1>
<p id="description">Here at doggie day camp we take great care of your dogs. we have a rang of activities for kind of dogs. Please fill out this form if you would like your dog to join</p>
<form id="survey-form" method="get">
  <div id="container">
<label id="name-label" for="name">Dogs name
<input id="name" type="text" placeholder="Dogs name" required/></label>
<br>
<label id="email-label" for="email-address"> Enter your Email
  <input id="email" type="email" placeholder="Email" required/></label>
  <br>
<label id="number-label" for="number">Age of dog <input id="number" type="number" placeholder="age" min="0" max="20" ></label>
<br>
<label>What is your dogs breed?
  <select id="dropdown" name="dog type">
    <option disable value>select option</option>
    <option value="French Bulldog">French Bulldog</option>
    <option value="English Bulldog">English Bulldog</option>
    <option value="Cocker Spaniels">Cocker Spaniel</option>
    <option value="Great Dane">Great Dane</options>
    <option value="Labrador Retriever">Labrador Retriever </options>
    <option value="Dachshund">Dachshund</options>
    <option value="Golden Retriever">Golden Retriever</options>
    <option value="Beagles">Beagles</options>
    <option value="Rottweilers">Rottweilers</options>
    <option value="Mixed Breed">Mixed Breed</options>
</select>
<br>
<br>
    <label> What is your dogs gender?</label>
<input type="radio" name="radio-button" class="radio" value="1">Male</input>
 <br> 
<input type="radio" 
name="radio-button" class="radio" value="1">Female</input>
<br>
<br>
 <div class="rowtab">
   <div class="labels">
<label for="preferences">What is your dogs personality? <br>(select all that apply):</label>
  </div>
  <ul id="preferences" style="list-style; none;">
    <li class="checkbox"><label><input name"perfer" value="1" type="checkbox" class="userRating">Loving</input></label></li>
   <ul id="preferences" style="list-style; none;">
<li class="checkbox"><label><input name"perfer" value="2" type="checkbox" class="userRating">Naughty</input></label></li>
  <li class="checkbox"><label><input name"perfer" value="3" type="checkbox" class="userRating">Aggressive</input></label></li>
  </ul>
</div>  
  
<label>For any additional questions please feel free to leave a comment:</label>
<div id="message>"
 <label>
<textarea rows="3" cols="30" Placeholder="leave comment here" id="textarea" name="textarea"/> 
<p></p>
<input id="submit" type="submit" class="submit" value="submit">
<button type="submit" id="submit">My button</button>
</form>
</body>
</html>

/* file: styles.css */
body { 
width: 100%;
height: 100vh;
margin: 0;
background-color:#087474;
color: #ffffff;
font-family: arial, sans-serif; 
font-size: 16px;
}

h1, p {
text-align: center;
margin: 1em auto;
}

form{
margin: 0 auto;
max-width: 500px;
min:width: 300px;
width: 60vm;
padding-bottom: 2em;
}

fieldset {
border: 0;
padding: 2rem 0;
border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
border-bottom: none;
}

label {
  display: block;
  margin: 0.5rem 0; 
}

input, textarea, select {
width: 100%;
margin: 10px 0 0 0;
min-height: 2em;
}

.inline, textarea {
background-color: #ffffff;
border: 1px solid #ffffff;
color: #ffffff
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
backgrounnd-color: #087474
border-color: white;
min-width: 300px;
}

input[type="file"] {
  padding: 1px 2px;
}

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Welcome to our community!

  • add the ‘title’ element within ‘head’ element
  • you have duplicated ids id="preferences" - it is not allowed in html
  • the ‘textarea’ element doesn’t have the closing tag
3

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