Session 11a - Javascript, Part 4a

Harvard Extension School  
Fall 2023

Course Web Site: https://cscie12.dce.harvard.edu/

Topics

  1. Forms - Basic
  2. Accessibility: Label Element
  3. HTML5 forms
  4. Client-side Form Validation

Session 11a - Javascript, Part 4a, slide1
Forms - Basic, slide2
Forms, slide3
Forms, slide4
form, slide5
HTTP Method: Get vs. Post, slide6
Text Field, slide7
Radio Buttons, slide8
Checkbox, slide9
Textarea, slide10
Select and Option, slide11
Accessibility: Label Element, slide12
Accessibility: Label Element, slide13
Label Element - using id, label, for, slide14
Labels, slide15
fieldset and legend, slide16
optgroup, slide17
HTML5 forms, slide18
HTML5: email and url, slide19
HTML5: number and range, slide20
HTML5: date and time, slide21
Processing Forms on the server side, slide22
Client-side Form Validation, slide23
JS: Form Validation - DIY (Do It Yourself), slide24
PristineJS - Form Validation, slide25

Presentation contains 25 slides

Forms - Basic

Two elements for forms are in our list of most commonly seen elements:

Forms

Forms are the "front-end" for the HTTP Client to send information back to the HTTP Server. The submitted information is passed from the HTTP Server to a server-side program that processes the information and produces a response for the browser.

oreilly register for webcast form

Forms

Forms

form

Attributes
Each element within a form has a name associated with it. When the information is sent back to the server, the CGI program will access the information by name. Thus, the front-end form and the back-end program must use the same names.

