Class 8: Forms and States + jQuery plugin

The Plan

Lecture: Forms vs. Inputs

• <form> vs. <input type="">
  • Posting the values with action=""
  • Look at Google
• <input type="">
  • text
  • radio
  • submit
  • number
  • phone
  • password
  • range
  • file
  • …and more!
• Adding additional attributes
  • name
  • value
  • placeholder
  • disabled
  • …and more!
• How name and action attributes interact
• Labels
  • <label for="name">
• Common types
  • Radio = true/false
  • Checkbox = select mutliple
  • Dropdowns: <select> and <option>
    • A note about the UX - interesting article here.
• Examples
  • Taskrabbit.com
  • Food bank donate form
• Basic form tutorial here.

Demo: PHP Form

• Look at form PHP code - files here.
  • It’s kind of gross looking code, don’t be intimidated.
  • Show variable values in url, e.g. ?name=Lara
  • Writing to mood.txt
  • Example without method and action
• Add a new field
• Styling forms (it kind of sucks)

Break

Demo: jQuery Plugin

• Demo a JS plugin.
  • FartScroll, lolz.
  • Something more useful: Fittext.js
  • Lots of nice ones on Unheap.

Work Time and Q/A