When I goto check my code against the guidelines, everything passes except for the element, I have put TWO form elements on top of eachother and IN the RIGHT place, please tell me why it is not accepting it like this??? I can’t bring myself to start styling it when it will not even function correctly! Please HELP! btw I had and entire FINISHED survey-form yesterday, and forgot to save it when the window closed and I lost all of it so, I am about at my wit’s end here
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>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="survey-form" class="container">
<header class="header">
<h1 id="title" class="text-center">
Self-Improvement Survey
</h1>
<p id="description" class="text-center description">
You have come for help, answer this questionaire as honestly as you possibly can. The results will help you to put a finger on the areas in you life you may need or want to improve.
</p>
</header>
<form id="survey-form">
<!-- NAME, EMAIL, AND AGE Start here -->
<div class="form-group">
<label id="name-label" for="name">What is your name?<span class="ps">(First and Last Name)</span></label>
<input
type="text"
name="name"
id="name"
class="form-control"
placeholder="First and Last Name Here"
required>
</div>
<div class="form-group">
<label id="email-label" for="email">What is your email address?<span class="ps">(Email Address)</span></label>
<input
required
type="email"
name="email"
id="email"
class="form-control"
placeholder="Please enter your Email Address Here">
</div>
<div class="form-group">
<label id="number-label" for="number">How many goals would you like to set for yourself today?</label>
<input
type="number"
name="age"
id="number"
min="1"
max="10"
required
class="form-control"
placeholder="How many Goals"/>
</div>
<!-- CURRENT MOOD 'dropdown list' Start here -->
<div class="form-group">
<p>{Which Selection} best describes your current mood?</p>
<select id="dropdown" name="mood" class="form-control required">
<option disabled selected value>Select your current Mood</option>
<option>Bored</option>
<option>Happy</option>
<option>Hungover</option>
<option>Depressed</option>
<option>Resentful</option>
</select>
</div>
<!-- Social Interactions 'radio' Start here -->
<div class="form-group">
<p>How often are your Social Interactions Lately?</p>
<label>
<input
name="social"
value="daily"
type="radio"
class="input-radio"
checked
/>
Daily
</label>
<label>
<input
name="social"
value="twiceperweek"
type="radio"
class="input-radio"
checked
/>
Twice per Week
</label>
<label>
<input
name="social"
value="weekends"
type="radio"
class="input-radio"
checked
/>
On the Weekends
</label>
<label>
<input
name="social"
value="Nope"
type="radio"
class="input-radio"
checked
/>
Never
</label>
<!-- Activities you Enjoy -->
<div class="form-group">
<p>What Days are you available to speak with a Life Coach?<span class="ps">(Check all that apply)</span></p>
<select id="availability" name="availability" class="form-control" required>
<option disabled selected value>Select an option</option>
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
</div>
<!-- Improve areas boxes -->
<div class="form-group">
<p>
What areas of life would you LIKE to improve?
<span class="ps">
(Choose 2 per submission)
</span>
</p>
<!-- left column of improvement div -->
<div class="column_01_left">
<label>
<input
name="improve"
value="fitness"
type="checkbox"
class="input-checkbox"
/>Physical Fitness
</label>
<label>
<input
name="improve"
value="financial"
type="checkbox"
class="input-checkbox"
/>Financial
</label>
<label>
<input
name="improve"
value="housing"
type="checkbox"
class="input-checkbox"
/>Housing
</label>
<label>
<input
name="improve"
value="education"
type="checkbox"
class="input-checkbox"
/>Education
</label>
</div>
<!-- right column of improvement div -->
<div class="column_right_01">
<label>
<input
name="improve"
value="relationship"
type="checkbox"
class="input-checkbox"
/>Relationship
</label>
<label>
<input
name="improve"
value="sex"
type="checkbox"
class="input-checkbox"
/>Sex
</label>
<label>
<input
name="improve"
value="work"
type="checkbox"
class="input-checkbox"
/>Work
</label>
<label>
<input
name="improve"
value="social"
type="checkbox"
class="input-checkbox"
/>Sociability
</label>
</div>
</div>
<!-- Explain goals section -->
<div class="form-group">
<p>Add up your goals for this period and draft them here:</p>
<textarea
id="goals-explain"
class="input-textarea"
name="goals-explain"
placeholder="Write your goals here..."></textarea>
</div><br>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">
Submit
</button>
</div>
</div>
</form>
</div>
</body>
</html>
body {
background-color: black;
color: white;
}
.text-center {
text-align: center;
}
.ps {
font-size: .81em;
}
label {
display: block;
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:108.0) Gecko/20100101 Firefox/108.0
Challenge: Survey Form - Build a Survey Form
Link to the challenge: