Tell us what’s happening:
Describe your issue in detail here.
am confused here please can you explain how i can write the following:
-
You should have an
inputelement with anidofname. -
Your
#nameshould have atypeoftext.
3.Your #name should require input.
-
Your
#nameshould be a descedant of#survey-form.Your code so far
/* file: index.html */
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Survey Form</title>
<link rel="stylesheet"href="styles.css" />
</head>
<body>
<h1 id="title">Survey Form</h1>
<p id="description" >Please let us know how we can improve freecode camp by answering the following questions</p>
<form action="https://survey-form.freecodeccamp.rocks" id="survey-form">
<fieldset>
<label for="name-label">Enter your first name:<input type="text" id="name" id="name-label" placeholder="First Name" required></label>
<label for="name-label">Enter your last name: <input type="text" name="name" id="name-label" placeholder="Last Name" required/></label>
<label for="email-label">Enter your email: <input type="email" name="email" id="email-label"placeholder="Email Address"required/> </label>
<label for="number-label">Enter your age: <input type="number" name="number" id="number-label" min="10" max="40" placeholder="Age" required /></label>
</fieldset>
<fieldset>
<label for="dropdown">How did you hear about FreeCode Camp
<select id="dropdown" name="dropdown">
<option value="">(Select one)</option>
<option value="1">Youtube</option>
<option value="2">Google</option>
<option value="3">From a friend</option>
<option value="4">others</option>
</select>
</label>
</fieldset>
<fieldset>
<p>Please rate us</p>
<label for="rate"><input type="radio" id="rate" name="excellent"value="excellent" class="block-level" />Excellent</label>
<label for="rate"> <input type="radio" id="rate" name="Very good" value="Very good" class="block-level">Very Good</input></label>
<label for="rate"> <input type="radio" id="rate" name="poor" value="Poor" class="block-level">Poor</input></label>
<p>Where do you want us to improve?</p>
<label><input type="checkbox" name="checkbox" value="Front-end projects"/>Front-end project</label>
<label><input type="checkbox" name="checkbox" value="Back-end projects"/>Back-end project</label>
<label><input type="checkbox" name="checkbox" value="Forum"/>Forum</label>
<label><input type="checkbox" name="checkbox" value="Wiki"/>Wiki</label>
<label for="bio">Any Comments or suggestions?
<textarea id="bio" name="bio"row="30"cols="50"placeholder="please type your suggestions here"></textarea>
</fieldset>
<input type="submit"value="submit"/>
</form>
</body>
</html>
/* file: styles.css */
body{
width: 100%;
height: 100vh;
margin: 0;
background-color: #228B22;
color: #000000;
font-family: Verdana;
font-size: 17px;
background-image: url( https://images.pexels.com/photos/935743/pexels-photo-935743.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
}
h1, p{
margin: 1em auto;
text-align: center;
}
form {
width: 60vw;
max-width: 500px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #FF1493;
}
feildset:last-of-type{
border-bottom: none;
}
label{
display: block;
margin: 0.5rem 0;
}
input,textarea,select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
}
input, textarea {
background-color: #8B008B;
border: 1px solid #8B008B;
color: #000000;
}
.block-level {
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;
background-color: #FFFFFF;
border-color: #000000;
min-width: 300px;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge:
The first error I am getting with your code is: