Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Forms’ Category

iOS7 has slick, flat and circular switches that are used for select box-like elements that has two options.

Switchery is a JavaScript library, that doesn’t require any JS  frameworks, that can convert select boxes into such interfaces.

The style of the switches can be customized easily, they support the “disabled” state and the effect speed can be changed as well.


  • Tags:
  • Filed under: Forms, Gallery, Goodies, MIT License
  • Creating the design and functionality of a form with HTML is the most standard way.

    Alpaca, a form-creation-library that is built with jQuery, aims to change that by separating the data and presentation.

    It transforms a pre-formatted JSON schema into a fully-functional form which can be styled easily with CSS.

    Alpaca - jQuery Forms

    Using that approach, it is possible to reuse the same code on any platform (mobile- tablet, desktop).

    The library is pre-packaged with controls, wizards, layouts, I18N support and pluggable template engines for EJS, Handlerbars and jQuery.tmpl.

    Alpaca’s documentation is worth checking for finding out out its capabilities.

  • Tags:
  • Filed under: Forms, Goodies, Other License
  • Grid Forms is a JavaScript-CSS framework that aims to ease data entry.

    It allows us to create printed-like forms that are perfectly placed on a grid and occupy less space.

    Grid Forms

    The framework comes with ready-to-use styles and they can also be customized with Sass.

    Created forms are responsive and use a simple HTML structure.

    You’ll remember ioDeck, the self-hosted form builder application for creating forms and handling the responses with almost zero effort.

    FormBuilder.js is a client-side (HTML-CSS-JavaScript) resource for creating such form builders.

    It provides the interface that supports inserting input types and re-ordering them with drag ‘n’ drops.


    The form view is generated as a JSON data and FormBuilder.js doesn’t provide the code for “how the rest will be handled (saving the form, keeping the responses, etc.)”.

    Simply, the resource is just the client-side engine that provides the hard-work + its logic.

    CSS Checkbox is a website which provides styles for customizing checkboxes (without any JavaScript).

    There are styles which only have different colors compared to standard checkboxes and more customized ones which uses images too.

    CSS Checkbox

    Also, it is possible to find styles that mimic the usage in well-know websites like Reddit or Google.

    All the styles can be downloaded at once or it is possible to view the code for each item.

    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 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
  • 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
  • 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.


    Uptime Robot