HTML5 Input Types Alternative (Part 2)

July 17, 2014

Some time back, I wrote a post - HTML5 Input Types Alternative - where I suggested that since implementation in various browsers of new HTML5 input types is inconsistent, we should not yet use them, but rather use controls implemented in JavaScript. I have suggested w2ui-fields library. As I have gotten feedback and suggestions from many people, I have improved and updated the library which is now ready for its second release.

Control Types

The number of input controls is still the same. They can be split in the 5 categories:

These are most frequent control types that, I think, can provide 98% of the input needs to any project. The controls are flexible in a way that they are not locked to any particular format. If it is a date, you can define virtually any date format; if is is a number, you have an option to specify its formatting rules, etc.

Demos

Below are some of the demos of the controls. For more complete coverage go to demo page.

Number:

Money:

Date:

Color:

List:

Combo:

Multi:

Upload:

What Is New

I have worked through each comment in my previous post trying to understand and implement suggestions for improvement. As a result, the library seems to be more user friendly.

LIST - has improved visual markers, search, navigation and events
MULTI SELECT - has improved keyboard support and item rendering
DATE - has month and year selection (click on the month/year title)
UPLOAD - has improved preview, item rendering, events

In general, I wanted these controls to be as smoothly integrated with regular <INPUT> as possible. Below is a sample example of use:

Each control

Works on INPUT
Dispatches DOM change event
Supports keyboard (arrow keys, etc.)
Has customization options
Has clean user experience

Download

The library is only 23kb (minified and gzipped). These controls are part of w2ui 1.4, but can also be used stand-alone. You can link it directly: