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:&nbsp; 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:&nbsp;
 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:&nbsp;
 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:&nbsp;
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"> &nbsp; &nbsp;
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:&nbsp; 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&rsquo;t enter any information.&nbsp; " +
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.&nbsp; 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:&nbsp; <strong class='colorBlue'>" +
206            strRoomNumber + "</strong>" ) ;
207        document.writeln( "<p>Instructor Name:&nbsp; <strong class='colorBlue'>" +
208            strInstructorName + "</strong>" ) ;
209        document.writeln( "<p>Course Title:&nbsp; <strong class='colorBlue'>" +
210            strCourseTitle + "</strong>" ) ;
211        document.writeln( "<p>Time Slot:&nbsp; <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>