Tell us what’s happening:
Describe your issue in detail here.
I am confused on the requirement:
You should have at least one textarea element that is a descendant of #survey-form .
I’ve tried a variety of approaches, but currently can’t find the correct one.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css"
type="text/css"
rel="stylesheet">
<title>Survey</title>
</head>
<body>
<h1 id="title">Survey
</h1>
<p id="description">
This is a survey of how well you like this survey!
</p>
<fieldset>
<form action="https://survey-form.freecodecamp.rocks" id="survey-form">
<label id="name-label" for="first-name">Enter First Name:
<input id ="name" type="text" placeholder="Full Name" required>
</label>
<label id="email-label" for="email"> Enter Email Address:
<input id="email" type="email" placeholder="Email Address" required>
</label>
<label id="number-label" for="number"> Enter Phone Number:
<input id="number" type="number" placeholder="(###)###-####" required min="10" max="11">
</label>
<label id="radio-label" for="radio"> Cats or Dogs:
<label id="cats-label" for="cats"><input id="cats" type="radio" name="cats-dogs" class="inline" value="dogs-cats" /> Cats </label>
<label id="dogs-label" for="dogs"><input id="dogs" type="radio" name="cats-dogs" class="inline" value="dogs-cats" /> Dogs</label>
<label id="terms-and-conditions-label" for="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" value="value"> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/" target="_blank">terms and conditions</a>
</label>
<label id="awesome-label" for="awesome">
<input id="awesome" type="checkbox" required name="awesome" class="inline" value="value1" /> I accept that this survey is awesome!
</label>
<label id="dropdown-label" for="dropdown">Please rank this Survey!
<select id="dropdown" name="dropdown">
<option value="">(select one)</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</label>
</form>
<form id ="survey-form" for="textarea">
<label is="textarea-label" for="textarea"> You can type stuff here if you want!
<input id="textarea" type ="textarea" placeholder="Typing space">
</label>
</form>
</fieldset>
<form id="survey-form" action="submit">
<label id="submit-form">
<input id="submit"type="submit" value="Submit" />
</label>
</form>
</body>
</html>
/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0;
background-color:black;
color: #f5f6f7;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 16px;
}
h1, p {
margin: 1em auto;
text-align: center;
}
form {
width: 64vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 4em;
}
fieldset {
border: none;
padding: 1rem 0;
border-bottom: 3px solid darkgrey;
}
fieldset:last-of-type {
border-bottom: none;
}
label {
display: block;
margin: 0.8rem 0;
}
input,
textarea,
select {
margin: 8px 0 0 0;
width: 100%;
min-height: 1em;
}
input, textarea {
background-color: #0a0a23;
border: 1px solid #0a0a23;
color: #ffffff;
}
input[type="submit"] {
display: block;
width: 35%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: #3b3b4f;
border-color: white;
min-width: 300px;
}
input[type="file"] {
padding: 1px 2px;
}
a {
color:dfdfe2;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 Edg/114.0.1823.67
Challenge: Survey Form - Build a Survey Form
Link to the challenge: