CSS Components

Forms

Beautiful looking forms.

Kube offers full control over look and feel of a form, whether you need black background, Live Search or Autocomplete. Full set of input types make it easy to create forms of any kind.

Kube Forms only utilize native tags while remaining most flexible in building most complicated forms.

Email Password

Log in Cancel

<form method="post" action="" class="forms">
    <label>
        Email
        <input type="email" name="user-email" class="width-50" />
    </label>
    <label>
        Password
        <input type="password" name="user-password" class="width-50" />
    </label>
    <p>
        <button class="btn-blue">Log in</button>
        <button class="btn">Cancel</button>
    </p>
</form>

Need more simplicity? Ok, no problem.

Log in

<form method="post" action="" class="forms">
    <label>
        <input type="email" name="user-email" placeholder="Email" class="width-50" />
    </label>
    <label>
        <input type="password" name="user-password" placeholder="Password" class="width-50" />
    </label>
    <p>
        <button class="btn-blue width-50">Log in</button>
    </p>
</form>

Input states

Error Error Success Success Gray

<form method="post" action="" class="forms">
    <label>
        Error  <span class="error">Error</span>
        <input type="text" name="state-error" class="input-error width-40"  />
    </label>
    <label>
        Success  <span class="success">Success</span>
        <input type="text" name="state-success" class="input-success width-40" />
    </label>
    <label>
        Gray
        <input type="text" name="state-gray" class="input-gray width-40" />
    </label>
</form>

Required

Email *

<form method="post" action="" class="forms">
    <label>
        Email <span class="req">*</span>
        <input type="email" name="user-email" class="width-50"  />
    </label>
</form>

Input Sizes

Big

<form class="forms forms-inline">
    <input type="text" class="input-big width-50" placeholder="Title">
    <button class="btn btn-big">Big</button>
</form>

Normal

<form class="forms forms-inline">
    <input type="text" class="width-50" placeholder="Title">
    <button class="btn">Normal</button>
</form>

Small

<form class="forms forms-inline">
    <input type="text" class="input-small width-50" placeholder="Title">
    <button class="btn btn-small">Small</button>
</form>

Smaller

<form class="forms forms-inline">
    <input type="text" class="input-smaller width-50" placeholder="Title">
    <button class="btn btn-smaller">Smaller</button>
</form>

Input Descriptions

Name Always nice to feel important. Email

Please enter your email.

<form method="post" action="" class="forms">
    <label>
        Name <span class="forms-desc">Always nice to feel important.</span>
        <input type="text" name="user-name" class="width-50"  />
    </label>
    <label>
        Email
        <input type="email" name="user-email" class="width-50"  />
        <div class="forms-desc">Please enter your email.</div>
    </label>
</form>

Form Sections

Name

Login data

Email Password

About

<form method="post" action="" class="forms">
    <label>
        Name
        <input type="text" name="user-name" class="width-50"  />
    </label>
    <fieldset>
        <legend>Login data</legend>
        <label>
            Email
            <input type="email" name="user-email" class="width-50"  />
        </label>
        <label>
            Password
            <input type="password" name="user-password" class="width-50"  />
        </label>
    </fieldset>
    <fieldset>
        <legend>About</legend>
        <label>
            <textarea name="user-about" class="width-100" rows="5"></textarea>
        </label>
    </fieldset>
    <p>
        <input type="submit" class="btn" value="Submit" />
    </p>
</form>

Checkboxes

Set .forms-list class for the list.

• Check 1
• Check 2
• Check 3
• Check 4

<form method="post" action="" class="forms">
   <ul class="forms-list">
        <li>
           <input type="checkbox" name="checkbox-1" id="checkbox-1">
           <label for="checkbox-1">Check 1</label>
        </li>
        ...
    </ul>
</form>

Inline Checkboxes

Set .forms-inline-list class for the list.

Please check in

• Check 5
• Check 6
• Check 7
• Check 8

<form method="post" action="" class="forms">
    <label>Please check in
        <ul class="forms-inline-list">
            <li>
                <input type="checkbox" name="checkbox-5" id="checkbox-5">
                <label for="checkbox-5">Check 5</label>
            </li>
            ...
        </ul>
    </label>
</form>

Without label

• Check 9
• Check 10
• Check 11
• Check 12

<form method="post" action="" class="forms">
    <ul class="forms-inline-list">
        <li>
            <input type="checkbox" name="checkbox-9" id="checkbox-9">
            <label for="checkbox-9">Check 5</label>
        </li>
        ...
    </ul>
</form>

Options

• Option 1
• Option 2
• Option 3
• Option 4

<form method="post" action="" class="forms">
    <ul class="forms-list">
        <li>
            <input type="radio" name="radio-1" id="radio-1">
            <label for="radio-1">Option 1</label>
        </li>
        ...
    </ul>
</form>

More Examples

Select multiple Some text goes here Another choice could be here Yet another item to be chosen Some text goes here Another choice could be here Yet another item to be chosen Some text goes here Another choice could be here Yet another item to be chosen

<form method="post" action="" class="forms">
    <label for="select_multi">
        Select multiple
        <select name="select-multi" class="width-50" multiple="multiple" size="10">
        <optgroup label="Group 1">
            <option value="1">Some text goes here</option>
            ...
        </optgroup>
        ...
        </select>
    </label>
</form>

Choose date

• ---
  Month
• ---
  Day
• ---
  Year

<form method="post" action="" class="forms">
    <label>
        Choose date
        <ul class="forms-inline-list">
            <li>
                <select><option>---</option></select>
                <div class="forms-desc">Month</div>
            </li>
            <li>
                <select><option>---</option></select>
                <div class="forms-desc">Day</div>
            </li>
            <li>
                <select><option>---</option></select>
                <div class="forms-desc">Year</div>
            </li>
        </ul>
    </label>
</form>

Phone number

• ( )
-
•  ext:
Needed if there are questions about your order

<form method="post" action="" class="forms">
    Phone number
    <ul class="forms-inline-list">
        <li>
            ( <input type="text" name="phone-prefix" size="3" /> )
        </li>
        <li>
            <input type="text" name="phone-number-1" size="3" />
        </li>
            - <input type="text" name="phone-number-2" size="3" />
        </li>
        <li>
            ext: <input type="text" name="phone-ext" size="3" />
        </li>
        <div class="forms-desc">Needed if there are questions about your order</div>
    </ul>
</form>

Go

<form method="post" action="" class="forms">
    <label class="input-groups">
        <input type="text" name="search" placeholder="Search" />
        <span class="btn-append">
            <button class="btn">Go</button>
        </span>
    </label>
</form>

Country ---

Where you from?

<form method="post" action="" class="forms">
    <label for="country">
        Country
        <select class="width-50">
            <option>---</option>
        </select>
        <div class="forms-desc">Where you from?</div>
    </label>
</form>

Text

<form method="post" action="" class="forms">
    <label for="text">
        Text
        <textarea rows="4" class="width-100"></textarea>
    </label>
</form>

Text

<form method="post" action="" class="forms">
    <label for="text">
        Text
        <textarea rows="4" class="width-60"></textarea>
    </label>
</form>

Input on Black

<input type="text" placeholder="Type to search..." class="input-on-black" />

Disabled

<input type="text" value="Text" disabled="disabled">

<input type="checkbox" disabled="disabled">

<input type="radio" disabled="disabled">

Text

<textarea disabled="disabled">...</textarea>

Item

<select disabled="disabled">
    <option>...</option>
</select>

Append & Prepend

How much is it?

$

<form method="post" action="" class="forms">
    <label>
        How much is it?
        <div class="input-groups width-50">
            <span class="input-prepend">$</span><input type="text">
        </div>
    </label>
</form>

$

<form method="post" action="" class="forms">
    <div class="input-groups">
        <span class="input-prepend">$</span><input type="text">
    </div>
</form>

$

<form method="post" action="" class="forms">
    <div class="input-groups width-30">
        <input type="text"><span class="input-append">$</span>
    </div>
</form>