Hi everyone,
I’m stuck at this point and don’t really understand what this task means.
I’ve added the “id” and also “name” attribute. Been a while , still cant figure it out.
Appreciate any kind of help or further tip,
Regards,
My Code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Survey Form</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="container">
<h1 id="title">Tirana Coding Camp(TCC) Survey Form</h1>
<p id="description">Thank you for taking the time to help us improve the platform</p>
<form id="survey-form">
<fieldset>
<label id="name-label">Name <input type="text" id="name" name="name" placeholder="Enter your name" /> </label>
<label id="email-label">Email <input type="email" id="email" name="email" placeholder="Enter your Email" /> </label>
<label id="number-label">Age (optional) <input type="number" id="number" name="Age" placeholder="Age" min="12" max="99" /> </label>
</fieldset>
<fieldset>
<label>Which option best describes your current role?
<select id="dropdown" name="role">
<option>Select current role</option>
<option>Student</option>
<option>Full Time Job</option>
<option>Full Time Learner</option>
<option>Prefer not to say</option>
<option>Other</option>
</select>
</label>
<label>
Would you recommend TCC to a friend?
<input type="radio" name="user-recommend" value="definitely" class="inline" />Definitely
</label>
<label>
<input type="radio" name="user-recommend" value="maybe" class="inline" />Maybe
</label>
<label>
<input type="radio" name="user-recommend" value="not sure" class="inline" />Not sure
</label>
<label>What is your favorite feature of TCC?
<select id="dropdown" name="fav_feature">
<option value="">Select an option</option>
<option value="1">Challenges</option>
<option value="2">Projects</option>
<option value="3">Community</option>
<option value="4">Open Source</option>
</select>
</label>
</fieldset>
<fieldset>
<label>What would you like to see improved? (Check all that apply)
<input type="checkbox" name="prefer" value="front-end-projects" class="inline" />Front-end Projects
</label>
<label>
<input type="checkbox" name="prefer" value="back-end-projects" class="inline" />Back-end Projects
</label>
<label>
<input type="checkbox" name="prefer" value="data-visualization" class="inline" />Data Visualization
</label>
<label>
<input type="checkbox" name="prefer" value="challenges" class="inline" />Challenges
</label>
<label>
<input type="checkbox" name="prefer" value="open-source-community" class="inline" />Open Source Community
</label>
<label>
<input type="checkbox" name="prefer" value="gitter-help-rooms" class="inline" />Gitter help rooms
</label>
<label>
<input type="checkbox" name="prefer" value="videos" class="inline" />Videos
</label>
<label>
<input type="checkbox" name="prefer" value="city-meetups" class="inline" />City Meetups
</label>
<label>
<input type="checkbox" name="prefer" value="wiki" class="inline" />Wiki
</label>
<label>
<input type="checkbox" name="prefer" value="forum" class="inline" />Forum
</label>
<label>
<input type="checkbox" name="prefer" value="additional-courses" class="inline" />Additional Courses
</label>
<label>
Any comments or suggestions? <textarea name="suggestions" rows="5" cols="60" placeholder="Enter your comment here..."></textarea>
</label>
</fieldset>
<input id="submit" type="submit" value="Submit" >
</form>
</div>
</body>
</html>
CSS
body {
width: 100%;
height: 100vh;
margin: 0;
/*
background-image:url(https://thumbs.dreamstime.com/b/survey-tablet-computer-man-holding-134040615.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
*/
background-color: #2F4F4F;
font-family: 'Tahoma', sans-serif;
font-size: 1rem;
color:white;
}
#container {
background-color: black;
margin: 2rem 15%;
}
h1, p {
margin:1em auto;
color:white;
width:100%;
position:relative;
text-align: center;
}
form {
width: 60vw;
;
max-width: 550px;
min-width: 300px;
margin:0 auto;
padding-bottom: 2em;
}
fieldset {
padding:2rem 0;
border:none;
}
label {
display:block;
margin: 0.5rem 0;
}
input,textarea, select {
background-color:#203737;
margin:10px 0 0 0;
width:100%;
min-height:1em;
}
input, textarea {
border: 1px solid #0a0a23;
color: #ffffff;
border:none;
}
::placeholder {
color:white;
opacity: 1;
}
.inline{
width:unset;
margin:0 0.5rem 0 0;
vertical-align: center;
}
input[type="text"] {
margin: 0 0;
}
input[type="submit"] {
display:block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.0rem;
border: solid 1px white;
min-width: 300px;
}
#dropdown {
color:white;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
Challenge: Build a Survey Form
Link to the challenge:
