-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSignup.html
136 lines (119 loc) · 4.53 KB
/
Signup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href = "Styles/html5.css">
<style type="text/css">
label {
text-align: right;
width: 90px;
float: left;
}
input {
margin-top: 0px;
padding-top: 0px;
}
fieldset {
margin-top: 5px;
}
#confidenceDisplay {
vertical-align: top;
}
</style>
<script>
function setConfidence(newVal) {
document.getElementById("confidenceDisplay").innerHTML = newVal + '%';
}
function invalidHandler(evt) {
// find the label for this form control
var label = evt.srcElement.parentElement.getElementsByTagName("label")[0];
// set the label's text color to red
label.style.color = 'red';
// stop the event from propagating higher
evt.stopPropagation();
// stop the browser's default handling of the validation error
evt.preventDefault();
}
function loadDemo() {
// register an event handler on the form to
// handle all invalid control notifications
document.register.addEventListener("invalid", invalidHandler, true);
}
window.addEventListener("load", loadDemo, false);
</script>
</head>
<body>
<div id="container">
<header>
<h1>Tahoe 216</h1>
<h3 align="center">3 Days, 216-Miles, One Crazy Runner's High</h3>
<h2> </h2>
<h4>Live Results Now!</h4>
</header>
<nav>
<h2>Links</h2>
<a href="index.html" title="Home">Home</a>
<a href="signup.html" title="Are you crazy enough?">Sign Up</a>
<a href="about.html" title="Learn more about the T216">About the Race</a>
</nav>
<section>
<article>
<h2>Sign Up Today</h2>
<p><strong>Race fee</strong>: $216 </p>
<p>Make check payable to the Happy Trails Running Club</p>
<p><strong>Note</strong>: We recommend that you seek your doctor's and family's approval before you sign up. Race fees are not refundable. </p>
<form name="register">
<p><label for="runnername">Runner:</label>
<input id="runnername"name="runnername" type="text"
placeholder="First and last name" required></p>
<p><label for="phone">Tel #:</label>
<input id="phone" name="phone" type="tel"
placeholder="(xxx) xxx-xxx"></p>
<p><label for="emailaddress">E-mail:</label>
<input id="emailaddress" name="emailaddress" type="email"
placeholder="For confirmation only" required="true" autofocus="true" value=""></p>
<p><label for="dob">DOB:</label>
<input id="dob" name="dob" type="date"
placeholder="MM/DD/YYYY"></p>
<fieldset>
<legend>T-shirt Size: </legend>
<p><input id="small" type="radio" name="tshirt" value="small">
<label for="small">Small</label></p>
<p><input id="medium" type="radio" name="tshirt" value="medium">
<label for="medium">Medium</label></p>
<p><input id="large" type="radio" name="tshirt" value="large">
<label for="large">Large</label></p>
<p><label for="style">Shirt style:</label>
<input id="style" name="style" type="text" list="stylelist" title="Years of participation"></p>
<datalist id="stylelist">
<option value="White" label="1st Year">
<option value="Gray" label="2nd - 4th Year">
<option value="Navy" label="Veteran (5+ Years)">
</datalist>
</fieldset>
<fieldset>
<legend>Expectations:</legend>
<p>
<label for="confidence">Confidence:</label>
<input id="confidence" name="level" type="range"
onchange="setConfidence(this.value)"
min="0" max="100" step="5" value="0">
<span id="confidenceDisplay">0%</span></p>
<p><label for="notes">Notes:</label>
<textarea id="notes" name="notes" maxLength="140"></textarea></p>
</fieldset>
<p><input type="submit" name="register" value="Register"></p>
</form>
</article>
</section>
<aside>
<h2>Sponsors</h2>
<p align="center">Happy Trails Running Club</p>
<p align="center"><img src="happy-trails-rc.gif" alt="Happy Trails Running Club" width="149" height="207"></p>
</aside>
<footer>
<p>Powered by HTML5</p>
</footer>
</div>
</body>
</html>