While exploring forms, it is useful to use a simple server-side script that simply echo back the name/value information your form submitted (https://cs12.net/form/submit.php).

Example 11.1 - Simple form - Example 11.1

 <form method="post" action="https://cs12.net/form/submit.php">Email Address:
   <input type="text" name="email"/>

   <button type="submit">Submit   </button>
 </form>

HTTP Method: Get vs. Post

get: form information sent from browser to server as part of query string, visible in the URL
post: form information sent from browser to server as part of HTTP body; not in URL
Example 11.2 - Simple for using 'get' - Example 11.2

 <form method="get" action="https://cs12.net/form/submit.php">Email Address:
   <input type="text" name="email"/>

   <button type="submit">Submit   </button>
 </form>
Example 11.3 - Simple form using 'post' - Example 11.3

 <form method="post" action="https://cs12.net/form/submit.php">Email Address:
   <input type="text" name="email"/>

   <button type="submit">Submit   </button>
 </form>

Text Field

Example 11.4 - Form: text input - Example 11.4

 <form method="get" action="https://cs12.net/form/submit.php">Email Address:
   <input type="text" name="email"/>

   <br/>
Year of Birth:
   <input type="text" name="year_of_birth" maxlength="4"/>

   <br/>

   <button type="submit">Submit Information   </button>
 </form>

Radio Buttons

Example 11.5 - Form: radio buttons - Example 11.5

 <form method="get" action="https://cs12.net/form/submit.php">Email Address:
   <input type="text" name="email"/>

   <br/>
Please send me email updates:
   <br/>

   <input type="radio" name="sendupdates" value="yes" checked="checked"/>
yes
   <br/>

   <input type="radio" name="sendupdates" value="no"/>
no
   <br/>

   <button type="submit">Submit Information   </button>
 </form>

Checkbox

Example 11.6 - Form: checkboxes - Example 11.6

 <form method="get" action="https://cs12.net/form/submit.php">What ice cream do you like?
   <br/>

   <input type="checkbox" name="icecream" value="chocolate"/>
Chocolate
   <br/>

   <input type="checkbox" name="icecream" value="chocolate peanut butter"/>
Chocolate Peanut Butter
   <br/>

   <input type="checkbox" name="icecream" value="vanilla"/>
Vanilla
   <br/>

   <input type="checkbox" name="icecream" value="strawberry"/>
Strawberry
   <br/>

   <button type="submit">Submit Information   </button>
 </form>

Textarea

Example 11.7 - Form: textarea - Example 11.7

 <form method="post" action="https://cs12.net/form/submit.php">
   <strong>Comments   </strong>
   <textarea name="comments" rows="10" cols="50">Please enter comments...   </textarea>
   <button type="submit">Submit Information   </button>
 </form>

In style element (<style>) within head element: 

textarea {
             display: block;
             margin: 1rem 0;
     }

Select and Option

Pull-down menu

Example 11.8 - Pull-down List - Example 11.8

 <form method="get" action="https://cs12.net/form/submit.php">Select your favorite New England states:
   <br/>

   <select name="state">
     <option value="CT">Connecticut     </option>
     <option value="ME">Maine     </option>
     <option value="MA">Massachusetts     </option>
     <option value="NH">New Hampshire     </option>
     <option value="RI">Rhode Island     </option>
     <option value="VT">Vermont     </option>   </select>
   <br/>

   <button type="submit">Submit Information   </button>
 </form>

Scrollable list ← DON'T DO THIS!

Note: because scrollable lists are difficult for users, they are not typically used.

A scrollable list (size attribute) that can have multiple selections (multiple attribute):

Example 11.9 - Scrollable List - Example 11.9

 <form method="get" action="https://cs12.net/form/submit.php">Select your favorite New England states:
   <br/>

   <select name="state" size="3" multiple="multiple">
     <option value="CT">Connecticut     </option>
     <option value="ME">Maine     </option>
     <option value="MA">Massachusetts     </option>
     <option value="NH">New Hampshire     </option>
     <option value="RI">Rhode Island     </option>
     <option value="VT">Vermont     </option>   </select>
   <br/>

   <button type="submit">Submit Information   </button>
 </form>

Accessibility: Label Element

Label elements are critical for form accessibility.

label element lets us use markup to associate text with an input element.

Using label you can make the association between the text label and the form input explicit, and not just rely on the visual proximity.

Labels - Why?

Accessibility: Label Element

Example 11.10 - Form Labels - Example 11.10

 <form method="get" action="https://cs12.net/form/submit.php">
   <p>Do you like to watch NCAA basketball?
   </p>
   <label>
     <input type="radio" name="basketball" value="Y"/>
Yes   </label>
   <label>
     <input type="radio" name="basketball" value="N"/>
No   </label>
   <button type="submit">Submit   </button>
 </form>

In style element (<style>) within head element: 

label, button { display: block; }
       button { margin-top: 1rem;}

Label Element - using id, label, for

Example 11.11 - Form Labels - Example 11.11

 <form method="get" action="https://cs12.net/form/submit.php">
   <p>Do you like to watch NCAA basketball?
   </p>
   <input type="radio" name="basketball" id="basketball_y" value="Y"/>

   <label for="basketball_y">Yes   </label>
   <br/>

   <input type="radio" name="basketball" id="basketball_n" value="N"/>

   <label for="basketball_n">No   </label>
   <br/>

   <input type="submit" value="Submit"/>

 </form>

form labels

Labels

Example 11.12 - Form Labels - Example 11.12

 <form method="get" action="https://cs12.net/form/submit.php">
   <div>What ice cream do you like?
     <br/>

     <input type="checkbox" name="icecream" id="icecream_chocolate" value="chocolate"/>

     <label for="icecream_chocolate">Chocolate     </label>
     <br/>

     <input type="checkbox" name="icecream" id="icecream_cpb" value="chocolate peanut butter"/>

     <label for="icecream_cpb">Chocolate Peanut Butter     </label>
     <br/>

     <input type="checkbox" name="icecream" id="icecream_vanilla" value="vanilla"/>

     <label for="icecream_vanilla">Vanilla     </label>
     <br/>

     <input type="checkbox" name="icecream" id="icecream_strawberry" value="strawberry"/>

     <label for="icecream_strawberry">Strawberry     </label>
     <br/>

     <button type="submit">Submit Information     </button>
   </div>
 </form>

fieldset and legend

Used to group related choices and even sets.

fieldset and legend elements can further help group related input fields.

Example 11.13 - Form fieldset and legend elements - Example 11.13

 <form method="get" action="https://cs12.net/form/submit.php">
   <div>
     <fieldset>
       <legend>Name       </legend>
       <label>First Name
         <input type="text" name="fname" size="30"/>
       </label>
       <label>Last Name
         <input type="text" name="lname" size="30"/>
       </label>     </fieldset>
     <fieldset>
       <legend>Sports       </legend>
       <fieldset>
         <legend>Do you like basketball?         </legend>
         <label>
           <input type="radio" name="basketball" value="Y"/>
Yes         </label>
         <label>
           <input type="radio" name="basketball" value="N"/>
No         </label>       </fieldset>
       <fieldset>
         <legend>Do you like baseball?         </legend>
         <label>
           <input type="radio" name="baseball" value="Y"/>
Yes         </label>
         <label>
           <input type="radio" name="baseball" value="N"/>
No         </label>       </fieldset>     </fieldset>
     <button type="submit">Submit     </button>
   </div>
 </form>

In style element (<style>) within head element: 

label { display: block; }
     fieldset { margin-top: 1rem;}
     button { display: block; margin-top: 1rem; padding: 0.5rem 1rem;}

optgroup

The optgroup element allows you to group a long select list.

Example 11.14 - Form: optgroup in pull-down menus - Example 11.14

 <p>Select a school:
 </p>
 <form method="get" action="https://cs12.net/form/submit.php">
   <select name="school">
     <optgroup label="ACC">
       <option>Boston College       </option>
       <option>Clemson       </option>
       <option>Duke       </option>
       <option>Florida State       </option>
       <option>Georgia Tech       </option>
       <option>Louiville       </option>
       <option>Miami       </option>
       <option>North Carolina       </option>
       <option>North Carolina State       </option>
       <option>Notre Dame       </option>
       <option>Pitt       </option>
       <option>Syracuse       </option>
       <option>Virginia       </option>
       <option>Virginia Tech       </option>
       <option>Wake Forest       </option>     </optgroup>
     <optgroup label="Big 10">
       <option>Illinois       </option>
       <option>Indiana       </option>
       <option>Iowa       </option>
       <option>Maryland       </option>
       <option>Michigan       </option>
       <option>Michigan State       </option>
       <option>Minnesota       </option>
       <option>Nebraska       </option>
       <option>Northwestern       </option>
       <option>Ohio State       </option>
       <option>Penn State       </option>
       <option>Purdue       </option>
       <option>Rutgers       </option>
       <option>Wisconsin       </option>     </optgroup>
     <optgroup label="Big XII">
       <option>Baylor       </option>
       <option>Brigham Young       </option>
       <option>Central Florida       </option>
       <option>Cincinnati       </option>
       <option>Houston       </option>
       <option>Iowa State       </option>
       <option>Kansas       </option>
       <option>Kansas State       </option>
       <option>Oklahoma       </option>
       <option>Oklahoma State       </option>
       <option>Texas       </option>
       <option>Texas Christian       </option>
       <option>Texas Tech       </option>
       <option>West Virginia       </option>     </optgroup>
     <optgroup label="Ivy League">
       <option>Brown       </option>
       <option>Columbia       </option>
       <option>Cornell       </option>
       <option>Dartmouth       </option>
       <option>Harvard       </option>
       <option>Penn       </option>
       <option>Princeton       </option>
       <option>Yale       </option>     </optgroup>
     <optgroup label="Pac 12">
       <option>Arizona       </option>
       <option>Arizona State       </option>
       <option>UC Berkeley       </option>
       <option>Colorado       </option>
       <option>Oregon       </option>
       <option>Oregon State       </option>
       <option>Stanford       </option>
       <option>UCLA       </option>
       <option>USC       </option>
       <option>Utah       </option>
       <option>Washington       </option>
       <option>Washington State       </option>     </optgroup>   </select>
   <div>
     <button type="submit">Submit     </button>
   </div>
 </form>

optgroup illustration

optgroup illustration

HTML5 forms

HTML5 forms - placeholder, autofocus, and specific input types

HTML5: email and url

On handheld devices, screen keyboard is optimized for input.

type="email"

Example 11.15 - text input for email - Example 11.15

 <form action="https://cs12.net/form/submit.php" method="post">
   <label>Email:
     <input type="email" name="email_address"/>
   </label>
   <button type="submit">Submit   </button>
 </form>

In style element (<style>) within head element: 

label, button { display: block; margin-top: 1rem;}

Screenshot

type="url"

Example 11.16 - text input for URLs - Example 11.16

 <form action="https://cs12.net/form/submit.php" method="post">
   <label>URL:
     <input type="url" name="url"/>
   </label>
   <button type="submit">Submit   </button>
 </form>

In style element (<style>) within head element: 

label, button { display: block; margin-top: 1rem;}

Screenshot

Screenshot

HTML5: number and range

Example 11.17 - HTML5 input type='number' and type='range' - Example 11.17

 <form action="https://cs12.net/form/submit.php" method="post">
   <label>Pick a number:
     <input type="number" name="entered_number"/>
   </label>
   <label>How happy are you?
     <input type="range" min="1" max="5" value="3" step="1" name="happy"/>
   </label>
   <button type="submit">Submit   </button>
 </form>

In style element (<style>) within head element: 

label, button { display: block; margin-top: 1rem;}
     input { display: block; }

Screenshot

Screenshot

HTML5: date and time

Example 11.18 - HTML5 input types for date and time - Example 11.18
| Example 11.18 JSFiddle

 <form action="https://cs12.net/form/submit.php" method="post">
   <fieldset>
     <legend>Date and Time     </legend>
     <label>Pick a date:
       <input type="date" name="my_date"/>
     </label>
     <label>Pick a datetime
       <input type="datetime-local" name="my_datetime"/>
     </label>
     <label>Pick a time (15 minute increments)
       <input type="time" name="my_time_15" step="900" value="12:00"/>
     </label>
     <label>Pick a time (1 minute increments)
       <input type="time" name="my_time_1" step="60" value="12:00"/>
     </label>
     <label>Pick a time (1 second increments)
       <input type="time" name="my_time_1s" step="1" value="12:00"/>
     </label>   </fieldset>
   <button type="submit">Submit   </button>
 </form>

In style element (<style>) within head element: 

label, button { display: block; margin-top: 1rem;}
             input { display: block;  margin-top: 0.25rem;}

Screenshot

Screenshot

Screenshot

Screenshot

Processing Forms on the server side

Client-side Form Validation

Provide feedback to users prior to submitting form.

JS: Form Validation - DIY (Do It Yourself)

Notes

document.addEventListener("DOMContentLoaded", function(){
       let form = document.querySelector('#myForm');
       form.addEventListener("submit", function(ev){
         console.log("Submit event happened!");
         console.log(ev);

         let nameInput = document.querySelector('#name');
         let nameInputValue = nameInput.value;

         if (nameInputValue.length >= 2) {
           // consider valid
           return true;
         } else {
           // consider invalid
           console.log("Please fill out name field");
           alert("Please fill out name field");
           // would want to have better feedback to user!
           ev.preventDefault();
         }
       })
     })

PristineJS - Form Validation

document.addEventListener("DOMContentLoaded",function(){
       let form = document.getElementById("myForm");
       let pristine = new Pristine(form);
       form.addEventListener('submit', function (e) {
          let valid = pristine.validate();
          if (valid) {
            return true;
          } else {
            e.preventDefault();
          }
       });
     })