Code Blender

An atomic Middleman partials library

Input

  2. Atom
  3. Form
  4. Input

Text Type With input group appended 

= codeBlender "input", "atom/form/input",
  { help:  {},
    icon:  { prepend: "fa-credit-card" },
    input: { name: "text", placeholder: "Enter Text" },
    label: { title: "Text Input" } }

<div class='form-group' show-errors='{showSuccess: true}'>
<label class='control-label' for='text'>
Text Input
</label>
<div class='input-group'>
<span class='fa fa-credit-card input-group-addon' ng-hide='loading'></span>


<input autocomplete='on' class='form-control' id='text' name='text' placeholder='Enter Text' type='text'>

</div>

<span class='help-block'></span>

</div>

Password Type Also contains some help text 

= codeBlender "input", "atom/form/input",
  { help:  { text: "Enter 8 characters [a-zA-Z0-9]" },
    icon:  { prepend: "fa-credit-card" },
    input: { name: "password", placeholder: "Enter password", type: "password" },
    label: { title: "Password" } } 

<div class='form-group' show-errors='{showSuccess: true}'>
<label class='control-label' for='password'>
Password
</label>
<div class='input-group'>
<span class='fa fa-credit-card input-group-addon' ng-hide='loading'></span>


<input autocomplete='on' class='form-control' id='password' name='password' placeholder='Enter password' type='password'>

</div>

<span class='help-block'></span>

</div>

Email Type Also contains a group icon 

= codeBlender "input", "atom/form/input",
  { help:  {},
    icon:  { prepend: "fa-envelope" },
    input: { name: "email", placeholder: "Enter email", type: "email" },
    label: { title: "Email" } }

<div class='form-group' show-errors='{showSuccess: true}'>
<label class='control-label' for='email'>
Email
</label>
<div class='input-group'>
<span class='fa fa-envelope input-group-addon' ng-hide='loading'></span>


<input autocomplete='on' class='form-control' id='email' name='email' placeholder='Enter email' type='email'>

</div>

<span class='help-block'></span>

</div>

Columns Specify the width of an Input 

= codeBlender "input", "atom/form/input",
  { column: "col-lg-6",
    icon:   { prepend: "fa-envelope" },
    input:  { name: "email", placeholder: "Enter email", type: "email" },
    label:  { title: "Email" } }

<div class='form-group' show-errors='{showSuccess: true}'>
<label class='control-label' for='email'>
Email
</label>
<div class='col-lg-6'>
<div class='input-group'>
<span class='fa fa-envelope input-group-addon' ng-hide='loading'></span>


<input autocomplete='on' class='form-control' id='email' name='email' placeholder='Enter email' type='email'>

</div>


</div>
</div>

Button addon Specify the width of an Input 

= codeBlender "input", "atom/form/input",
  { button: { append: { text: "HERE", ng: { click: "here" } } },
    input:  { name: "email", placeholder: "Enter email", type: "email" },
    label:  { title: "Email" } }

<div class='form-group' show-errors='{showSuccess: true}'>
<label class='control-label' for='email'>
Email
</label>
<div class='input-group'>
<input autocomplete='on' class='form-control' id='email' name='email' placeholder='Enter email' type='email'>

<span class='input-group-btn'><button class='btn btn-default' ng-click='here' type='button'>
HERE

</button>
</span>
</div>


</div>

Resources Useful websites and tutorials

Title URL
Bootstrap Forms http://getbootstrap.com/css/#forms
Bootstrap Forms http://getbootstrap.com/css/#forms
Formspree http://formspree.io/
HTML5 Forms http://diveintohtml5.info/forms.html
Touchspin http://www.virtuosoft.eu/code/bootstrap-touchspin/
Select Boxes Chosen http://harvesthq.github.io/chosen/

Tasks

Task Date
Link to the clear button page
Complete this page with all the relevant types available
Add the password pattern to the input
Password should be accompanied by the password validation element
On Submit all inputs should validate - contain them in one form element
Sort out Form groups and input groups - one should be nested in the other haml_tag?
Check box has a label around the input - maybe create new helper for this
If using .form-horizontal then need to address the column sizes that add up to 12 on label and input
Input groups can have a size attribute i.e. input-group-lg add this as a size attribute
Input Groups can have an associated input-group-btn with dropdowns etc
Make the pre and appended items interactive.
There are two many container divs being produced use content capture.
Make it so it produces something with zero configuration
Clear button should be an option
The Help block needs more documentation with validation and error messages - it expects array
Split out the attributes of an input, they follow a common pattern in most areas, display local or false