Form

레이블, 검증, 레이아웃이 포함된 그룹형 폼 구조.

Base

Title

<div class="ga-form">
    <div class="field">
        <!-- form contents(label, input ...) -->
    </div>
</div>

Header

Title

<div class="ga-form">
    <div class="header">
       <div class="title">Title</div>
    </div>
    <div class="field">
        <!-- form contents(label, input ...) -->
    </div>
</div>

Inline

Title

<div class="ga-form">
    <div class="field inline">
        <!-- form contents(label, input ...) -->
    </div>
</div>

Label

Title

Title 1

Title 2

Title 3

<div class="ga-form">
    <div class="field">
        <label>label</label>
        <input type="text" />
    </div>
</div><div class="ga-form">
    <div class="fields">
        <div class="field column span-3">
             <label>label</label>
        </div>
        <div class="field column span-9">
             <input type="text">
        </div>
    </div>
</div>

Field

Field 1

Field 2

<div class="ga-form">
    <div class="field">
        <label>label</label>
        <input type="text" />
    </div>
</div>

Fields

Field 1

Field 2

Field 3

<div class="ga-form">
    <div class="fields">
        <div class="field">
             <input type="text">
        </div>
        <div class="field">
             <input type="text">
        </div>
        <div class="field">
             <input type="text">
        </div>
    </div>
</div>

Field

Field 1

Field 2

<div class="ga-form">
    <div class="field disabled">
        <label>label</label>
        <input type="text" />
    </div>
</div>

Fields Divide

Divide-2

field 1

field 2

Divide-4

field 1

field 2

field 3

field 4

<div class="ga-form">
    <div class="fields divide-{ 2|4|6|8|10 }">
        <div class="field column">
             <input type="text">
        </div>
        <div class="field column">
             <input type="text">
        </div>
        ... ...
        <div class="field column">
             <input type="text">
        </div>
    </div>
</div>

Fields grids

span 3

span 5

span 4

<div class="ga-form">
    <div class="fields">
        <div class="field column span-{num}">
             <input type="text">
        </div>
        <div class="field column span-{num}">
             <input type="text">
        </div>
        ... ...
        <div class="field column span-{num}">
             <input type="text">
        </div>
    </div>
</div>

Text Area

Textarea

Textarea Short

<!-- Normal -->
<div class="ga-form">
    <div class="field">
        <label>label</label>
        <textarea />
    </div>
</div>
 <!-- Short -->
<div class="ga-form">
    <div class="field short">
        <label>label</label>
        <textarea />
    </div>
</div>

Check Box

Display checkbox

<div class="ga-form">
    <!-- something form element field -->
    <div class="field">
        <div class="ga-checkbox">
          <input type="checkbox" />
          <label>label</label>
        </div>
    </div>
</div>

Radio Button

<div class="ga-form">
    <!-- something form element field -->
    <div class="field">
        <div class="ga-checkbox radio">
          <input type="radio" name="radios" />
          <label>label</label>
        </div>
    </div>
</div>

Select Box

<div class="ga-form">
    <!-- something form element field -->
    <div class="field">
        <div class="ga-select-box">
          <select />
        </div>
    </div>
</div>