# Session 11a - Javascript, Part 4

Harvard Extension School
Fall 2024

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

### Topics

1. Announcements
2. Forms - Basic
3. Accessibility: Label Element
4. HTML5 forms
5. Client-side Form Validation
6. Image Gallery
7. Elements of User Experience

Session 11a - Javascript, Part 4, slide1
Announcements, slide2
Assignment 08: JavaScript Choose Your Own Adventures, slide3
Forms - Basic, slide4
Forms, slide5
Forms, slide6
form, slide7
HTTP Method: Get vs. Post, slide8
Text Field, slide9
Radio Buttons, slide10
Checkbox, slide11
Textarea, slide12
Select and Option, slide13
Accessibility: Label Element, slide14
Accessibility: Label Element, slide15
Label Element - using id, label, for, slide16
Labels, slide17
fieldset and legend, slide18
optgroup, slide19
HTML5 forms, slide20
HTML5: email and url, slide21
HTML5: number and range, slide22
HTML5: date and time, slide23
Processing Forms on the server side, slide24
Client-side Form Validation, slide25
JS: Form Validation - DIY (Do It Yourself), slide26
PristineJS - Form Validation, slide27
Image Gallery, slide28
Elements of User Experience, slide29
5 Planes in More Detail, slide30

Presentation contains 30 slides

- img
- img
- img
- img
- img

## Announcements

- Later in November: November 20, 2024. Class will be pre-recorded, and there will be no live class meeting!
- Assignment 08: JavaScript Choose Your Own Adventures
  Given today, Due November 22.
- Optional "Assignment Redo" - Redo one of your existing assignments and gain back up to half the points!
- Holidays: November 27 to December 1. HES 2024-25 Academic Calendar
- Final Project due date: December 18, 6 pm

## Assignment 08: JavaScript Choose Your Own Adventures

Pick two of:

- Templates
- Maps
- Form validation
- Image Gallery

## Forms - Basic

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

- `form`
- `input`
- `button`

### 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.

## Forms

- Text
  - Single line (text input)
  - Password
  - Text area (textarea)
- Choices
  - Choose one
    - radio group
    - option list (menu)
  - Choose multiple
    - checkbox group
- File Upload
- Hidden
- Submit

## Forms

- Text
  - Single line (text input)
  - Password
  - Text area (textarea)
- Choices
  - Choose one
    - radio group
      Yes No Maybe
    - option list (menu)
  - Choose multiple
    - checkbox group
      Baseball Basketball Cricket Football (Soccer)
- File Upload
- Hidden
- Submit

## form

Attributes

- method ("get" or "post")
- action (URL of server-side program to process submitted data/information)

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" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><button type="submit"> Submit </button></form>

- Markup
- Display

     <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

- Use POST when form action should not be repeated; or when the action "changes the state"
- Use GET when form action is safely repeatable; when the action does not change the state.
  The technical term for this is "idempotent".

get: form information sent from browser to server as part of query string, visible in the URL

- Query String

- `https://host/path?param1=value1&param2=value2&param3=value3`
- Question mark
- Ampersand separated parameter/value pairs
- parameter=value

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" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><button type="submit"> Submit </button></form>

- Markup
- Display

     <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" enctype="application/x-www-form-urlencoded"> Email Address:<input type="text" name="email"/><button type="submit">Submit</button></form>

- Markup
- Display

     <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" enctype="application/x-www-form-urlencoded"> 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>

- Markup
- Display

     <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" enctype="application/x-www-form-urlencoded"> 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>

- Markup
- Display

     <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" enctype="application/x-www-form-urlencoded"> 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>

- Markup
- Display

     <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

- Markup
- Style
- Display

     <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" enctype="application/x-www-form-urlencoded"> 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>

- Markup
- Display

     <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" enctype="application/x-www-form-urlencoded"> 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>

- Markup
- Display

     <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?

- Makes text labels associated wtih input elements explicit
- Helps with screen readers!
- Helps with "clicks" and touch screens!

## Accessibility: Label Element

Example 11.10 - Form Labels - Example 11.10
<form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><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>label, button { display: block; } button { margin-top: 1rem;}

- Markup
- Style
- Display

     <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

- Explicit
  - id attribute for form input
  - label element for input label
  - for attribute in label to link label element with input via the value of id

Example 11.11 - Form Labels - Example 11.11
<form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><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>

- Markup
- Display

     <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>

## Labels

Example 11.12 - Form Labels - Example 11.12
<form method="get" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><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>

