1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Basic Form</title>
6
7 <!--
8 File: \\cssd.local\Student Resources\Website Development I\CodeSamples\BasicForm.html
9 Copyright (c) 2022 by Jesse Heines. All rights reserved. May be freely
10 copied or excerpted for educational purposes with credit to the author.
11 updated by JMH on June 11, 2022 at 5:29 PM
12 -->
13
14 <style>
15 h2#title { /* main page title */
16 color: blue ;
17 margin-bottom: 0.2em ;
18 }
19 h3#semester { /* page subtitle (semester dates) */
20 color: blue ;
21 margin-top: 0 ;
22 }
23 .nobot { /* eliminate the bottom margin */
24 margin-bottom: 0 ;
25 }
26 .notop { /* eliminate the top margin */
27 margin-top: 0 ;
28 }
29 </style>
30 </head>
31
32 <body>
33 <!-- display the page title and semester dates -->
34 <h2 id="title">Corrections Special School District</h2>
35 <h3 id="semester">Semester: April 4 to June 17, 2022</h3>
36
37 <!-- instructions to the user -->
38 <p><br>
39 <em>Please provide the following information.</em></p>
40
41 <!-- form to create a new table entry -->
42 <form method="get" action="BasicForm_Handler.html">
43 <!--
44 The value of the name attribute in each of the following form elements will be the
45 key passed when the form in submitted. This key is what is used to identify each
46 data item.
47 Note that unlike most other attributes, the required attribute does not have a
48 corresponding value. It is used simply on its own.
49 -->
50
51 <!-- spinner form element -->
52 <p>Room Number:
53 <input type="number" name="room" min="1" max="10" step="1"
54 value="" required></p>
55 <!--
56 Input type number is a spinner. A spinner has minimum, maximum, and step values.
57 Setting the initial value to blank ("") forces the user to enter a value within
58 the specified range.
59 -->
60
61 <!-- select form element (or dropdown list) -->
62 <p>Instructor Name:
63 <select name="instructor" required>
64 <option value="" selected disabled hidden>Choose an instructor</option>
65 <option value="Lees">Lees</option>
66 <option value="Burzycki">Burzycki</option>
67 <option value="Latorella">Latorella</option>
68 <option value="Jones">Jones</option>
69 <option value="Mosher">Mosher</option>
70 <option value="Piper">Piper</option>
71 <option value="Kroll">Kroll</option>
72 <option value="Spires">Spires</option>
73 </select>
74 <!--
75 The first option above prompts the user with instructions. However, this option
76 cannot be selected. The user is forced to select one of the other options.
77 It is also possible to specify how many of the options should initially be
78 visible, but this can sometimes confuse the user into thinking that those are the
79 only options available.
80 -->
81
82 <!-- radio buttons group -->
83 <p class="nobot">Time Slot:</p>
84 <blockquote class="notop">
85 <input type="radio" name="timeslot" value="A" required>
86 <label for="A">7:10 AM to 8:30 AM</label><br>
87 <input type="radio" name="timeslot" value="B">
88 <label for="B">8:40 AM to 10:00 AM</label><br>
89 <input type="radio" name="timeslot" value="C">
90 <label for="C">10:10 AM to 11:30 AM</label><br>
91 <input type="radio" name="timeslot" value="D">
92 <label for="D">11:40 AM to 1:00 PM</label><br>
93 <input type="radio" name="timeslot" value="E">
94 <label for="E">1:10 PM to 2:30 PM</label>
95 </blockquote>
96 <!--
97 Note that here we display the actual times to the user via the label tag. However,
98 the input tag's value attribute specifies only a single letter. Therefore, it is
99 the letter that is passed to the handler page, not the full time string.
100 -->
101
102 <!-- text input form element -->
103 <p>Course Title:
104 <input type="text" name="course" size="40" required></p>
105 <!--
106 This element allows the user to enter a single line of text.
107 Note the size attribute. This value controls the width of the form, not the
108 number of characters that the user can enter. To limit then number of characters,
109 add a maxlength attribute to the above code.
110 -->
111
112 <!-- the action buttons -->
113 <br>
114 <input type="Reset" value="Start Over">
115 <input type="Submit" value="Submit Class Information">
116 <!--
117 Input type reset returns the form to its initial state. Note that in these two
118 cases, the value attribute specifies the text to be displayed on the buttons.
119 Input type submit checks to make sure that all the required fields have legal
120 values, packages up those values into a query string, and then passes that query
121 string to the page specified in the form tag's action attribute.
122 To do more sophisticated error checking to ensure that all data entered by the
123 user is valid, one can write JavaScript code that will get executed before the data
124 is passed to the handler page.
125 -->
126
127 </form>
128
129 </body>
130
131 </html>
132
133 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
134
135 <!DOCTYPE html>
136 <html>
137 <head>
138 <meta charset="utf-8">
139 <title>Basic Form Handler</title>
140
141 <!--
142 File: \\cssd.local\Student Resources\Website Development I\CodeSamples\BasicForm_Handler.html
143 Copyright (c) 2022 by Jesse Heines. All rights reserved. May be freely
144 copied or excerpted for educational purposes with credit to the author.
145 updated by JMH on June 11, 2022 at 5:29 PM
146 -->
147
148 <script>
149 // define an array of the time slots
150 // Note that the array subscripts can be strings, in this case single letters.
151 arrTimeSlots = new Array() ;
152 arrTimeSlots["A"] = "7:10 AM to 8:30 AM" ;
153 arrTimeSlots["B"] = "8:40 AM to 10:00 AM" ;
154 arrTimeSlots["C"] = "10:10 AM to 11:30 AM" ;
155 arrTimeSlots["D"] = "11:40 AM to 1:00 PM" ;
156 arrTimeSlots["E"] = "1:10 PM to 2:30 PM" ;
157 </script>
158
159 <style>
160 h2#title { /* main page title */
161 color: blue ;
162 margin-bottom: 0.2em ;
163 }
164 h3#semester { /* page subtitle (semester dates) */
165 color: blue ;
166 margin-top: 0 ;
167 }
168 .colorBlue { /* to display text in blue */
169 color: blue ;
170 }
171 </style>
172 </head>
173
174 <body>
175 <!-- display the page title and semester dates -->
176 <h2 id="title">Corrections Special School District</h2>
177 <h3 id="semester">Semester: April 4 to June 17, 2022</h3>
178
179 <script>
180 //// CHECK FOR AND PARSE THE QUERY STRING
181
182 var strQuery = window.location.search ;
183 if ( strQuery == "" ) {
184 document.writeln( "<p><br>" +
185 "<em>You didn’t enter any information. " +
186 "Please click the </em><strong>Return to Form</strong><em> button " +
187 "to try again.</em></p>") ;
188 } else {
189 // This would be a nice place to use a table, but here I have used regular
190 // paragraphs for simplicity.
191 document.writeln( "<p><br>" +
192 "<em>Thank you. You entered the following information.</em></p>" ) ;
193
194 // Note that URLSearchParams is a special type of function called a constructor.
195 // It takes the query string as its argument and constructs an object from which we
196 // can subsequently extract the values entered by the user in the various form fields
197 // on the main form page.
198 var urlParams = new URLSearchParams( strQuery ) ;
199 var strRoomNumber = urlParams.get( "room" ) ;
200 var strInstructorName = urlParams.get( "instructor" ) ;
201 var strCourseTitle = urlParams.get( "course" ) ;
202 var strTimeSlot = arrTimeSlots[ urlParams.get( "timslot" ) ] ;
203
204 // display the data entered by the user
205 document.writeln( "<p>Room Number: <strong class='colorBlue'>" +
206 strRoomNumber + "</strong>" ) ;
207 document.writeln( "<p>Instructor Name: <strong class='colorBlue'>" +
208 strInstructorName + "</strong>" ) ;
209 document.writeln( "<p>Course Title: <strong class='colorBlue'>" +
210 strCourseTitle + "</strong>" ) ;
211 document.writeln( "<p>Time Slot: <strong class='colorBlue'>" +
212 strTimeSlot + "</strong>" ) ;
213 }
214 </script>
215
216 <p><br>
217 <input type="button" value="Return to the Form Page"
218 onclick="window.location.replace( 'BasicForm.html' ) ;"></p>
219 </body>
220
221 </html>