Skip to content

Interactivity and forms

Jump to bottom
Al Zimmerman edited this page Oct 5, 2015 · 2 revisions

in-progress slide deck: https://slides.com/auraelius/interactivity/

More info needed here

Focus: Forms

The context is interactivity

motivation: Forms are a critical part of web usability and commerce

  • Imagine a store, even the smallest Quick-E-Mart, where you had to fill out a form before they let you buy anything
  • Most forms are never completed

Form architecture

  • Form element on web page
  • Server-side software to process forms
  • HTTP PUT and POST verbs
    • PUT passes parameters in URL - good for bookmarking
    • POST passes parameters in HTTP transfer
  • Default behavior: Submit button triggers browser to format up the form's content and send it to server given in URL. Browser then expects to refresh the page with the response from the server.
  • Playground: http://form-echo.herokuapp.com/

How to do forms

HTML

  • The <form> element
    • URL -
    • Method
    • Contents
    • Fields
    • Submit button
    • Default action
  • Field types
    • Look it up on MDN
    • Play in codepen
    • How to specify required fields
  • Built in validation

CSS

  • How to style for appearance
  • How to format for maximum usability
  • How to support required fields and validation (automatic formatting based on field attributes)

JavaScript

  • How to select form fields
  • How to read form field values
  • How to respond to form events
  • How to prevent default form behaviors if they aren't needed.

Precursors include:

  • jQuery
  • Regular expressions

Lesson plan

Outcomes:

  • Create a form in HTML that sends data to a server
  • Create CSS to style an lay out a form
  • Create JS to respond to form events and to read a form
  • Enhance form usability by validating form entries on the client side using a combination of HTML/CSS/JS

Class activities

  1. Identify learning resources
  1. Code-along with codepen to identify HTML elements
  • form element
  • field elements
  • Buttons
  1. Code-along with codepen to style forms
  2. Intro to validation: HTML validation. Code-along with codepen to validate a field.
  • Identify what iss caught and what isn't
  1. Background on regular expressions
  • Teach how to use regex101.com
  1. Background on form events and values
  • Code along on reading a form and putting value in alert box
  1. Code along with codpen to validate a password field
  • Seed the discussion with first event handler, first regular expression
  • Describe the code structure to run multiple checks
  • Challenge class with request for additional stranger and stranger checks

From slack convo with Al & Kristin:

[5:07 PM] Al Zimmerman: http://www.regexplained.co.uk/ check this out Regular expression visualizer using railroad diagrams

[5:08 PM] Al Zimmerman: or this http://regexpal.com/

[5:11 PM] Al Zimmerman: or https://regex101.com/ Regex101 - online regex editor and debugger Regex101 allows you to create, debug, test and have your expressions explained for PHP, PCRE, JavaScript and Python. The website also features a community where you can share useful expressions.

[5:12 PM] Al Zimmerman: http://www.regexr.com/ Regular expression tester with syntax highlighting, contextual help, video tutorial, reference, and searchable community patterns.

[5:13 PM] Al Zimmerman: http://jsregex.rcode5.com/ Test your Javascript Regular Expressions here with ease.

[5:27 PM] Al Zimmerman: send me your tortured password pen and I’ll make a lesson out of it and https://regex101.com/

[6:14 PM] Kristin Valentine: http://codepen.io/kristinvalentine/pen/GpWBqo CodePen Worst Ever Password Field ...

----- Today October 5th, 2015 -----

[12:20 PM] Al Zimmerman: this is fun. It’s also simple enough that people should be able to understand it quickly. I’m going to work on the lesson plan for this week and see if I can work it into the sequence.

[12:20 PM] Kristin Valentine: ok cool. Let me know what I should prepare for tonight

[12:24 PM] Al Zimmerman: I’m going to do three things: pair programming, forms, and lab time. The pair programming thing is entirely class activity. the form thing could benefit from your help two ways: styling forms and validating input. If you could look into how you would teach somebody to style the forms you specified , that would be great. Especially layout. What’s the state of the art technique for that? I’ve used tables, CSS positioning, paragraphs, and who knows what. What’s best practices these days? then...

[12:28 PM] Al Zimmerman: for validation, i’d like to cover what’s built in for html5 (exercise: play with built in validation to see what it catches and what it misses), then the generic technique of reading a form field on blur (exercise: alertbox on blur), then intro regular expressions (exercise, play with regex101 to detect various things) then bring it all together with your pen. For your pen, we should code the first example together, then have a series of challenges for each of the next ones. Which of these stages sound interesting to you?

Contents of this wiki are copyright of the respective authors, used with permission by Portland Code School.

Icon pack by Icons8

Clone this wiki locally