Find file
Fetching contributors…
Cannot retrieve contributors at this time
29 lines (26 sloc) 1.3 KB

Forms demo

A demo of forms

Features

  • Follows responsive-web-design principles
  • using http://twitter.github.com/bootstrap
  • try resizing your browser window
  • Same <form> markup is used for all the 3 layouts
  • except for the column layout which differs slightly
  • just by adding a "form-horizontal" class to the form tag, a different layout can be achieved
  • Powerful and easy client-side JavaScript validation
  • using http://docs.jquery.com/Plugins/Validation
  • Good user-experience
  • try leaving the input fields blank and simply blur out to the next input field
  • try entering just 1 character in the input fields
  • try typing an invalid email address in the email address field
  • try typing alphabets in the phone number field
  • fields automatically turn red if validation fails and automatically turn green when the validation error is fixed
  • Clean, concise, clear, maintainable and extensible code
  • see script.js for the validation code
  • Follows CSS-based layout, not table-based layout
  • HTML5-complaint
  • ensures cross-browser and cross-device compatibility
  • Uses font-based icons for seamless scalability
  • using http://fortawesome.github.com/Font-Awesome
  • try zooming into the web page and note the icons scale along too