Tell us what’s happening:
I’m trying to include a required textarea box within a dropdown menu. If someone selects the “Other” option, I want a required text area box in which they must require a response. Here’s what I have so far…
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css" />
<div id="outside">
</head>
<body>
<h1 id="title">Such a Time as This Agent Interest Form</h1>
<hr class="hr1">
<p class="tagline" id="description">Tell Us a Little about Yourself</p>
<form id="survey-form">
<div>
<input type="text" name="name" placeholder="Name">
<label id="name-label">Name</label>
</div>
<div>
<input type="text" name="email" placeholder="E-Mail Address">
<label id=email-label>E-Mail Address</label>
</div>
<div>
<input type="number" name="age" required min="15" max="120" placeholder="Age">
<label id="number-label">Age</label>
</div>
<br>
<div>
<label>What is your current occupation?</label></div>
<br>
<div>
<input type="radio" name="occupation" value="Sales"><label>Sales</label></div>
<div>
<input type="radio" name="occupation" value="Customer Service"><label>Customer Service</label></div>
<div>
<input type="radio" name="occupation" value="Accounting"><label>Accounting</label>
</div>
<div>
<input type="radio" name="occupation" value="Manager"><label>Manager</label>
</div>
<br>
<div>
<label>What is your current employment status?</label>
</div>
<br>
<div>
<input type="radio" name="employment" value="Full-Time"><label>Full-Time</label>
</div>
<div>
<input type="radio" name="employment" value="Part-Time"><label>Part-Time</label>
</div>
<div>
<input type="radio" name="employment" value="Unemployed"><label>Unemployed</label>
</div>
<br>
<div>
<label>Select all destinations that you've visited within the past five years</label>
</div>
<br>
<select id="dropdown">
<option value="">Select One</option>
<option value="1">Walt Disney World</option>
<option value="2">Disneyland</option>
<option value="3">Universal Studios Hollywood</option>
<option value="4">Universal Studios Orlando</option>
<option value="5">Sandals</option>
<option value="6">Beaches</option>
<option value="7" textarea id="Describe" name="Other Location" placeholder="List destination">Other</option></div>
</select>
</body>
/* file: styles.css */
h1 {
font-family: sans-serif;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
body {
background-color: gray;
}
.tagline {
font-size: 20px;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;<
width: 70%
margin: 0 auto;
display: inline-block;
}
.hr1 {
margin-top: 10px;
margin-bottom: 10px;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge: