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, 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

Group header

<form>
    <fieldset>
        <legend>Group header</legend>
        ...
    </fieldset>
</form>

Without formatting

Group header

<form>
    <fieldset class="unstyled">
        <legend>Group header</legend>
        ...
    </fieldset>
</form>

Inactive group

Group header

<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>

Attention!

Set the width using grid classes .grid_N and .fl-right to position the field on the right side

IMPORTANT!

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>

.input-label

It only works when there is an attribute required in the fields

<p class="input-label">
    <input type="text" required>
    <label>Label</label>
</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>

Inline form elements


Add a class .label-inline to the parent element to align the signature in the middle of the field with respect to the form

<p class="label-inline clearfix">
    <label class="grid_2">Label on the left</label>
    <input type="text" class="grid_10" placeholder=".label-inline">
</p>
<p class="label-inline clearfix">
    <select type="text" class="grid_10">
        <option>.label-inline</option>
    </select>
    <label class="grid_2">Label on the right</label>
</p>