Forms
Basic elements
Different form elements with (new) input types's, attributes and more. No plugins are used in this section!
HTML5 has a couple of new input type's, which are pretty usefull, but not all browsers do support them (yet) so we only use the best supported new types like email, url, tel.
Ads an text label to the input it self. We have included an jQuery fallback for older browsers.
This can be used in combination with CSS3 to validate form without Javascript. You can see this in action by clicking on the 'plugins' tab.
Maxlength allows an max length of characters in a input or textarea field.
The first input in the source order that has the autofocus attribute will be focused on page load.
You can use the disabled attribute to disable form elements.
We have used a pretty cool way to style radio and checkbox buttons, with nothing more than css(inc image sprite and browser fallback).
You can use different styling to style a radio/checkbox.
You can use the disabled attribute to disable form elements.
We have used a pretty cool way to style radio and checkbox buttons, with nothing more than css(inc image sprite and browser fallback).
You can use the disabled attribute to disable form elements.
At default textarea's are rezisable but only vertical.
By adding a class you can disable the resizing of the texarea.
Maxlength is a new attribute that sets an maxlength to a input or textarea. This attribute is supported by all modern browsers.
You can use the disabled attribute to disable form elements.
This is the default un-styled select element(styled can be found in the plugins tab).
This can be used in combination with CSS3 to validate form without Javascript. You can see this in action by clicking on the 'examples' tab.
You can use the disabled attribute to disable form elements.
You can group related options by using the optgroup element.
Set an value on how many options you want to show. Notice: as this is NOT a multiple select field you can only select just 1 option.
Allow multiple options to be selected.
You can use the disabled attribute to disable form elements.
You can group related options by using the optgroup element.
Set an value on how many options you want to show.
This is the default un-styled file type input(styled can be found below).
You can use the disabled attribute to disable form elements.
In HTML5 you can filter(accept) certain file extentions. This example only accepts images.
File inputs can now have the multiple attribute which allow for multiple files to be selected from the file browser.
Plugins
There are a couple of powerfull form related plugins in this theme, from styling to management to helpers.
HTML5 validation and autosave
HTML5 form with CSS3 validation that works on input fields(include checkbox and radio), select and textarea's. The auto save plugin saves every xxxx seconds the content of the form into the localstorage so that if something happens to the page before the form has been send it will restore all the entered value's. You can set an save time(in seconds) which is used to save the data every xxxx seconds and a expire after time(minutes) which means that the data will only be available for xxxx minutes.
Chained inputs
This plugin allows you to group or chain inputs together so that if the max length is reached it automatically goes to the next input in the group.
This example will blur the last input once it has reached the max length(this option can be set to true or false).
Checkbox toggle
Select or un-select all checkbox inputs in an certain area. This plugin does support keyboard events(shift key).
Mass check/un-check large amount of checkboxes inside a form.
You can check all checkboxes upon start by just adding the checked attribut to the trigger checkbox.
Flyout search
A hidden flyout search field. Notice: this isn't a plugin, but a couple of lines of jQuery.
If clicked the search field will flyout on the leftside.
You can group the flyout search with buttons and dropdowns/dropups.
Simple Select
Lightweight select styling plugin with no options(just 1 callback function). Notice this will not work with the attribute 'multiple'.
Dont want to use a big select styling plugin like select2 use this one instead as this is a lightweight styling plugin with no options.
Auto expand
A lightweight auto expand plugin that allows you to expand an textarea.
Expand a textarea to a set height on focus, and let it go back to it's original size on blur.
The height can be set by the plugin or per textarea with an dataset attribute.
Show password
A simple show password input field.
Bootstrap datepicker
Powerfull dropdown calendar plugin. This plugin has a couple of options and settings, we just show you the basics.
This example is disabled and the calendar is trigger by the button right.
Bootstrap file upload
Easy to use styled file inputs.
This plugin allows you to upload files just like a file input. The example above is build with a grid layout.
Show a preview of the uploaded images. Notice! Image preview only works in IE10+, FF3.6+, Chrome6.0+ and Opera11.1+. In older browsers and Safari, the filename is shown instead.
Bootstrap masked inputs
Only allow specific formats in inputs.
Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.
Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.
Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.
Select2
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
Very basic styled select form, with search field. We have choosen to transform select field with a class, this way if there is no room for the plugin you can use the un-styled select fields.
Very basic styled select form, with search field. We have choosen to transform select field with a class, this way if there is no room for the plugin you can use the un-styled select fields.
Colorpicker
Add color picker to field or to any other element.
Hook a color picker to a basic text input and show it on click.
Build a colorpicker component that shows a colorpicker if you click on the button, and show a small color thumb.
Timepicker
Easily select a time for a text input using your mouse or keyboards arrow keys.
Cool dropdown time picker. This plugin has a couple of options to manage the time picker.
noUiSlider
A lightweight, highly customisable slider without bloat. Supports Google Chrome, Firefox, Opera, Safari and Internet Explorer 7 to 10. It also supports touch on capable devices, such as iPhone, iPad and Windows 8 and Android devices.
Basic horizontal range slider.
Change the direction of the range slider.
You can use the range slider to act like an toggle switch.
You can bind the range slider to several fields, this way you can see the values.
You can bind the range slider to several fields, this way you can see the values.
Use steps to get/set a value.
Group a couple of range sliders to make a nice control panel.
jQuery Autosize
A plugin to enable automatic height for textarea elements.
Automatic height for textarea elements.
Password meter
A jQuery plugin to indicate the strength of passwords.
Shows a colored bar below the password input.
Bootstrap
Adding on top of existing browser controls, Bootstrap includes other useful form components.
Prepend elements to a input, for example text or an icon.
Append elements to a input, for example text or an icon.
Combined appending and prepending element to a input, for example text or an icon.
Append/prepend a checkbox/radio button to the input.
Append/prepend a checkbox/radio button to the input.
Append a extra button to the input.
Append a multiple buttons to the input,
Prepend a multiple buttons to the input,
Prepend a dropdown to a input.
Append a dropdown to a input.
Append and prepend a dropdown to a input.
You can use several relative sizes for form elements. Notice: we have used the sizing for large screens (*-lg-*).
You can use the grid classes to build a grid based layout for form elements. Notice: we have used the sizing for large screens (*-lg-*).
Bootstrap includes validation styles for error, warning, info, and success messages.
