Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Forms’ Category

We all know that forms look different in every operating system, browser and even some browser versions.

Formalize is a CSS framework that aims to bring a solution to this issue by providing more consistent styling and functionality for them.

Formalize

It doesn't make them look all the same, rather, keeps some characteristic differences but focuses on finding the medium by picking the best parts from each.

These include a slight inset on items, similar looking buttons (including the button tag), light blue :focus border and more.

Also, the HTML5 placeholder and autofocus attributes work for browsers that doesn't support them with the help of jQuery.

Agile Uploader is a free file uploader that works very fast by resizing them on the client-side and uploading afterwards.

The resizing process is done via a Flash file and it can handle both single and multiple files.

Agile Uploader

The uploader's submit button is not inside the Flash file so it can be customized and there are various JS callbacks provided (there is also an optional jQuery plugin).

Flash part is also flexible as it has settings like styling or resize-quality.

Agile Uploader also comes with sample PHP files for the upload process.

HTML5 has a built-in validation that doesn't require any JavaScript. However, currently, it only works in Webkit browsers and can't be used in Firefox, Opera or IE.

jQuery.Html5form is a jQuery plugin that adds the lacking HTML5 form validation features to non-compatible browsers.

jQuery HTML5 Form

It doesn't require any custom functions or coding. Just create your form with the HTML5 syntax and it'll execute them automatically.

Optionally, the plugin offers features to help customizing how the errors will be handled like the the error messages, where they'll be displayed, their styles, etc.

And, it works with multiple forms on the same page as well (each of them can be customized differently).

ColorPicker is an advanced and highly customizable JavaScript color picker that doesn't rely on any JS frameworks.

It can display the entire color palette (~16.78 mil. colors) in 6 different color modes.

Advanced JavaScript Color Picker

The picker 4 different sizes; from simple to the most advanced one and has 9 color memories (just like the ones in image editing apps.).

The script is totally skinnable with CSS and it is draggable (can be disabled) for an easier use.

ColorPicker can calculate the web smart/web safe versions of a selected color and much more.

Validity is a powerful and flexible jQuery form validation for making sure -on the client-side- that form values are just as expected.

It is lightweight (9kb) and can perform simple to complex, dynamic and conditional validations.

The plugin also gives full control over how validation messages will appear which makes it possible to match the look and feel of your site.

jQuery Validity

There are various ready-to-use rules for e-mail, date, number, URL, time, phone, zip, etc.

And, there are lots of logical operators like: lessThanOrEqualTo, maxLength, nonHtml, sumMax and more to create any custom rules.

Formee is a CSS framework for easily and quickly creating cross-browser web forms.

It works with the technique provided by Fluid 960 Grid System to compose the form's layout, allowing total flexibility to put it in any website or web system.

The framework fits into any project as it has a structure built around percentage widths which adapts to the space available.

Formee CSS Framework

Formee is built with the smallest number of tags possible and it generates semantic forms.

Styling the forms created is not complicated as the framework comes with 2 CSS files: one for the structure and the other for styling.

And, there also some side elements in the package that are widely used with web forms such as message boxes to show errors, warnings and success alerts.

Previously, a post at WRD was sharing 10 password strength-meter scripts for easily warning users about weak passwords while filling forms.

chronoStrength is a new one which comes as a standalone JavaScript file or a jQuery plugin.

Compared to the standard strength meters which visualize the strength of passwords with colors, this script displays "an estimate of the time for a desktop PC to crack the password".

And, the messages to be displayed can be customized by updating the source code a little which can end up in an original and funny experience.

chronoStrength

Faary is a free web-based form builder that enables designing forms by simply defining them as text.

In order to better define how it works, an entry like:

  • header,        Sign-up to Newsletter
  • text,             *Your E-mail,email
  • submit,        Send it!

will end up in a newsletter form with the title: "Sign-up to Newsletter ", an e-mail input which is required and a submit button.

Faary Form Builder

The application supports every input type, client-side JavaScript validation and headers/sub-headers.

Once the details for the form is set, the output can be previewed and downloaded as a .zip file.

ValidForm Builder is an impressive open source form creation library that relies on PHP and JavaScript (jQuery).

The library outputs standards-based web forms (XHTML 1.0 valid) that are validated both on the client-side and the server-side.

It supports every input type (textbox, checkbox, radio, etc.) and comes with ready-to-use validation rules (integer, required, e-mail, etc.).

ValidForm Builder also has a captcha class which is very easy to integrate and can display a new captcha on every click.

ValidForm Builder

Ketchup is an easy-to-customize (in means of appearance & functionality) jQuery plugin for validating user inputs on the client-side.

The plugin works by inserting the validation rules inside the markup, just like:

<input type="password" id="new_pass" class="validate(required)" />

Ketchup jQuery Plugin

It comes with a bunch of ready-to-use rules, including: required, min/max length, number, URL, e-mail & much more where new ones can be created as well.

Using Ketchup, it is possible to combine validations (a field can be both required & e-mail).

Although the default setup of the plugin is very satisfactory, like mentioned, it is possible to create a new look & feel (which is easy with the documentation provided).

Uptime Robot
feed-holder
FeedBurner
  • aXmag - Flash Page Flip Magazine Software, PDF to Flash Converter
  • PSD to HTML
  • ManageWP
    PSD to HTML