form-processor/shoes.html at master · macloo/form-processor · GitHub

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
<!DOCTYPE html >
<html>
<head>
  <meta charset="utf-8" >
   <title>Contest Entry Form</title>
   <style>
      ol, ul { list-style-type: none; }

      /* styles for a div on this page */
      #results {
        width: 500px;
        padding-right: 50px;
        float: right;
        font-size: 150%;
      }
  </style>
</head>

<body>
<!-- this is exactly the form from Robbins's file, shown on page 153
    NO Bootstrap is used here
    -->

<h1>&ldquo;Pimp My Shoes&rdquo; Contest Entry Form</h1>

<!-- an empty div with an empty paragraph inside -->
<div id="results"><p id="results_text"></p></div>

<p>Want to trade in your old sneakers for a custom pair of Forcefields? Make a case for why your shoes have <em>got</em> to go and you may be one of ten lucky winners.</p>


<form id="myForm" action="js/processor_v7_shoes.js" method="post">

<fieldset>
<legend>Contest Entry Information</legend>

<ul>
<li><label for="form-name">Name:</label> <input type="text" name="username" id="form-name"></li>
<li><label for="form-email">Email Address:</label> <input type="email" name="emailaddress" id="form-email"></li>
<li><label for="form-tel">Telephone Number:</label> <input type="tel" name="telephone" id="form-tel"></li>
<li><label for="form-story">My shoes are SO old...</label><br>
<textarea name="story" rows="4" cols="60" maxlength="300" id="form-story" placeholder="No more than 300 characters long"></textarea></li>
</ul>
</fieldset>

<h2>Design your custom Forcefields:</h2>

<fieldset>
<legend>Custom Shoe Design</legend>

<fieldset>
<legend>Color <em>(choose one)</em>:</legend>
  <ul>
  <li><label><input type="radio" name="color" value="red"> Red</label></li>
  <li><input type="radio" name="color" value="blue"> Blue</li>
  <li><input type="radio" name="color" value="black"> Black</li>
  <li><input type="radio" name="color" value="silver"> Silver</li>
  </ul>
</fieldset>

<fieldset>
<legend>Features <em>(Choose as many as you want)</em></legend>
  <ul>
  <li><input type="checkbox" name="features" value="laces"> Sparkley laces</li>
  <li><input type="checkbox" name="features" value="logo" checked> Metallic logo</li>
  <li><input type="checkbox" name="features" value="heels"> Light-up heels</li>
  <li><input type="checkbox" name="features" value="mp3"> MP3-enabled</li>
  </ul>
</fieldset>

<fieldset>
<legend>Size</legend>
<p>Sizes reflect standard men's sizes: <select name="size" id="size" size="1">
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
</p>
</fieldset>

</fieldset>

<p><input type="submit" value="Pimp My Shoes!">
<input type="reset" value="Clear"></p>
</form>

<!-- this script MUST be at bottom! -->
<script src="js/processor_v7_shoes.js"></script>
</body>
</html>