Archive for the ‘Forms’ Category

AJAX Upload is a free script for easily impelementing Ajaxed upload interfaces.

It comes with ready-to-use server-side code for PHP, ASP.NET & Coldfusion.

Ajax Upload Script

The script doesn't require any JS library to run & compatible with any of them (the example code uses jQuery).

As the upload function is fired with JavaScript, it is possible to use any object/image as the upload button which makes stying much easier.

AJAX Upload provides access to every level of the upload process (before, after, onComplete) for a better customization.

Simply-Buttons v2 is a technique to create good-looking & cross-browser buttons that is inspired from:

CSS Buttons

The buttons are created with pure CSS and, optionally, improved with JavaScript (code is provided).

They fit to any text & come with 3 states: inactive, active and hover.

P.S. Their compatibility is tested on IE6 IE7 FF(PC/MAC) Safari SafariMobile Opera(PC/MAC).

Chroma-Hash is a jQuery plugin that aims to offer a better password input experience.

The Problem:

A standard password field replaces the entered characters with "●" characters. The problem is "we never know if we made a typo or not until the form is submitted & a reply is received from the server".

Chroma-Hash

The Solution:

Chroma-Hash, "converts the values entered" into a colored visualization.

A user filling the password field can easily recognize that if the colors are the usual equivalents of the password or not. And, anyone who sees the colors won't have any idea what the actual password is.

The script can also be used to visualize password confirmations (password & confirm password fields).

P.S. A detailed info on the method & security concerns can be found at the developer's related post.

  • Tags:
  • Filed under: Forms, Goodies, MIT License
  • 4 Comments
  • Validatious is an unobtrusive & easy to use JavaScript form validation library that does not depend on any JS frameworks.

    It has built-in validators like numeric, e-mail, URL, max/min char, etc. & custom ones can be created.

    JavaScript Form Validation

    Using the library, it is possible to create chained validation rules like: validate( "email".is("required").andIsAn("email") );.

    How and when Validatious does validation, how it displays errors & more can be controlled.

    The library supports multilingual error messages with the help of a language file or overriding pre-built ones.

  • Tags:
  • Filed under: Forms, Goodies
  • 2 Comments
  • GBCF-v3 is a free PHP form script that offers a nice level of accessibility & security.

    The script has a valid semantic markup & does not use JavaScript. It is screen-reader optimized & keyboard friendly.

    PHP Form Script

    In means of security, the form asks a question to the user & expects the right answer to complete the submission. Also, an anti-flood control option can be activated to prevent multiple submissions from an IP & the number of blocked attempts can be seen.

    The script is smart in many ways like "changing a form legend of a form also changes the e-mail sent" or no need of using the "back button" to fix the errors.

    It is multilingual, has 20+ ready-to-use language files & can be customized easily via CSS.

  • Tags:
  • Filed under: Forms, Goodies, Other License
  • 2 Comments
  • Tutorialzine is sharing a nice tutorial with source on creating a fancy Ajaxed contact form that is built with jQuery & PHP.

    The form is unobtrusive & has a server-side validation which makes it degrade gracefully when the JavaScript is turned off.

    Ajax Contact Form

    It takes advantage of 2 jQuery plugins:

    and a PHP class:

    The contact form also has a basic captcha which works by asking the sum of 2 random numbers.

    To check a demo of the form, click here.

    In some cases the standard HTML list box doesn’t offer a good usability like the need of scrolling or using both the keyboard & mouse.

    MTMultiselect is a paginated & filterable multi-select widget built with MooTools.

    MooTools Multi-Select

    The user can easily see the selected/non-selected items & can get all the functionality with only using the mouse.

    The widget can be styled completely with CSS.

    For a demo, click here.

    jQuery UI Multiselect is a widget that converts html multiple select inputs into slicker interfaces.

    It makes searching within the options possible which is very functional for large lists & selected items can be re-ordered by drag’n drops.

    jQuery UI Multi Select

    It can display the number of selected items & for an easier selection, there are select all/deselect all links provided.

    The widget is unobtrusive & and be styled with ThemeRoller.

    VanadiumJS is an intuitive-yet-powerful jQuery plugin for easy client-side validation.

    It supports Ajax & regular server-side response results. The rules to be applied can be defined in 2 ways:

    • JSON structure
    • inline markup

    Client-Side Validation: VanadiumJS

    Some of the default rules include:

    • presence
    • a special format
    • numbers (integer, float)
    • length
    • acceptance (checkboxes)
    • & much more..

    VanadiumJS offers various customization settings like, ability to validate-as-you-type or validation-on-submit, waiting x seconds before validating as-you-type, etc.

    Elijah Miller is sharing a very nice script, inspired from the iPhone-style-checkboxes for jQuery by Thomas Reynolds, for creating iPhone-like toggle switches with Prototype.

    It is a very flexible resource as:

    • variable sizes of switches are created automatically
    • has support for dragging
    • sliding labels
    • offers iPhone compatibility

    iPhone-Like Checkbox

    How To Use It?

    It converts the visual output of a checkbox & displays the standard checkbox when JS is disabled (unobtrusive).

    To make it work, calling a simple function mentioning the ID of the checkbox & values is enough:

    new iPhoneStyle('#variable_size_a_b', { checkedLabel: 'A', uncheckedLabel: 'B' });

    That’s all.

    feed-holder
    FeedBurner
    • RapidxHTML - Converts Your PSD into XHTML Rapidly
    • MailChimp
    • PSD to HTML
    17% Off Web Hosting Sale - eTecc Web Hosting
    • PSD to HTML
    • activeCollab | Project Management
    • Manage your clients email marketing with sendcube

    Vivvo CMS - Web Publishing at your Fingertips

    Popular Posts


    Cheap SSL Certificates