- Markup
- Display

     <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" enctype="application/x-www-form-urlencoded"><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>label { display: block; } fieldset { margin-top: 1rem;} button { display: block; margin-top: 1rem; padding: 0.5rem 1rem;}

- Markup
- Style
- Display

     <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" enctype="application/x-www-form-urlencoded"><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>Louisville</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>Oregon</option><option>Penn State</option><option>Purdue</option><option>Rutgers</option><option>UCLA</option><option>USC</option><option>Washington</option><option>Wisconsin</option></optgroup><optgroup label="Big XII"><option>Arizona</option><option>Arizona state</option><option>Baylor</option><option>Brigham Young</option><option>Central Florida</option><option>Cincinnati</option><option>Colorado</option><option>Houston</option><option>Iowa State</option><option>Kansas</option><option>Kansas State</option><option>Oklahoma</option><option>Oklahoma State</option><option>Texas Christian</option><option>Texas Tech</option><option>Utah</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></select><div><button type="submit">Submit</button></div></form>

- Markup
- Display
- Screenshot

     <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>Louisville       </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>Oregon       </option>
           <option>Penn State       </option>
           <option>Purdue       </option>
           <option>Rutgers       </option>
           <option>UCLA       </option>
           <option>USC       </option>
           <option>Washington       </option>
           <option>Wisconsin       </option>     </optgroup>
         <optgroup label="Big XII">
           <option>Arizona       </option>
           <option>Arizona state       </option>
           <option>Baylor       </option>
           <option>Brigham Young       </option>
           <option>Central Florida       </option>
           <option>Cincinnati       </option>
           <option>Colorado       </option>
           <option>Houston       </option>
           <option>Iowa State       </option>
           <option>Kansas       </option>
           <option>Kansas State       </option>
           <option>Oklahoma       </option>
           <option>Oklahoma State       </option>
           <option>Texas Christian       </option>
           <option>Texas Tech       </option>
           <option>Utah       </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>   </select>
       <div>
         <button type="submit">Submit     </button>
       </div>
     </form>

## HTML5 forms

- HTML5 - Forms (HTML Living Standard)
- MDN: The form <input> element

### HTML5 forms - placeholder, autofocus, and specific input types

- HTML5 Form Example
- placeholder text
- autofocus
- input types for
  - email
  - url
  - number
  - range
  - date and time

## 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" enctype="application/x-www-form-urlencoded"><label>Email: <input type="email" name="email_address"/></label><button type="submit">Submit</button></form>label, button { display: block; margin-top: 1rem;}

- Markup
- Style
- Display
- Screenshot

     <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;}

### type="url"

Example 11.16 - text input for URLs - Example 11.16
<form action="https://cs12.net/form/submit.php" method="post" enctype="application/x-www-form-urlencoded"><label>URL: <input type="url" name="url"/></label><button type="submit">Submit</button></form>label, button { display: block; margin-top: 1rem;}

- Markup
- Style
- Display
- Screenshot

     <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;}

## 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" enctype="application/x-www-form-urlencoded"><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>label, button { display: block; margin-top: 1rem;} input { display: block; }

- Markup
- Style
- Display
- Screenshot

     <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; }

## HTML5: date and time

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

- Markup
- Style
- Display
- Screenshot

     <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;}

## Processing Forms on the server side

- Course Form Submit Script
- Formspree - is a form backend, API, and email service for HTML & JavaScript forms. It's the simplest way to embed custom contact us forms, order forms, or email capture forms on your static website.

## Client-side Form Validation

Provide feedback to users prior to submitting form.

- Native browser functionality with HTML5 form controls (see MDN: Client-side form validation)
  - form0.html
- DIY (Do It Yourself) with JS
- JS libraries — some are 'plain' JS based (e.g. Pristine), others with jQuery (e.g. jQuery Validation Plugin).

## JS: Form Validation - DIY (Do It Yourself)

- form-diy0.html
- form-diy1.html

Notes

- Pass in `ev` (event) into the submit listener
- Get value, test if two or more characters in length.
  If true, then let form continue; else stop the form from submitting (`ev.preventDefault()`)

    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

- PristineJS - Vanilla javascript form validation micro-library
- form1-pristine.html

    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();
              }
           });
         })

## Image Gallery

Image Gallery Examples

## Elements of User Experience

- The Elements of User Experience: User-Centered Design for the Web
- Planes Poster - Detailed
- The Elements of User Experience — Harvard Library Online Resource

## 5 Planes in More Detail

- The Elements of User Experience: User-Centered Design for the Web
- Simple Planes Poster