This is part of the certification so my apologies if I’m not supposed to be asking for help.
First I am wondering if I am using the fieldset tag properly, but secondly and more vexing is I cannot seem to locate my error " You should have a select field with an id of dropdown ."
Any feedback or hints would be greatly appreciate.
Your code so far
<!-- file: index.html -->
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<section id="container">
<header>
<h1 id="title">Your candy is almost on the way! </h1>
<p id="description">Thank you for your interest in Pamzies Candiez, for us to best create your customized party favor needs please fill out your candy request below!</p>
</header>
<form id="survey-form">
<fieldset id="personal"> <h2 class="form-heading"> Personl information: </h2>
<label id="name-label" for="name">First Name:<input id="name" type="text" placeholder="Enter your first name" required></label>
<label for="last-name">Last Name: <input id="name-last" type="text" placeholder="Enter your Last name" required></label>
<label id="email-label"for="email">Email:<input id="email" type="email" placeholder="@.com" required></label>
<label for="birthday">Birthday:<input type="date" id="birthday" name="birthday"></label>
</fieldset>
<fieldset>
<h2 class="form-heading">About your Event:</h2>
<label id="number-label" for="number">About how many are attending? <input type="number" id="number" name="number" min="2" max="50"placeholder="2-50"> </label>
<label id="dropdown" for="selection">What are you celebrating?
<select id="selection dropdown" name="selection">
<option value=""disabled selected>Select from below</option>
<option value="baby">Baby Shower</option>
<option value="bridal">Bridal Shower</option>
<option value="wedding">Wedding</option>
<option value="birthday">Birthday Party</option>
<option value="other">Other</option>
</select></label>
<label for="additional-information">Provide additional information:
<textarea id="additional-information" name="additional-information" rows="5" cols="30" placeholder="The baby shower is a for a girl named Candy...."></textarea>
</label>
</fieldset>
<fieldset>
<h2 class="form-heading">Would you like to add decorations for $30?</h2>
<label for="yes"><input class="inline" type="radio" id="yes" name="add-decorations" value="yes" checked>Yes Please!</label>
<label for="no"><input class="inline" type="radio" id="no" name="add-decorations" value="no">No Thank You.</label>
</fieldset>
<fieldset> <h2 class="form-heading"> Submit your order:</h2>
<label for="agree">
<input id="agree" type="checkbox" value="agree" required name="agree" class="inline" /> I agree to be contacted. </label>
<label for="agree">
<input id="subscribe" type="checkbox" value="subscribed" name="subscribe" class="inline" /> Please tell me about future deals! </label>
<input type="submit" value="Submit" id="submit" />
</fieldset>
</form>
</section>
/* file: styles.css */
* {
box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation&family=Emilys+Candy&display=swap');
#container {
text-align: center;
padding: 1%;
width: 70%;
background-color: pink;
border-radius: 50px;
box-shadow: 5px 10px 8px #D7C5D7;
}
#title, h1 {
font-family: 'Emilys Candy', cursive;
color: red;
font-size: 1.8em;
}
h2 {
font-family: 'Emilys Candy', cursive;
font-size: 1.3em;
margin: 8px 0;
}
#description, body {
font-family: 'Edu NSW ACT Foundation', cursive;
}
body {
display: flex;
justify-content: center;
background-image: url('https://s3.amazonaws.com/spoonflower/public/design_thumbnails/0557/5370/rCandy_bar_pattern_shop_preview.png')
}
p {
font-size: 1.4em;
}
header {
padding: 0 8px;
}
input:focus {
background-color: lightblue;
}
#survey-form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
#personal label {
display: inline-block;
text-align: left;
margin: 2%;
width: 40%;
}
label {
display: block;
text-align: left;
margin: 2%;
width: 50%;
}
input, textarea, select {
width: 100%;
min-height: 2em;
}
fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #5EBEF1;
}
.form-heading {
text-align: left;
margin-bottom: 1rem;
}
#number{
width: 60px;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
#selection {
width: 150px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15
Challenge: Survey Form - Build a Survey Form
Link to the challenge:
