<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1"> ①
<title>Barnstormers!</title>
<link rel="stylesheet"
type="text/css" href="styles.css"> ②
</head>
<body>
<header> ⑥
<img src="barn.png" alt="Barnstormers logo"> ③⑥
<h1>Barnstormers!</h1> ④⑥
<p>Building old-fashioned barns the new-fangled way</p> ⑤⑥
</header> ⑥
<main>
<h2>Our Next Barn-Raising</h2>
<p>We're looking for volunteers to help with our next
barn-raising, which takes place Saturday August 23
and Sunday August 24. If you want to help, please
fill out and submit the form below.</p>
<form action="https://getform.io/f/ ⑦
dbb986ea-ee50-42ba-abe7-5c304a087444" ⑦
method="POST"> ⑦
<p>
<label>Name: ⑧
<input type="text" ⑧
name="name" ⑧
size="30" ⑧
placeholder="Your name"> ⑧
</label> ⑧
</p>
<p>
<label>Email: ⑨
<input type="email" ⑨
name="email" ⑨
size="30" ⑨
placeholder="Your email address"> ⑨
</label> ⑨
</p>
<p>
<label>Skills: ⑩
<textarea name="skills" ⑩
rows="3" ⑩
cols="30"> ⑩
</textarea> ⑩
</label> ⑩
</p>
<p>
<label> ⑪
<input type="checkbox" ⑪
name="notify"> ⑪
Get notified about future barn-raisings ⑪
</label> ⑪
</p>
<fieldset> ⑫
<legend>Day(s) you can attend</legend> ⑫
<label> ⑫
<input type="radio" ⑫
name="day" ⑫
value="Saturday" ⑫
checked> ⑫
Saturday ⑫
</label> ⑫
<br> ⑫
<label> ⑫
<input type="radio" ⑫
name="day" ⑫
value="Sunday"> ⑫
Sunday ⑫
</label> ⑫
<br> ⑫
<label> ⑫
<input type="radio" ⑫
name="day" ⑫
value="Both"> ⑫
Both ⑫
</label> ⑫
</fieldset> ⑫
<p>
<label>Select your free gift: ⑬
<select name="gift"> ⑬
<option value="">None</option> ⑬
<option value="cap">Baseball cap</option> ⑬
<option value="mug">Coffee mug</option> ⑬
<option value="poster">Poster</option> ⑬
<option value="shirt">T-shirt</option> ⑬
<option value="bag">Tote bag</option> ⑬
</select> ⑬
</label> ⑬
</p>
<input type="hidden" ⑭
name="_gotcha" ⑭
style="display:none !important"> ⑭
<p>
<button type="submit">Sign Me Up!</button> ⑮
</p>
</form>
</main>
<footer>© 2023 Barnstormers!</footer> ⑯
</body>
</html> ① Helps the page display properly on mobile devices ② Tells the web browser where to find the CSS code ③ Site logo ④ Site title ⑤ Site tagline ⑥ Page header ⑦ Form element specifies the endpoint ⑧ Name text box ⑨ Email text box ⑩ Skills text area ⑪ Check box ⑫ Radio button group text box ⑬ Selection list ⑭ Hidden “honeypot” field ⑮ Submit button ⑯ Page footer |
