Archive for the ‘Forms’ Category

Web users are experienced in filling standard forms like contact or comment forms.

For non-standard forms, it is always a good idea to inform users about the data expected.

Progression.js

Progression.js is a jQuery plugin that shows tips about an active form field and also displays the progress (how much of the form is filled).

It uses the data attributes for storing the tips, has options for customizing the tooltip and can be implemented into any form so easily.

  • Tags:
  • Filed under: Forms, Goodies, MIT License
  • 1 Comment
  • Lately, I was in a search for a jQuery range slider, jQuery UI’s slider widget was the first that I thought of.

    It had all the features I needed: working as a single or range slider, default values and man/maxvalues. However, the smallest download size for it was still ~40kb. Too much for a slider.

    Tried many others, they were good but almost each of them was missing a feature I needed (that you may not need).

    jQuery Range Slider - noUiSlider

    And I found noUiSlider. It had all the things I was looking for and with a size of 2.7kb.

    There is support for single or double handles, custom starting values, vertical/horizontal orientation and the ability to get /set values.

    Also, it works on touch devices and can be customized with CSS completely. Just a perfect widget for any UI.

    HTML form elements look and behave slightly (or sometimes more) different in each browser.

    In order to find out the differences and test them easily, there is a website: Native Form Elements.

    Native Form Elements

    The website does a simple thing, it lists all the form elements (including HTML5 elements) and their disabled states.

    So, to compare, opening the site in different browsers is enough.

  • Tags:
  • Filed under: Forms, Goodies, No License
  • 0 Comments
  • CSS3 provides us lots of styling options to create good-looking form elements.

    Fancy Input, a jQuery plugin, doesn’t focus on the styling part but makes the fields attractive (and fun-to-use) by adding CSS3-powered effects.

    Fancy Input

    The plugin hides the input field, places a span element containing the character pressed and applies CSS3 transitions to each element (letter).

    There are multiple built-in effects and it works with both input + textarea fields.

  • Tags:
  • Filed under: Forms, Goodies, MIT License
  • 2 Comments
  • Spectrum is a jQuery colorpicker plugin that probably comes with all the features you are looking for.

    It is image-free (only CSS and JS) and can be used for all browsers or only as a polyfill for the input[type=color] of HTML5 .

    The picker is actually familiar to designers/developers as it is the same one that comes with WebKit DevTools (created by the same developer) but now available as a jQuery plugin.

    Spectrum - jQuery Colorpicker

    It has support for color palettes by storing/displaying the colors you chose, the default selected color can be set or it can be configured to only display the palette with pre-defined colors.

    Alpha transparency selection is available, can be always visible (without clicking to a picker icon) and supports multiple color formats.

    Spectrum can be customized with CSS and it works on mobile as well.