Tell us what’s happening:
I keep getting the following errors:
-
You should have an
inputorbuttonelement with anidofsubmit. -
Failed:Your
#submitshould have atypeofsubmit. -
Failed:Your
#submitshould 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:
