Forms

Form creation is designed to be simple and very flexible. Forms are created with the combination of standard form elements and the grid.

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

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>

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>



Share with your friends


Warning: count(): Parameter must be an array or an object that implements Countable in /home/seotoaster/lib/Zend/Db/Table/Abstract.php on line 1305