I am having issues with the 5th div (“Would you recommend this site to a friend?”)
- Why isn’t the text showing up?
- Why is the “Definitely” radio button absent?
Thank you!
<!-- file: index.html -->
<!DOCTYPE html>
<html lng="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header class="header>"
<h1 id="title" class="text-center">Crystal Survey Form</h1>
<p id="description" class="description text-center">
Thank you for taking the time to help us improve the platform
</p>
</header>
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label id="email-label" for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Enter your email" required>
</div>
<div class="form-group"></div>
<label id="number-label" for="number">
Age
<span class="clue">(optional)</span>
</label>
<input type="number" name="age" id="number" min="10" max="99" class="form-control" placeholder="Age">
</div>
<div class="form-group">
<p>Which describes your interest level in crystals?</p>
<select id="dropdown" name="interest" class="form-control" required>
<option disabled selected value>Select current interest level</option>
<option value="Minimal">Minimal</option>
<option value="Moderate">Moderate</option>
<option value="High">High</option>
<option value="Extreme">Extreme</option>
<option value="Addiction">I think I have an addiction</option>
</div>
<div class="form-group">
<p>Would you recommend this site to a friend?</p>
<label name="user-recommend" value="definitely" type="radio" class="input-radio" checked>Definitely</label>
<label>
<input name="user-recommend" value="maybe" type="radio" class="input-radio">
Maybe
</label>
<label>
<input name="user-recommend" value="notsure" type="radio" class="input-radio">
Not Sure
</label>
</div>
<div class="form-group">
<p>What is your favorite thing about crystals?</p>
<select id="most-like" name="mostlike" class="form-control" required>
<option disabled selected value>Select an option</option>
<option value="metaphysical">Metaphysical properties</option>
<option value="minerals">Mineral properties</option>
<option value="shapes">Unique shapes</option>
<option value="iridescence">Iridescence</option>
</select>
</div>
<div class="form-group">
<p>What would you like to see improved on the site?
<span class="clue">(Check all that apply)</span>
</p>
<label>
<input name="prefer" value="community" type="checkbox" class="input-checkbox">Community
</label>
<label>
<input name="prefer" value="memes" type="checkbox" class="input-checkbox">Memes
</label>
<label>
<input name="prefer" value="related" type="checkbox" class="input-checkbox">Related sites
</label>
<label>
<input name="prefer" value="images" type="checkbox" class="input-checkbox">Images
</label>
</div>
<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>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">Submit</button>
</div>
</form>
</div>
</body>
</html>
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge:
