+++ date = "2017-04-10T16:40:50+01:00" title = "Forms" draft = false weight = 60 description = "Rows and columns for all sorts of tables" bref = 'Forms come in all forms and shapes in Kube, and you can do all sorts of things with them, especially when combining with custom plugins for extra interactivity. These forms are ideal building material for your awesome projects!' toc = true +++
Base
This is the most basic form with all the basic inputs.
<form method="post" action="" class="form">
<div class="form-item">
<label>Email</label>
<input type="email" name="email" class="w50">
</div>
<div class="form-item">
<label>Country</label>
<select>
<option value="">---</option>
</select>
</div>
<div class="form-item">
<label class="checkbox"><input type="checkbox"> Check me</label>
<label class="checkbox"><input type="radio"> Radio me</label>
</div>
<div class="form-item">
<textarea rows="6"></textarea>
</div>
<div class="form-item">
<button>Log in</button>
<button class="button secondary outline">Cancel</button>
</div>
</form>
Inputs
Here's a standard input field with type set as text. Label serves as input's label, and the following div with class desc serves as an optional description.
<form class="form">
<div class="form-item">
<label>City</label>
<input type="text">
<div class="desc">...</div>
</div>
</form>
Here are two text input fields, one with a placeholder and another one disabled, both set to be 6 grid columns wide.
<form class="form">
<div class="row gutters">
<div class="col col-6">
<div class="form-item">
<input type="text" placeholder="Email">
</div>
</div>
<div class="col col-6">
<div class="form-item">
<input type="text" disabled="true" value="Disabled">
</div>
</div>
</div>
</form>
Here's how you denote required fields with req class, and add descriptions to labels using span with class desc.
<form class="form">
<div class="row gutters">
<div class="col col-6">
<div class="form-item">
<label>City <span class="req">*</span></label>
<input type="text">
</div>
</div>
<div class="col col-6">
<div class="form-item">
<label>City <span class="desc">...</span></label>
<input type="text">
<div class="desc">...</div>
</div>
</div>
</div>
</form>
Search
<form class="form">
<div class="form-item">
<input type="text" class="search">
</div>
</form>
Checkboxes & Radio
Kube features full variety of stylish checkboxes and radio buttons. You can feature them on your pages by defining input type as checkbox or radio. There's also a neat option to place checkboxes inline by adding form-checkboxes
class to the container (works for both checkboxes and radio buttons)
<form method="post" action="" class="form">
<div class="form-item form-checkboxes">
<label class="checkbox"><input type="checkbox"> Check 1</label>
...
</div>
</form>
<form method="post" action="" class="form">
<div class="form-item">
<label class="checkbox"><input type="checkbox"> Check 1</label>
...
</div>
</form>
<form method="post" action="" class="form">
<div class="form-item form-checkboxes">
<label class="checkbox"><input type="radio"> Check 1</label>
...
</div>
</form>
<form method="post" action="" class="form">
<div class="form-item">
<label class="checkbox"><input type="radio"> Check 1</label>
...
</div>
</form>
Fieldset
Fieldsets in Kube are nicely pre-formatted and ready to go. Just wrap your form in a fieldset tag and you're good to go.
<fieldset>
<legend>About</legend>
<div class="form-item">
<textarea name="user-about" rows="5"></textarea>
</div>
<div class="form-item">
<button>Submit</button>
</div>
</fieldset>
Small
Simple class .small
makes your selects and fields, well, smaller.
<form class="form">
<div class="form-item">
<input type="text" class="small" placeholder="Title">
</div>
<div class="form-item">
<select class="small">
<option>...</option>
</select>
</div>
</form>
Big
Simple class .big
makes your selects and fields, well, bigger.
<form class="form">
<div class="form-item">
<input type="text" class="big" placeholder="Title">
</div>
<div class="form-item">
<select class="big">
<option>...</option>
</select>
</div>
</form>
Width
Following framework-wide rules, it is very easy to manipulate form fields sizes. Just use w50
class to make a field 50% wide or w25
to a 25% wide.
<form method="post" action="" class="form">
<div class="form-item">
<input type="text" class="w25">
</div>
<div class="form-item">
<input type="text" class="w50">
</div>
<div class="form-item">
<input type="text" class="w75">
</div>
<div class="form-item">
<input type="text" value="100% by default">
</div>
</form>
States
By default, Kube features two different states: success and failure.
<form method="post" action="" class="form">
<div class="form-item">
<label>Your height <span class="success">...</span></label>
<input type="text" class="success">
</div>
</form>
<form method="post" action="" class="form">
<div class="form-item">
<label>Enter your weight <span class="error">...</span></label>
<input type="text" class="error">
</div>
</form>
Required
Along with making a field actually required, you can add a visual clue for the users using a span with req class.
<form method="post" action="" class="form">
<div class="form-item">
<label>Email <span class="req">*</span></label>
<input type="email" name="user-email">
</div>
</form>
Descriptions
Descriptions are simple: as long as form's element has desc class, Kube will treat it as a description.
<form method="post" action="" class="form">
<div class="form-item">
<label>Name <span class="desc">...</span></label>
<input type="text" name="user-name">
</div>
<div class="form-item">
<label>Email</label>
<input type="email" name="user-email">
<div class="desc">...</div>
</div>
</form>
Disabled
Not only text inputs can be disabled, but checkboxes and radio buttons as well. Just add disabled
attribute or .disabled
class to the input.
<input type="text" value="" disabled>
<input type="checkbox" class="disabled">
<input type="radio" disabled>
<textarea disabled></textarea>
<select disabled>
<option>...</option>
</select>
Append & Prepend
You can prepend or append certain elements within your input fields, such as currency characters.
<form method="post" action="" class="form">
<div class="form-item">
<label>How much is it?</label>
<div class="prepend w50">
<span>$</span>
<input type="text">
</div>
</div>
</form>
<form method="post" action="" class="form">
<div class="form-item">
<label>It is much how?</label>
<div class="append">
<input type="text"><span>$</span>
</div>
</div>
</form>
Button Append
Appending works for buttons as well. Here you can see a button that has been appended and included withing a text input field.
<form method="post" action="" class="form">
<div class="form-item">
<label>Label</label>
<div class="append w50">
<input type="text" name="search" placeholder="Search">
<button class="button outline">Go</button>
</div>
</div>
</form>
More Examples
The examples below are quite self explanatory and they cover multiple selections, selecting dates, filling in phone numbers, a ready feedback form template and more. Feel free to use any of these examples as templates for your sites.
<form method="post" action="" class="form">
<div class="form-item">
<label>Select multiple</label>
<select class="w50" multiple="multiple" size="10">
<optgroup label="Group 1">
<option value="">...</option>
</optgroup>
</select>
</div>
</form>
<form method="post" action="" class="form">
<label>Choose date</label>
<div class="row gutters">
<div class="col col-3">
<div class="form-item">
<select><option>---</option></select>
<div class="desc">Month</div>
</div>
</div>
<div class="col col-3">
<div class="form-item">
<select><option>---</option></select>
<div class="desc">Day</div>
</div>
</div>
<div class="col col-6">
<div class="form-item">
<select><option>---</option></select>
<div class="desc">Year</div>
</div>
</div>
</div>
</form>
<form method="post" action="" class="form form-inline">
<div class="form-item">
<label>Phone number</label>
( <input type="text" name="phone-prefix" size="3" class="small"> )
<input type="text" name="phone-number" class="small w50">
ext: <input type="text" name="phone-ext" size="3" class="small">
<div class="desc">...</div>
</div>
</form>
<form method="post" class="form">
<div class="row gutters">
<div class="col col-6">
<div class="form-item">
<label>Email</label>
<input type="email">
</div>
</div>
<div class="col col-6">
<div class="form-item">
<label>Topic</label>
<select>
<option value="">...</option>
</select>
</div>
</div>
</div>
<div class="form-item">
<label>Message</label>
<textarea rows="6"></textarea>
</div>
</form>
<form method="post" action="" class="form">
<div class="row gutters">
<div class="col col-6">
<div class="form-item">
<label>Country</label>
<select>
<option>---</option>
</select>
<div class="desc">...</div>
</div>
</div>
<div class="col col-6">
<div class="form-item">
<label><br></label>
<button>Submit</button>
</div>
</div>
</div>
</form>
<form method="post" action="" class="form">
<div class="form-item">
<label>Text</label>
<textarea rows="4"></textarea>
</div>
</form>
<form method="post" action="" class="form">
<div class="form-item">
<label>Text</label>
<textarea rows="4" class="w50"></textarea>
</div>
</form>