Tell us what’s happening:
Your code so far
<!-- file: index.html -->
<!doctype html>
<link rel="stylesheet" href="styles.css">
<h1 id="title">Title</h1>
<p id="description">Description</p>
<form id="survey-form">
<label>Name:</label><br>
<input id="name" type="text" placeholder="Enter your name" required></input>
</br><br>
<label>Email:</label><br>
<label id="email-label"</label>
<input id="email" type="email" placeholder="Enter your Email" required></input></br><br>
<label>Age:</label><br>
<label id="number-label"</label>
<input id="number" type="number" min="0" max="99" placeholder="Age" required</input></br><br>
<label>Which option best describes your current role?</label><br>
<select id="dropdown" placeholder="Select Current Role">
<option name="option" type="radio" value="option"> Select Current Role</option>
<option name="option" type="radio" value="Student">Student</option>
<option name="option" type="radio" value="Full-Time-Job" >Full Time Job</option>
<option name="option" type="radio" value="Full-Time-Learner">Full Time Learner</option>
<option name="option" type="radio" value="Prefer-not-to-ay" >Prefer not to say</option>
<option input="" name="option"type="radio" value="other" >other</option>
</select>
<br>
<br><label id="name-label">Would you re recommend freeCodeCamp to a friend?</label></br>
<label for="definitely" value="definitely"><input id="definitely" type="radio" name="definitely-maybe-not-sure"> Difinitely</label><br>
<label for="maybe" value="maybe"><input id="maybe" type="radio" name="definitely-maybe-not-sure"> Maybe</label><br>
<label for="not-sure" value="not-sure"><input id="not-sure" type="radio" name="definitely-maybe-not-sure"> Not Sure</label><br><br>
<label>What would you like to see improved? (Check all that apply)</label><br>
<input type="checkbox" value="Front-end Projects">Front-end Projects</input><br>
<input type="checkbox" value="Back-end Projects">Back-end Projects</input><br>
<input type="checkbox" value="ata Visualization<">Data Visualization</input><br>
<input type="checkbox" value="Challenges">Challenges</input><br>
<input type="checkbox" value="Open Source Community">Open Source Community</input><br>
<input type="checkbox" value="Gitter help rooms">Gitter help rooms</input><br>
<input type="checkbox" value="Videos">Videos</input><br>
<input type="checkbox" value="City Meetups">City Meetups</input><br>
<input type="checkbox" value="Wiki">Wiki</input><br>
<input type="checkbox" value="Forum">Forum</input><br>
<input type="checkbox" value="Additional Courses">Additional Courses</input><br><br>
<label>Any comments or suggestions?</label><br><br>
<textarea placeholder="Enter your comment here..."></textarea>
<br><br>
<input type="submit" id="submit"></input>
</form>
/* file: styles.css */
body{
background-color: grey;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36 Edg/113.0.1774.42
Challenge: Survey Form - Build a Survey Form
Link to the challenge:
Just replace the (value=“definitely”) from the label element to the input element for all 3 radio inputs. Should work.
You don’t have any input element with ‘type’ attribute set to the value of “radio”. The html code is not written rightfully. Check it out for yourself:
Changed and reformatted the html doc but still the same error remains
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>English Language Learning Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 id="title">English Language Learning Form</h1>
<p id="description"><i>This form helps us personalize your lessons.</i></p>
<form method="post" id="survey-form">
<fieldset>
<label
for="name" id="name-label">Name<input id="name" name="name" type="text" placeholder="Enter your name" required></label>
<label
for="email" id="email-label">Email <input id="email" name="email" type="email" placeholder="Enter your email" required></label>
<label
for="occupation">Occupation <input id="occupation=label" name="occupation" type="text"></label>
<label
for="age" id="number-label">Age <input id="number" name="age" class="age" type="number" min="4" max="99" placeholder="Enter your age" ></label>
</fieldset>
<fieldset>
<label
for="level" class="level"> What is your current English level?<br>
<input id="level-0" type="radio" name="level-0" class="level" value="no-knowledge"/> No Knowledge<br>
<input id="level-1" type="radio" name="level-1" class="level" value="beginner"/> Beginner<br>
<input id="level-2" type="radio" name="level-2" class="level" value="intermediate"/> Intermediate<br>
<input id="level-3" type="radio" name="level-3" class="level" value="advanced"/> Advanced</label>
</fieldset>
<fieldset>
<label for="reason">Why do you want to learn English?
<select id="dropdown" name="reason">
<option value="">(select one)</option>
<option value="1">Conversation</option>
<option value="2">Business</option>
<option value="3">Both</option>
</select>
</label>
</fieldset>
<fieldset>
<label for="reason">What would you like to focus on?<br><em>Check all that apply.</em></label>
<label><input type="checkbox" name="Speaking" id="Speaking" value="Speaking" class="inline" />Speaking</label>
<label><input type="checkbox" name="Writing" id="Writing" value="Writing" class="inline" />Writing</label>
<label><input type="checkbox" name="Reading" id="Reading" value="Reading" class="inline" />Reading</label>
<label><input type="checkbox" name="Understanding" id="Understanding" value="Understanding" class="inline" />Understanding</label>
</fieldset>
<fieldset>
<label
for="interests">What are your interests?<em> Provide 3 </em> <input id="interests-label" name="interests" class="interests" required></label>
<label for="additional information">Additional Information <textarea>If there is any other information you would like to share please write it here.</textarea></label>
</fieldset>
<fieldset>
<label for="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" value="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions.</a>
</label>
</fieldset>
<input id="submit" type="submit" value="Submit"/>
</form>
</body>
</html>
Everything except X mark is okay only that is leaving me from completing the project, so if anyone can please help me
This is the new css
body {
width: 100%;
height: 100vh;
margin: 0;
padding: 1rem;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;
}
h1 {
margin: 0.5em auto;
text-align: center;
color: #A2D9CE;
text-shadow: 1px 1px white;
}
p {
margin: 0.5em auto;
text-align: center;
color:#D0ECE7
}
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset {
border: none;
padding: 1rem 0;
border-bottom: 3px solid #3b3b4f;
}
label {
display: block;
margin: 0.5rem 0;
}
input,
textarea,
select {
margin: 5px 0 0 0;
width: 100%;
min-height: 1em;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
cursor: pointer;
}
.age {
width: 35%;
}
.level {
width: unset;
margin: 0 0.5em 0 0;
cursor: pointer;
}
.interests {
min-height: 5em;
}
input, textarea, dropdown {
background-color: #E8F6F3;
border: 1px solid #D0ECE7;
color: #212F3D;
}
input[type=“submit”] {
display: block;
width: 25%;
height: 2em;
font-size: 1rem;
background-color: #73C6B6;
border-color: #16A085;
min-width: 300px;
color: white;
border-radius: 5px;
}
input[type=“submit”]:hover {
background-color: #A569BD;
color: white;
}
Group your elements with the ‘type’ attribute set to the value of “radio” by adding the same value for the ‘name’ attribute.
system
November 16, 2023, 12:04am
8
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
