<!
DOCTYPE html>
<html lang="en">
<head>
<title>Music Survey</title>
<meta charset="utf-8">
<!-- Link the external CSS file to this document below this comment. -->
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<header>
<h1>Music Survey</h1>
</header>
<main>
<form id="survey" name="survey" method="post"
action="[Link]
enctype="application/x-www-form-urlencoded">
<!-- Step 1 -->
<section>
<h2>Please complete the following information about yourself below.</h2>
<fieldset>
<legend><strong>Step 1: Your information</strong></legend>
<label>
Name: <input type="text" name="name" id="name" size="30"
placeholder="Full Name" required autofocus> <br>
</label>
<label>
Email: <input type="email" name="email" id="email" size="30"
placeholder="Email Address" required> <br>
</label>
<label>
Name: <input type="tel" name="phone" id="phone" size="30"
placeholder="Phone Number" required> <br>
</label>
Please select your gender:
<label>Male <input type="radio" name="gender" value="male"></label>
<label>Female <input type="radio" name="gender"
value="female"></label>
<label>Prefer not to answer<input type="radio" name="gender"
value="no_answer"><br> </label>
<label>
Age: <input type="range" min="5" max="100" value="5" name="age"
id="myRange">
</label>
<span id="demo"></span> Years Old<br>
</fieldset>
</section>
<!-- Step 2 -->
<section>
<h2>Let us know about your favorite genre(s). Check all that apply.</h2>
<fieldset>
<legend><strong>Step 2: Favorite Genre(s)</strong></legend>
<label>Pop: <input type="checkbox" name="pop" id="pop"
value="yes"></label>
<label>Rock: <input type="checkbox" name="rock" id="rock"
value="yes"></label>
<label>Rap: <input type="checkbox" name="rap" id="rap"
value="yes"></label>
<label>Classical: <input type="checkbox" name="classical" id="classical"
value="yes"></label>
<label>Folk: <input type="checkbox" name="folk" id="folk"
value="yes"></label>
<label>Country: <input type="checkbox" name="country" id="country"
value="yes"></label>
<label>Other: <input type="checkbox" name="other" id="other"
value="yes"></label>
</fieldset>
</section>
<!-- Step 3 -->
<section>
<h2>How do you purchase your music?</h2>
<fieldset>
<legend><strong>Step 3: Purchase Options</strong></legend>
<label>I mainly purchase music through:
<select name="purchase_options" id="purchase_options">
<option selected="selected" disabled>Please Select One...</option>
<option value="itunes">iTunes</option>
<option value="p2p">Peer2Peer Sites</option>
<option value="paid_sites">Paid Subscription</option>
<option value="other">Other</option>
</select>
</label>
</fieldset>
</section>
<!-- Step 4 -->
<section>
<h2>Please share your thoughts with us.</h2>
<fieldset>
<legend><strong>Step 4: Share Your Thoughts</strong></legend>
How has music influenced your life?
<div class="comment">
<label><textarea name="Comments" id="UserComments" class="textinput"
onFocus="javascript:[Link]='';">
Place your comments here</textarea></label>
</div>
</fieldset>
</section>
<!-- Step 5 -->
<section>
<h2>Submit or Reset the form below.</h2>
<fieldset>
<legend><strong>Step 5: Send it!</strong></legend>
<input id="submit" type="submit" value="Complete Survey">
<input id="reset" type="reset" value="Reset">
</fieldset>
</section>
</form>
</main>
<footer>
<!-- Hyperlink both the HTML5 Validation and Course Homepage text to link to
their respective sites -->
<p id="validation">
<a
href="[Link]
itwp1000/homework6/[Link]" title="HTML5 Validation">HTML5
Validation</a> | <a href="../[Link]" title="Back to the course homepage">Course
Homepage</a>
</p>
</footer>
<!-- JavaScript script for age slider display adapted from [Link] -->
<script>
var slider = [Link]("myRange");
var output = [Link]("demo");
[Link] = [Link];
[Link] = function() {
[Link] = [Link];
}
</script>
</body>
</html>
