<form>
<h1>Learner Survey Form</h1>
<div>
<label id="name-label" for="name">Name</label>
<input type="text" name="name" placeholder="Enter your name" required />
</div>
<div>
<label id="email-label" for="email">Email</label>
<input type="email" name="email" placeholder="Enter your Email" required />
</div>
<div>
<label id="number-label" for="number">Age<span class="clue">(optional)</span></label>
<input type="number" name="age" min="10" max="99" placeholder="Age" />
</div>
<div>
<p>Which option best describes your current role?</p>
<select name="role" required>
<option disabled selected value>Select current role</option>
<option value="student">Student</option>
<option value="job">Full Time Job</option>
<option value="learner">Full Time Learner</option>
<option value="preferNo">Prefer not to say</option>
<option value="other">Other</option>
</select>
</div>
<div>
<p>Would you like to share your learning to a friend?</p>
<label>
<input name="user-recommend" value="definitely" type="radio" checked />Definitely</label>
<label>
<input name="user-recommend" value="maybe" type="radio" />Maybe</label>
<label>
<input name="user-recommend" value="not-sure" type="radio" />Not sure</label>
</div>
<div>
<p> What would you like to share?<span>(Check all that apply)</span></p>
<label>
<input name="prefer" value="front-end-projects" type="checkbox"/>Front-end Projects</label>
<label>
<input name="prefer" value="back-end-projects" type="checkbox"/>Back-end Projects</label>
<label>
<input name="prefer" value="data-visualization" type="checkbox"/>Data Visualization</label>
<label>
<input name="prefer" value="challenges" type="checkbox"/>Challenges</label>
<label>
<input name="prefer" value="open-source-community" type="checkbox"/>Open Source Community</label>
<label>
<input name="prefer" value="ds" type="checkbox"/>DS & Algo</label>
<label>
<input name="prefer" value="videos" type="checkbox"/>Videos</label>
<label>
<input name="prefer" value="ml" type="checkbox"/>Machine Learning</label>
<label>
<input name="prefer" value="ar" type="checkbox"/>Argumented Reality</label>
<label>
<input name="prefer" value="additional-courses" type="checkbox"/>Additional Courses</label>
</div>
<div>
<p>Any comments or suggestions?<p>
<textarea name="comment" rows="5" placeholder="Enter your comment here..."><textarea>
</div>
<hr>
<div class="form-group">
<button type="submit" class="submit-button">Submit<button>
<div>
<form>