Standard form
Standard formatting is included in <FlexKit/> and work without the additional classes for <form> as well as without any change in the standard HTML-markup. The elements <label> by default are on top of the field and aligned to the left.
<form>
<p>
<label>Description</label>
<input type="text" placeholder="Enter text ...">
</p>
<p>
<label>Select the variant</label>
<select>
<option value="seosamba">SEO Samba</option>
<option value="seotoaster">SEO Toaster</option>
<option value="ziby-kit">ziby-kit</option>
</select>
</p>
<p class="grid_6 alpha">
<label>
<input type="checkbox"> Click here and mark the checkbox
</label>
<label>
<input type="checkbox"> Click here and mark the checkbox
</label>
</p>
<p class="grid_6 omega">
<label>
<input type="radio" name="radio"> Click here and mark the radio
</label>
<label>
<input type="radio" name="radio"> Click here and mark the radio
</label>
</p>
<button type="submit">Send</button>
</form>
Supported field types
Input text fields support all types of HTML5 : text,text, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
Inactive fields
Add the atribute disabled to prevent the user input.
<input type="text" disabled>
<select disabled>...</select>
Fieldset
One of the useful form elements is <fieldset>. It is used to group the fields within the form element. After determining <fieldset>, you can add header with the help of<legend>.
Basic style
<form>
<fieldset>
<legend>Group header</legend>
...
</fieldset>
</form>
Without formatting
<form>
<fieldset class="unstyled">
<legend>Group header</legend>
...
</fieldset>
</form>
Inactive group
<form>
<fieldset disabled>
<legend>Group header</legend>
...
</fieldset>
</form>
Marked fields
Signature marking <label>
<p class="labeled">
<input type="text" class="grid_10 alpha omega fl-right">
<label class="grid_2 alpha omega">Label on the left</label>
</p>
<p class="labeled">
<input type="text" class="grid_10 alpha omega">
<label class="grid_2 alpha omega">Label on the right</label>
</p>
Set the width using grid classes .grid_N and .fl-right to position the field on the right side
For proper operation in the first place is inserted <input> or<select> and then <label> or another HTML tag with class label
With the addition of icons
<p class="labeled icon right">
<input type="text" placeholder="Text">
<i class="icon-pencil3"></i>
</p>
<p class="labeled icon left">
<input type="text" placeholder="Text">
<i class="icon-pencil3"></i>
</p>
Additional classes
Size
Set the height with the help of .larger, .large or .small, and set the width with the usage of grid classes, like .grid_N.
<input class="larger" type="text">
<input class="large" type="text">
<input type="text">
<input class="small" type="text">
<select class="larger">...</select>
<select class="large">...</select>
<select>...</select>
<select class="small">...</select>
Colors
<input class="success" type="text">
<input class="warning" type="text">
<input class="error" type="text">
<select class="success">...</select>
<select class="warning">...</select>
<select class="error">...</select>