Tell us what’s happening:
I have completed all the tests on the HTML and CSS Survey project except for number 31 (it asks to create a select element with an id of dropdown). I think I have done that part with my code being *** <select id="dropdown"> ***. I looked at other codes and they have the same line as I do. If you could offer some insight, I would be grateful. Thank you in advance.
Your code so far
html
<!-- file: index.html -->
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width" initial-scale="1.0">
<h1 id="title"> Valorant Survey Form </h1>
<p id="description"> This form is purely for entertainment and holds no afiliation with Riot Games </p>
</head>
<body>
<div class="box">
<form id="survey-form">
<fieldset for="name">
<label id="name-label"> Name </label>
<input id="name" type="text" placeholder="Name" required/>
</fieldset>
<fieldset for="email">
<label id="email-label">Email</label>
<input id="email" type="email" placeholder="Email" required/>
</fieldset>
<fieldset for="age">
<label id="number-label">Age</label>
<input id="number" type="number" min="10" max="100" placeholder="Age"/>
</fieldset>
<fieldset for="fav-agent">
<label id="dropdown">Who is your favorite agent?</label>
<select id="dropdown">
<option>select one please</option>
<option>Brimstone</option>
<option>Phoenix</option>
<option>Sage</option>
<option>Sova</option>
<option>Viper</option>
<option>Cypher</option>
<option>Reyna</option>
<option>Killjoy</option>
<option>Breach</option>
<option>Omen</option>
<option>Breach</option>
<option>Jett</option>
<option>Raze</option>
<option>Skye</option>
<option>Yoru</option>
<option>Astra</option>
<option>Kay/o</option>
<option>Chamber</option>
<option>Neon</option>
<option>Fade</option>
<option>Harbor</option>
<option>Gekko</option>
<option>Deadlock</option>
<option>Iso</option>
<option>Clove</option>
<option>Vyse</option>
<option>Tejo</option>
</select>
</fieldset>
<label name="ranks" for="rank">What rank are you?</label>
<fieldset for="ranks">
<label id="iron">Iron</label>
<input name="rank" id="iron" type="radio" checked value="Iron" />
<label id="broze">Bronze</label>
<input name="rank" id="bronze" type="radio" value="Bronze" />
<label id="silver">Silver</label>
<input name="rank" id="silver" type="radio" value="Silver" />
<label id="gold">Gold</label>
<input name="rank" type="radio" id="gold" value="Gold" />
<label id="platinum">Platinum</label>
<input name="rank" type="radio" id="platinum" value="Platinum" />
<label id="diamond">Diamond</label>
<input name="rank" type="radio" id="diamond" value="Diamond" />
<label id="ascendant">Ascendant</label>
<input name="rank" type="radio" id="acsendant" value="Ascendant" />
<label id="immortal">Immortal</label>
<input name="rank" type="radio" id="immortal" value="Immortal" />
<label id="radiant">Radiant</label>
<input name="rank" type="radio" id="radiant" value="Radiant" />
</fieldset>
<fieldset for="fav-maps">
<label id="ascent">Ascent</label>
<input name="map" type="checkbox" checked value="Ascent" />
<label id="bind">Bind</label>
<input name="map" type="checkbox" value="Bind" />
<label id="haven">Haven</label>
<input name="map" type="checkbox" value="Haven" />
<label id="icebox">Icebox</label>
<input name="map" type="checkbox" value="Icebox" />
<label id="Split">Split</label>
<input name="map" type="checkbox" value="Split" />
</fieldset>
<fieldset for="comments">
<label for="comments">Tell us about your experience playing Valorant</label>
<textarea name="comments" id="comments" rows="7" cols="38" >
</textarea>
<label for="submit">
<input type="submit" name="submit" id="submit">
</form>
</body>
</html>
/* file: styles.css */
h1{
font-family: arial;
margin-left: 36%;
color: #002090;
font-size: 50;
}
p{
font-family: sans-serif;
Margin-left: 34%;
color: #002055;
padding-bottom: 100px
}
body{
background-color: lightblue;
color: #002055;
font-family: sans-serif;
font-weight: bold
}
fieldset{
margin: 15px;
border-top: 0;
border-bottom: solid 2px #004490;
border-left: 0;
border-right: 0;
}
.box{
width: 450px;
height: 600px;
margin: auto;
background-color: lightblue;
padding: 20px
}
input[type="submit"]{
padding-left: 60px;
padding-right: 60px;
background-color: lightgrey;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 Edg/132.0.0.0
Challenge Information:
Survey Form - Build a Survey Form