Tell us what’s happening:
I have develope the app.
all test pass except on that is “Your #name should require input.” but my code have required attribute eventually my code did not pass the test i dont know.
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!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">freeCodeCamp Survey Form</h1>
<p id="description">
Thank you for taking the time to help us improve the platform
</p>
<form id="survey-form">
<div>
<label id="name-label" for="name"
>Name<input type="text" id="name"
name="name" placeholder="ENTER YOUR NAME" required</label>
</div>
<div>
<label id="email-label"
>Email<input type="email" id="email"
name="email" placeholder="ENTER YOUR EMAIL"
required
</label>
</div>
<div>
<label id="number-label"
>Age<input
required
id="number" type="number" name="age" placeholder="ENTER YOUR AGE"
min="13" max="120"</label
>
</div>
<div>
<label for="dropdown"
>Which option best describes your current role?
<select id="dropdown">
<option value="">select current role</option>
<option value="1">student</option>
<option value="2">full time job</option>
<option value="3">full time learner</option>
<option value="4">prefer not to say</option>
<option value="5">other</option>
</select>
</label>
</div>
<div>
<label>Would you recommend freeCodeCamp to a friend?</label
><label>
<input
type="radio"
name="radio"
value="definetly"
class="inline"
/>Definetly
</label>
<label>
<input type="radio" name="radio" value="maybe" class="inline" />Maybe
</label>
<label>
<input type="radio" name="radio" value="not sure" class="inline" />Not
sure
</label>
</div>
<div>
<label>What would you like to see improved?</label>
<label
><input
type="checkbox"
name="checkbox"
value="Front-end"
class="inline"
/>Front-end Projects</label
>
<label
><input
type="checkbox"
class="inline"
name="checkbox"
value="Back-end"
/>Back-end Projects</label
>
<label
><input
type="checkbox"
name="checkbox"
value="Open Source Community"
class="inline"
/>Open Source Community</label
>
<label>
<input
value="Forum"
type="checkbox"
name="checkbox"
class="inline"
/>Forum
</label>
<label>
<input
name="checkbox"
class="inline"
value="Additional Courses"
type="checkbox"
/>Additional Courses
</label>
</div>
<div>
<label for="textarea"
>Any comments or suggestions?
<textarea
name="textarea"
cols="30"
rows="4"
placeholder="ENTER YOUR COMMENTS HERE..."
></textarea>
</label>
</div>
<div>
<label> <button type="submit" id="submit" class="sub" />submit </label>
</div>
</form>
</body>
</html>
Replace these two sentences with your copied code.
Please leave the line above and the line below,
because they allow your code to properly format in the post.
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;
}
h1, p {
margin: 1em auto 16px auto;
text-align: center;
}
p{
padding-bottom: 40px;
margin-top: 2px;
}
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
label {
display: block;
margin: 0.5rem 0;
}
input,
textarea,
select {
margin: 10px 0 0 0;
min-height: 2em;
width: 100%;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
.sub{
display: block;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: #f1c917;
border:none;
min-width: 300px;
}
div{
padding: 10px 5px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge: