Open Source Resources for Web Application Developers

Uni-Form is an attempt to standardize form markup (xhtml) and css, “modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms.

Plug and play style. Download the uni-form.zip and you’re pretty much all set! It is encouraged to edit css properties only in the uni-form.css file, so you can easily upgrade to the newer versions as they come along by copying over the old copy of the uni-form-generic.css.

Requirements: IE6+, Firefox 1.5.x+, Opera9.x+, Safari, Konqueror
Demo: http://dnevnikeklektika.com/uni-form/
License: Creative Commons License

• 2 Comments

Frequency Decoder had an attempt at creating a keyboard-accessible, unobtrusive slider control that conforms to the WAI-ARIA defined role of “slider“. The code uses a BUTTON element for the slider handle which automatically makes it keyboard accessible across all grade A browsers. The slider can be associated with both text input and select list form elements. The script is now released under a creative commons Attribution-ShareAlike 2.5 license.

Requirements: No Requirements
Demo: http://www.frequency-decoder.com/demo/slider-revisited/
License: Creative Commons License

• 2 Comments

This is a really good example that shows us how to create a password strength meter with a beautiful Ext User Interface. It uses the algorithm based on the code of Javascript Password Strength Meter from Geek(Wisdom).com and then use the Ext Forms to build and layout forms on the fly. It looks stunning and really professional, however this Ext form do not do anything and have very little validation on the other fields except the password field.

Requirements: No Requirements
Demo: http://testcases.pagebakers.com/PasswordMeter/
License: LGPL and MIT License

• 7 Comments

When we are styling forms with CSS, we can style the text fields and buttons easily. However, File inputs (<input type=”file” />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. Shaun Inman (founder of Mint) has shown us a simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation. We are now be able to style File input buttons as well.

Requirements: Modern Browsers with Javascript Enabled
Demo: http://www.shauninman.com/assets/examples/styling-file-inputs/
License: License Free

• 6 Comments

LiveValidation is a small open source javascript library built for giving users real-time validation information as they fill out forms. Not only that, but it serves as a sophisticated validation library for any validations you need to make elsewhere, it is not just limited to form fields.

The naming conventions and parameters of the validations are similar to those found in the Ruby on Rails framework, and as such is the perfect companion. Don’t worry if you dont use Rails though, LiveValidation can be used anywhere you like, is simple to learn, and a joy to use.

Requirements: Modern Browsers with Javascript Enabled
Demo: http://www.livevalidation.com/examples
License: MIT License

• 10 Comments

Remember last we talked about Ajax Password Strength Meter by Code and Coffee which is not very useful because of the bad algorithm. Today we have a JQuery Password Strength Meter which is a small plug in that provides an easy way to show the strength of a users password as well. The algorithm seems to be a lot better than the last one and the Author said he is still improving the algorithm. JQuery Password Strength Meter provides some simple options that allow you to customize the output. You can define the strength of the meter easily by adjusting the score for each requirement.

Requirements: JQuery Framework
Demo: http://digitalspaghetti.me.uk/index.php?q=jquery-pstrength
License: MIT License

• 6 Comments

Password Strength Meters are becoming more and more popular amongst web services. Google uses one when creating a Google account. The password strength meters wil be updated for every key input the user types. So how does one go about making one of these meters? Code and Coffee created one for us, it calculates how many different combinations there are for the password you enter, then determine how many days it would take to crack your password. The algorithm returns a percentage that he then in turn convert to a nice GUI for the end user to see.

Requirements: Modern Browser with Javascript Enabled
Demo: http://www.codeandcoffee.com/wp-content/uploads/demo.html
License: License Free

• 12 Comments

Really Easy Field Validation from Dexagogo allow us to attach to the form’s onsubmit event, read out all the form elements’ classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting. All the validations can be done in real time which means if the field does not validate, error messages will be popped up after swtching to another field. And the validations can be done after users clicking form’s submit button. This form validation script is extremely easy to integrate into your website or web application.

Requirements: Any Modern Browsers with Javascript Enabled
Demo: http://tetlaw.id.au/upload/dev/validation
License: MIT License

• 5 Comments

Despite of the fact that there are increasing number of spam on the internet, we need some tools to defend it. Psyrens has created an Ajax CAPTCHA which allow us to validate the CAPTCHA field in real time. It is very simple but extremely useful.

Requirements: Any Modern Browsers with Javascript Enabled
Demo: http://psyrens.com/captcha/
License: License Free

• 3 Comments

As we know, the input with the type=”submit” is either too ugly (Firefox), a little buggy (Internet Explorer) or completely inflexible (Safari). The solution for most is to use image inputs and create the damn things ourselves. And it’s unfortunate, because then we’re reduced to the tedious tasks of opening up Photoshop every time we’re in need of a new button. What we need is something better—something more flexible and meant for designers. Lucky for us, the solution already exists. ParticleTree introduced us a better way to do it, also with mouseover and mouseout effect.

Requirements: No Requirements
Demo: http://particletree.com/features/rediscovering-the-button-element
License: License Free

• 2 Comments