74 lines
3.4 KiB
HTML
74 lines
3.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Build A Survey - Project 2 - FreeCodeCamp</title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<h1 id="title">Project 2 Survey</h1>
|
||
|
|
<p id="description">Tell us a little about you</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
<form id="survey-form">
|
||
|
|
<label for="name" id="name-label">Name</label> <br>
|
||
|
|
<input type="text" name="name" id="name" placeholder="First and Last Names" required=true><br>
|
||
|
|
<br>
|
||
|
|
<label for="email" id="email-label">Email</label><br>
|
||
|
|
<input type="email" name="email" id="email" placeholder="blah@example.com" required=true><br>
|
||
|
|
<br>
|
||
|
|
<label for="number" id="number-label">Enter your age; 8 to 110 (optional)</label><br>
|
||
|
|
<input type="number" min="8" max="110" name="" placeholder="Age"id="number"><br>
|
||
|
|
<br>
|
||
|
|
<label for="favColor">Chose your favourite color:</label><br>
|
||
|
|
<select name="favColor" id="dropdown">
|
||
|
|
<option value="green">Green</option>
|
||
|
|
<option value="blue">Blue</option>
|
||
|
|
<option value="red">Red</option>
|
||
|
|
<option value="purple">Purple</option>
|
||
|
|
<option value="orange">Orange</option>
|
||
|
|
</select>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
<fieldset id="chooseGender">
|
||
|
|
<legend>What is your gender? (optional)</legend><br>
|
||
|
|
<input type="radio" id="male" name="gender" value="male">
|
||
|
|
<label for="male">Male</label><br>
|
||
|
|
<input type="radio" id="female" name="gender" value="female">
|
||
|
|
<label for="female">Female</label><br>
|
||
|
|
<input type="radio" id="other" name="gender" value="other">
|
||
|
|
<label for="other">Other</label><br>
|
||
|
|
<input type="radio" id="noAnswer" name="gender" value="noAnswer" value="1">
|
||
|
|
<label for="noAnswer">Prefer not to answer</label><br>
|
||
|
|
</fieldset>
|
||
|
|
<br>
|
||
|
|
<fieldset id="preferredTimeOfDay">
|
||
|
|
<legend>What is you favourite time of day? (Check all that apply)</legend><br>
|
||
|
|
<input type="checkbox" id="morning" name="morning" value="Morning">
|
||
|
|
<label for="morning">I prefer the morning</label><br>
|
||
|
|
<input type="checkbox" id="afternoon" name="afternoon" value="Afternoon">
|
||
|
|
<label for="afternoon">I prefer the afternoon</label><br>
|
||
|
|
<input type="checkbox" id="evening" name="evening" value="Evening">
|
||
|
|
<label for="evening">I prefer the evening</label><br>
|
||
|
|
<input type="checkbox" id="night" name="night" value="Night">
|
||
|
|
<label for="night">I prefer the night</label><br>
|
||
|
|
</fieldset>
|
||
|
|
<br>
|
||
|
|
<label for="comments">Additional Comments? (optional)</label><br>
|
||
|
|
<textarea type="text" name="textarea" id="textarea" rows="5" cols="30" >
|
||
|
|
</textarea><br>
|
||
|
|
<br>
|
||
|
|
<div class="submitButtonBox">
|
||
|
|
<input type="submit" value="Submit" id="submit">
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer>Thank you for taking the time to participate</footer>
|
||
|
|
|
||
|
|
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|