Forms

A variety of forms and elements.


Default styles

Default form element styles.

        
           

Additional layouts

Furatto comes with a bunch of additional form layouts for different purposes

Inline form

        
          

Horizontal form

           
            

Login form

           
              
           
      

Checkboxes and radios

Furatto helps you build beautiful checboxes and radio buttons by just adding the data attribute furatto and set it to the input type to style checkbox/radio. It uses the iCheck plugin by @damirfoy.

Heads up!

In order to loose some weight we remove the extra colors and left just the black and blue skins. But don't worry you can add more colors, just follow the recipe steps on the wiki.

The color scheme for the checkboxes are:

         
            <input type="checkbox" id="checkbox2" checked data-furatto='checkbox'>
            <label for="checkbox2" class="checkbox-label inline">Checkbox 2</label>

            <input type="radio" name="iCheck" id="radiobutton1" data-furatto='radio' data-color="blue">
            <label for="radiobutton1" class="radiobutton-label inline">Radiobutton 1</label>
        
      

Selects

Furatto comes with beautiful select elements, and makes it really easy to integrate.

         
           <select value="language" class="" tabindex="1" name="languageslist" data-furatto='select'>
             
             
             
             
             
             
           </select>
         
      

Uneditable inputs

For disableing and input or make it not editable just add the disabled attribute.

           
              
            
      

Validation states

Furatto includes several input states to use them in the right cases.

This is correct
Hi there!
Username is taken
The email is bad formatted
         
          
This is correct
Hi there!
Username is taken
The email is bad formatted