Form

form

Html form header/footer

Example

Order information

Order info

Order number
[INPUT]
Order date
Delivery date
Remarks

Contact information

Delivery address

Company
Person
Address

Billing address

Company
Person
Address

Products

Priducts
Prce
HTML code 
<div class="form">
  <h2 class="form__group__header">Order information</h2>
  <div class="row form__group">
    <div class="col col-md-12 form__fieldset">
      <h3 class="form__fieldset__header">Order info</h3>
      <div class="row form__field">
        <div class="col col-md-2 form__label">
          <span class="label">Order number</span>
        </div>
        <div class="col col-md-10 form__input">
          <div class="row">
            <div class="col col-md-2">[INPUT]</div>
          </div>
        </div>
      </div>
      <div class="row form__field">
        <div class="col col-md-2 form__label">
          <span class="label">Order date</span>
        </div>
      <div class="col col-md-10 form__input">
        <div class="row">
          <div class="col col-md-12"></div>
        </div>
      </div>
    </div>
    <div class="row form__field">
      <div class="col col-md-2 form__label">
        <span class="label">Delivery date</span>
      </div>
      <div class="col col-md-10 form__input">
        <div class="row">
          <div class="col col-md-12"></div>
        </div>
      </div>
    </div>
    <div class="row form__field">
      <div class="col col-md-2 form__label">
        <span class="label">Remarks</span>
      </div>
      <div class="col col-md-10 form__input">
        <div class="row">
          <div class="col col-md-12"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<h2 class="form__group__header">Contact information</h2><div class="row form__group"><div class="col col-md-6 form__fieldset"><h3 class="form__fieldset__header">Delivery address</h3><div class="row form__field"><div class="col col-md-4 form__label"><span class="label">Company</span></div><div class="col col-md-8 form__input"><div class="row"><div class="col col-md-12"></div></div></div></div><div class="row form__field"><div class="col col-md-4 form__label"><span class="label">Person</span></div><div class="col col-md-8 form__input"><div class="row"><div class="col col-md-12"></div></div></div></div><div class="row form__field"><div class="col col-md-4 form__label"><span class="label">Address</span></div><div class="col col-md-8 form__input"><div class="row"><div class="col col-md-12"></div></div></div></div></div><div class="col col-md-6 form__fieldset"><h3 class="form__fieldset__header">Billing address</h3><div class="row form__field"><div class="col col-md-4 form__label"><span class="label">Company</span></div><div class="col col-md-8 form__input"><div class="row"><div class="col col-md-12"></div></div></div></div><div class="row form__field"><div class="col col-md-4 form__label"><span class="label">Person</span></div><div class="col col-md-8 form__input"><div class="row"><div class="col col-md-12"></div></div></div></div><div class="row form__field"><div class="col col-md-4 form__label"><span class="label">Address</span></div><div class="col col-md-8 form__input"><div class="row"><div class="col col-md-12"></div></div></div></div></div></div><h2 class="form__group__header">Products</h2><div class="row form__group"><div class="col col-md-12 form__fieldset"><div class="row form__field"><div class="col col-md-2 form__label"><span class="label">Priducts</span></div><div class="col col-md-10 form__input"><div class="row"><div class="col col-md-12"></div></div></div></div><div class="row form__field"><div class="col col-md-2 form__label"><span class="label">Prce</span></div><div class="col col-md-10 form__input"><div class="row"><div class="col col-md-2"></div></div></div></div></div></div></div>
Type molecule
Group form
Elements icon, button
Todo
Javascript: Only basic mode available!! (one group/fieldset, title,input,help)

PHP

Wrapper to use element through PHP

Extends
Render html
Create arguments
Code example 
$Form = $mad->get('ui', 'form', Array(
  'title' => 'Form header',
  'description' => 'Form description',
));

$Form->addGroup(Array());
$Form->newGroup(Array());

$Form->addFieldset(Array());
$Form->newFieldset(Array());

$Form->addField(Array());
$Form->newField(Array());

$Form->addInput(Array());
$Form->newInput(Array());

$Form->addHidden(Array());
$Form->newHidden(Array());


// Add group and fieldset:

$Form->addGroup('New section');

$Form->addFieldset('New fieldset','1/2');

// Fields from page

$Page->addFieldsToForm($Form, 'order_state,client');


// Multiple input fields in same field

$Form->addInput($this->get('ui','input',Array(
  'name'  => 'form_name',
  'value' => $value
)),'1/2');

$Form->addInput($this->get('ui','input',Array(
  'name'  => 'form_name',
  'value' => $value
)),'1/2');

Javascript

Wrapper to use element through Javascript

Code example

Basic example

var $Form = cms.get('ui', 'form').appendTo($Content);

$Form.addField({
    title: 'Label text',
    input: cms.get('ui', 'input', {
        name: 'name',
        value: value
    })
});

Help text

var $Form = cms.get('ui', 'form').appendTo($Content);

$Form.addField({
    title: 'Label text',
    input: cms.get('ui', 'input', {
        name: 'name',
        value: value
    }),
    help: 'This is input for something'
});

Hidden value

Add hidden input field to form.

$Form.addHidden({
      name: 'name',
      value: value
});

Set col sizes

Set label and input col size

var $Form = cms.get('ui', 'form', {
    col: {
        label: 2,
        input: 10
    }
}).appendTo($Content);

Styles

Elements Css style

condensed < class='form condensed'>Condensed
No paddings
lined < class='form lined'>Lined
Underlined
label-bold < class='form label-bold'>Label-bold
Labels bold
valuelist < class='form valuelist'>Valuelist
Title/value -pairs
justified < class='form justified'>Justified
Last cell align right
single-column < class='form single-column'>Single-column
Keep allways in 1 column. col-md-12,12
double-column < class='form double-column'>Double-column
Keep allways in 2 columns. col-xs-4,8