Archive for the ‘Forms’ Category

ProtoForm is a "very easy to implement’, lightweight (4kb) & unobtrusive form validation & Ajaxed submit solution that depends on Prototype.

It can validate:

  • e-mail
  • date
  • telephone number
  • URL

Prototype Form Validation

Parameters are mentioned within the attributes like:

<input type="text" id="name_Req" name="name" title="Required! Try again" />

This makes it very easy to implement (a negative point can be requirement to define the ids in a specific way).

ProtoForm also sends data and shows response with Ajax, highlights the form field on focus and on error.

Custom Form Elements (CFE) is a JavaScript library for enhancing your form elements in means of design, usability & accessibility.

CFE aims to support all JavaScript frameworks (currently supports MooTools) & works in most A Grade browsers.

Custom Form Elements

Some features of Custom Form Elements:

  • unobstrusive
  • completely styleable via CSS
  • supports custom events like onHover-onClick
  • can auto-generate tooltips from "title" attributes
  • select all / deselect all functionality for checkboxes
  • & more..

This is a JavaScript time picker with a drag’n drop enabled clock interface.

JavaScript Time PickerUsage is very simple, hour and minute hands can be dragged & dropped to the desired value. Clicking to the AM-PM also enables you to switch between them.

This time picker is highly configurable including the "starting hour", sizes & images used.

It requires Mootools and the document to be a XHTML doctype to run. Download package includes all the necessary resources including the PSD files.

CRIR is a combination of JavaScript & CSS that enables you to create custom checkbox and radio buttons.

Note: Seems like the website is currently down. Click here for the cached version from Yahoo.

Custom Checkbox And Radi Button

Behind the scenes, CRIR does it with a visual trick by hiding the original form elements (but transferring any values to them) and replacing them with images.

This is a JavaScript solution which enables you to create custom HTML form elements (radio buttons, checkboxes, etc.)

Custom HTML Form Designs

The JavaScript simply:

  • Hides form elements with class="styled"
  • Sticks a span tag with a CSS class on it next to the element
  • Adds mouse events to the span that handles the stages when it is clicked.

Formy is a simple-yet-functional CSS framework which enables you to create form layouts without tables, divs or lists.

CSS Icon
Formy
is created by Vladimir Carrer who had created the CSS print framework: Hartija (see WRD post). Thanks to him for the suggestion.

Formy uses Reset.css for maximum browser compatibility. 

  

Here is how a simple form works:

<label for="Name">Name:</label> <input type="text" name="Name" value="Lorem ipsum dolor" /><br />
<label for="City">City:</label> <input type="text" name="City" /><br />

With the download, there are already examples of vertical & horizontal forms.

Validanguage is an object-oriented, unobtrusive JavaScript form validation library that does not rely on any JavaScript frameworks (optional Prototype integration).

It provides 2 APIs:

  • HTML-like API placed inside comment tags. The choice for ease of use and simplicity.
  • JSON-based API for advanced configuration.

JavaScript Form Validation

With Validanguage, you can:

  • use the pre-configured functions like required, minlength, maxlength, etc.
  • easily configure custom validation functions to be triggered at onblur, onsubmit, onchange events.
  • add onsuccess and onerror callback functions to integrate it into your existing site design.
  • & more..

P.S. Thanks to Dan for the suggestion.

inputEx is a javascript framework, built on the top of YUI, for creating forms and form objects.

It uses no html (opposite of unobtrusive libraries): all the fields and forms are configured using JSON. It provides a very efficient abstraction for building interactive web applications.

JavaScript Forms

inputEx features:

  • json configuration for each field
  • complex data structures (list/objects/tree/list of urls/objects of objects etc…)
  • composition between the fields (for “meta”-fields such as InPlaceEdit,List,Tree,Pair,…)
  • javascript object mapping for greater interactivity
  • a common “updated” event to handle different browsers and different field interactions

There are lots of JavaScript color pickers which work great but there are few which are similar to the Photoshop’s color picker.

This JavaScript color picker has HSB and RGB options, uses Prototype and compatible with all major browsers.

JavaScript Color Picker

This script can be a solution for users who are looking for an advanced color picker in their applications.

Securimage is an free PHP captcha script used for protecting web forms from spam and abuse.

It can be easily installed and very well documented.

Different than the famous reCAPTCHA, which is web-based, Securimage is a downloadable solution that requires PHP and GD library to work.

PHP Captcha Script

Some feature of this captcha solution:

  • Show an image in just 3 lines of code
  • Validate submitted entries in less than 6 lines of code
  • Customizable code length
  • Choose the character set
  • TTF font support
  • Use custom GD fonts when TTF is not available
  • Easily add background images
  • Multi colored, angled, and transparent text options
  • Arched lines through text
  • Generates audible CAPTCHA files in wav format
  • Use a word list for creating CAPTCHA codes

You can find a demo of the captcha here.

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

Vivvo CMS - Web Publishing at your Fingertips

Popular Posts


Cheap SSL Certificates