Create forms in seconds!!

  • Published on Monday, 18 March 2013 22:15
  • Hits: 3922
User Rating:  / 6
PoorBest 

Hmmm, I can say without a doubt that every single site has at least one form, ..one to subscribe to a newsletter, one to sign-up, one to sign-in, , one to unsubscribe, etc, etc.

You already have tons of tools to help build your website but not as many to contribute on the generation of forms.

There are some tools that will help on that, as adobe lifecycle, but we are going to use tools that will cost you 0 Cents!!. Why??, ...Because you don't have a dime to spend on developing your site moreover when you are a techie,....well a techie and let's face it a bit freaky as well :p

Also you want to use Html5 and responsive design ready!!, ..and yes again, for free. hmmmm, let's see what we can find.

BootStrap

would you like to have a front-access framework built at Twitter???, ..that sounds good, doesn't it. You have already admitted being a bit freaky and this is what Bootstrap say about themselves: "...to help nerds do awesome stuff on the web". ..Then no doubt, this is the tool you are looking for!!.

 

This is not just a solution for building forms, It goes beyond that, but it has a full set of styles and form elements that will help you leverage visually rich functional forms. This is what you can do:

Optional layouts

  • Search form
  • Inline form
  • Horizontal form

Supported form controls

  • Inputs
  • Textarea
  • Checkboxes and radios
  • Inline checkboxes
  • Selects (..check the button dropdowns solution that in many other ocassions may suit you with the use of query elements actions)

Extending form controls

  • Prepended and appended inputs
  • Button dropdowns
  • Segmented dropdown groups
  • Search form

Control sizing

  • Block level inputs
  • Relative sizing
  • Grid sizing

Uneditable inputs

Form actions

Help text

  • Inline help
  • Block help

Form control states

  • Input focus
  • Invalid inputs
  • Disabled inputs
  • Validation states

Buttons

  • Default buttons
  • Button sizes

Disabled state

  • Anchor element
  • Button element

Images

..and lost but really cool stuff as well is the 140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

JQuery Validation.js Plugin

You can create nice and really awesome forms with BootStrap, ..but now you need some validation on the different fileds you will populate on your form. That is easy, just use the validation.js plugin which comes with the following features:

  •  email( ) Makes the element require a valid email
  •  url( ) Makes the element require a valid urll
  •  date( ) Makes the element require a date.l
  •  dateISO( ) Makes the element require a ISO date.l
  •  number( ) Makes the element require a decimal number.l
  •  digits( ) Makes the element require digits only.l
  •  creditcard( ) Makes the element require a creditcard number.l
  •  phoneUS( ) Validate for valid US phone number.

You can compare values with others (that could be in another field in the form) thanks to functions as:

  • min( value ) Makes the element require a given minimum.
  • max( value ) Makes the element require a given maximum.
  • range( range ) Makes the element require a given value range.
  • minlength( length ) Makes the element require a given minimum length
  • maxlength( length ) Makes the element require a given maxmimum length.
  • rangelength( range ) Makes the element require a given value range.
  • required( dependency-expression ) Makes the element required, depending on the result of the given expression.
  • required( dependency-callback ) Makes the element required, depending on the result of the given callback.

Or we have the following Validator mehods at form level which indeed come very handy to verify that a form cannot be submitted until it has been completely and correctly filled out:

  • form( )Validates the form, returns true if it is valid, false otherwise.
  • element( element )Validates a single element, returns true if it is valid, false otherwise.
  • resetForm( )Resets the controlled form.
  • showErrors( errors )Show the specified messages.
  • numberOfInvalids( )Returns the number of invalid fields.

 Now is your time to build forms as in twitter, Pulse, etc......, aren't you?

Music You like..

IT News to be aware of ..

New in FreakZion...