Tell us what’s happening:
Describe your issue in detail here.
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Survey form</title>
</head>
<body>
<div class="container">
<header>
<h1 id="title">Form</h1>
<p id="description">This is a form.</p>
</header>
<!--start of form-->
<form id="survey-form">
<div class="form-group-name">
<label id="name-label" for="name">
<input type="text"
name="name"
id="name"
class="form-control"
placeholder="Enter your name"
required required>
Please enter your name</label>
</div>
<!--start of email-->
<div class="form-group">
<label id="name-label" for="email">
<input type="text"
name="name"
id="email"
class="form-control"
placeholder="Enter your email"
required required>
Please enter your email</label>
</div>
<!-- start of age -->
<div class="form-group">
<label id="age-label" for="number">
<span class="clue"></span>(optional)</label>
<input
type="number"
name="age"
id="number-age"
min="10"
max="140"
class="form-control"
placeholder="age"
/>
</div>
<!-- start of option rols -->
<div class="form-group">
<p>Which option best describes your current role?</p>
<select id="dropdown" name="role" class="form-control" required>
<option disabled selected value>select current role</option>
<option value="student">student</option>
<option value="full-time-employe">full time employe</option>
<option value="part-time-employe">part time employe</option>
<option value="perfer-not-to-say">perfer not to say</option>
<option value="other">other</option>
</select>
</div>
<!-- start of radio -->
<div class="form-group">
<p>Would you recommend coding for free camp</p>
<label>
<input
type="radio"
value="defintely"
name="user-recommend"
class="input-radio"
checked/>Defintely
</label>
<label>
<input
name="user-recommend"
value="maybe"
type="radio"
class="input-radio"
/>Maybe</label>
<label>
<input
name="user-recommend"
value="need-to-think-about-it"
type="radio"
class="input-radio"
/>Need to think about it</label>
</div>
<!-- start of favorite dropdown -->
<div class="form-group">
<p>What is your favorite thing about us?</p>
<select name="dropdown" id="role">
<option disabled selected value>select an option></option>
<option value="projects">Projects</option>
<option value="opensource">Open source</option>
<option value="challenges">Challenges</option>
<option value="community">Community</option>
</select>
</div>
<!-- start of checkbox -->
<div class="form-group">
<p>What would you like to see improved?(Check all that apply)</p>
<label>
<input type="checkbox" name="user-chosen" value="front-end-project"
class="input-checkbox"/>Front end Projects</label>
<label><input type="checkbox"
name="user-chosen"
value="back-end-project"
class="input-checkbox">Back end Projects</label>
<label><input type="checkbox"
name="user-chosen"
value="visualization"
class="input-checkbox">Data Visualization</label>
<label><input type="checkbox"
name="user-chosen" value="challenges"
class="input-checkbox"
>Challenges</label>
<label><input type="checkbox" name="user-chosen" value="open-source-community"
class="input-checkbox">Open Source Community</label>
<label><input type="checkbox"
name="user-chosen"
value="gitter-help-rooms"
class="input-checkbox">Gitter Help Rooms</label>
<label><input type="checkbox" name="user-chosen"
value="videos"
class="input-checkbox">Videos</label>
<label><input type="checkbox" name="user-chosen"
value="city-meetups"
class="input-checkbox"/>City Meetups</label>
<label><input type="checkbox"
name="user-chosen"
value="wiki"
class="input-checkbox"/>Wiki</label>
<label><input type="checkbox"
name="user-chose"
value="forum"
class="input-checkbox"/>Forum</label>
<label><input type="checkbox"
name="user-chosen"
value="additional-courses"
class="input-checkbox"/>Additional Courses</label>
</div>
<!-- start of input textarea -->
<div class="form-group">
<p>Any comments or suggestions?</p>
<textarea
id="comments"
class="input-textarea"
name="comment"
placeholder="Enter your comment here..."
></textarea>
</div>
<!-- start of submit button -->
<div class="form-group">
<button type="submit" id="submit"
class="submit-button">Submit
</button>
</div>
</form>
</div>
</body>
</html>
.container {
display: grid;
height: 100%;
width: 50%;
grid-template-rows: repeat(8, 1fr);
grid-template-columns: repeat(5, 1fr);
grid-gap: 20px;
}
header {
padding: 2rem 40rem 5rem 26rem
}
p {
text-align: center;
}
#title {
text-align: center;
margin: 0rem 10rem 0rem 27rem;
/* figure out padding */
padding: 1rem;
font-family: 'Raleway', sans-serif;
min-height: 40px;
min-width: 50px;
border: 1px solid;
border-radius: 1rem;
background-color:lightblue;
grid-column: 1 / 3;
}
#description {
margin: 1rem 3rem 1rem 20rem;
padding: 0rem 0rem 0rem 0rem;
text-align: center;
border: 1px solid;
border-radius: .5rem;
background-color: red;
}
body {
/* figure out how to use img */
background-color: teal;
}
.survey-form {
}
.form-group-name {
border: 1px solid;
background-color: lightblue;
grid-row: 2;
grid-column: 2;
}
.form-group {
border: 1px solid ;
margin: 2rem 9rem 1rem 10rem;
padding: 1rem 4rem 2rem 3rem;
background-color: lightblue;
box-shadow: 10px 5px 5px powderblue;
}
label {
margin: .2rem .2rem .2rem .2rem;
padding: .1rem .1rem .1rem .1rem;
}
.form-control {
margin: .4rem .4rem .4rem .4rem;
};
/* .clue {
} */
.input-radio {
}
.input-checkbox {
}
.input-textarea {
}
.submit-button {
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0
Challenge: Build a Survey Form
Link to the challenge:
