<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Event Registration Form </title>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!DOCTYPE html>
<html>
<head>
<title>Event Registration Form.</title>
<div id="event-registration">
<h1>iFiveK Registration</h1>
<form id="event-registration-form" method="POST" action="">
<!-- Form contents will go here -->
<fieldset>
<h3>Personal Information</h3>
<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first-name" />
<label for="last-name">Last Name</label>
<input type="text" id="last-name" name="last-name" />
<label for="email">Email</label>
<input type="email" id="email" name="email" />
<label for="street">Street Address</label>
<input type="text" id="street" name="street" />
<label for="unit">Unit</label>
<input type="text" id="unit" name="unit" />
<label for="city">City</label>
<input type="text" id="city" name="city" />
<label for="state">State</label>
<select id="states">
<option>-- Choose your state --</option>
</select>
<label for="postal-code">Postal Code</label>
<input type="text" id="postal-code" name="postal-code" />
</fieldset>
<fieldset>
<h3>Additional Information</h3>
<label for="size">Shirt Size</label>
<div>
<input type="radio" name="size" value="xsmall">XS
<input type="radio" name="size" value="small">S
<input type="radio" name="size" value="medium">M
<input type="radio" name="size" value="large">L
<input type="radio" name="size" value="xlarge">XL
<br/>
<input type="checkbox" name="pickup"> I will be picking up my shirt on race day.
</div>
</fieldset>
<button type="button">Submit Form</button>
</div>
</head>
<body>
</body>
</html>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
body {
font-family: "Raleway", sans-serif;
background-color: #ff6655;
}
h1 {
text-align: center;
margin: 20px auto;
}
form {
width: 70%;
margin: auto;
}
fieldset {
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
margin: 20px auto;
box-shadow: 0 0 5px #333;
background-color: #eee;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],input[type="email"],select{
width: calc(100% - 20px);
height: 20px;
padding: 5px;
border-radius: 6px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
button {
width: 100%;
text-align: center;
margin: auto !important;
height: 40px;
border-radius: 10px;
background-color: #eee;
}
var statesSelect = document.getElementById("states");
var states = {
AL: "Alabama",
AK: "Alaska",
AS: "American Samoa",
AZ: "Arizona",
AR: "Arkansas",
CA: "California",
CO: "Colorado",
CT: "Connecticut",
DE: "Delaware",
DC: "District Of Columbia",
FM: "Federated States Of Micronesia",
FL: "Florida",
GA: "Georgia",
GU: "Guam",
HI: "Hawaii",
ID: "Idaho",
IL: "Illinois",
IN: "Indiana",
IA: "Iowa",
KS: "Kansas",
KY: "Kentucky",
LA: "Louisiana",
ME: "Maine",
MH: "Marshall Islands",
MD: "Maryland",
MA: "Massachusetts",
MI: "Michigan",
MN: "Minnesota",
MS: "Mississippi",
MO: "Missouri",
MT: "Montana",
NE: "Nebraska",
NV: "Nevada",
NH: "New Hampshire",
NJ: "New Jersey",
NM: "New Mexico",
NY: "New York",
NC: "North Carolina",
ND: "North Dakota",
MP: "Northern Mariana Islands",
OH: "Ohio",
OK: "Oklahoma",
OR: "Oregon",
PW: "Palau",
PA: "Pennsylvania",
PR: "Puerto Rico",
RI: "Rhode Island",
SC: "South Carolina",
SD: "South Dakota",
TN: "Tennessee",
TX: "Texas",
UT: "Utah",
VT: "Vermont",
VI: "Virgin Islands",
VA: "Virginia",
WA: "Washington",
WV: "West Virginia",
WI: "Wisconsin",
WY: "Wyoming"
};
for (var key in states) {
console.log(key);
if (states.hasOwnProperty(key)) {
console.log(key);
var option = document.createElement("option"); // Create a node
var t = document.createTextNode(states[key]); // Create a text node
option.appendChild(t); //Append the text to
statesSelect.appendChild(option);
}
}