CSS JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
font
img
js
.gitattributes
404.html
LICENSE.md
README.md
favicon.ico
humans.txt
index.html

README.md

Forms demo

A demo of forms

Features

  • Follows responsive-web-design principles
  • using [http://twitter.github.com/bootstrap](Twitter 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](jQuery.Validate plugin)
  • 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](FontAwesome icons)
  • try zooming into the web page and note the icons scale along too