49 lines
2.4 KiB
HTML
49 lines
2.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>Cat Owner Survey</title>
|
||
|
|
<link rel="stylesheet" href="styles.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1 id="title">Cat Owner Survey Form</h1>
|
||
|
|
<p id="description">Please fill out this survey about cat ownership</p>
|
||
|
|
<form id="survey-form">
|
||
|
|
<fieldset>
|
||
|
|
<legend>Basic information</legend>
|
||
|
|
<label id="name-label" for="name">Your Name: <input id="name" type="text" placeholder="Tabby Cat" required></label>
|
||
|
|
<label id="email-label" for="email">Your Email: <input id="email" type="email" required placeholder="spots@catmail.com"></label>
|
||
|
|
<label id="number-label" for="number">Your Age in Years: <input id="number" type="number" min="13" max="120" required placeholder="23"></label>
|
||
|
|
</fieldset>
|
||
|
|
<fieldset>
|
||
|
|
<legend>Cat Ownership Information</legend>
|
||
|
|
<label for="dropdown">
|
||
|
|
How experienced are you with owning cats?
|
||
|
|
<select id="dropdown">
|
||
|
|
<option value="">Select one...</option>
|
||
|
|
<option value="1">First time cat owner</option>
|
||
|
|
<option value="2">Heavily researched cat ownership before owning cats</option>
|
||
|
|
<option value="3">I have had one or several cats all of my life</option>
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<p>Your cats are...</p>
|
||
|
|
<label for="indoor"><input id="indoor" name="indoor-outdoor" value="inddor" type="radio" checked> Indoor cats</label>
|
||
|
|
<label for="outdoor"><input id="outdoor" value="outdoor" name="indoor-outdoor" type="radio"> Outdoor cats</label>
|
||
|
|
</fieldset>
|
||
|
|
<fieldset>
|
||
|
|
<legend>Additional Information</legend>
|
||
|
|
<p>How do you learn about your cats? (choose any that apply)</p>
|
||
|
|
<label for="blogs"><input id="blogs" type="checkbox" value="blogs"> Blogs</label>
|
||
|
|
<label for="social-media"><input id="social-media" type="checkbox" value="social-media"> Social Media</label>
|
||
|
|
<label for="in-person"><input id="in-person" type="checkbox" value="in-person">In person</label>
|
||
|
|
<label for="comments">Add feedback or comments here...<textarea id="comments" rows="4" cols="30"></textarea></label>
|
||
|
|
</fieldset>
|
||
|
|
<input id="submit" type="submit" value="Submit">
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|