Custom Form Elements, Validation and Design

To give custom style to web form elements is a challenging task because of its browser dependency, Here are some very good examples of custom form elements, form validation and form design using CSS and JavaScript.

Custom Form Elements

Custom Checkboxes & Radio Buttons

This JavaScript and CSS will allow you to use custom images for checkboxes, radio buttons and select lists. Have you ever wanted to use your own images for checkboxes, radio buttons or select lists? This script will let you do that. Easily.

Custom Form Elements using mootools

Watch all elements being styled by custom form elements using mootools

FancyForm

FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.

Custom form elements using jQuery form plugin jNice

If you want to style up your website, then I would recommend to use a jQuery form plugin : jNice.

Styled Form Controls

Very good Styling of Form Controls using Javascript and CSS

Visual styling using Ojay.Forms

In this example, we demonstrate how Ojay’s Forms module can be used to style form elements in such a way that does not alter the HTML structure of the form, and that encourages use of label tags for accessibility.

Custom Form Validations

Form field hints with CSS and JavaScript

It’s a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this.

LiveValidation

LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developers with a rich set of core validation methods, which can also be used outside the context of forms. Secondly, it provides your visitors with real-time validation information as they fill out forms, helping them to get it right first time, making the forms easier, quicker and less daunting to complete.

Simple jQuery form validation

Simple and nice way to to validate your form using jQuery,

Validation Hints for your form

As someone is typing an in an input field, it would be nice give feedback to the user as they are typing if they have satisfied that field’s validation criteria. This article will explain one way of achieving this effect using JavaScript and CSS.

Custom Form Designs using CSS

Fancy Form Design Using CSS

Forms are often critical to the function of a web site — they’re most often employed as search boxes, inquiry forms, or shopping cart checkouts — and need to function as smoothly as possible in order to meet user expectations. more…

47+ Excellent Ajax CSS Forms

Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms.

2 comments

Comments are closed.