Form Elements

Form elements from this theme have two major styles:

  • default style - presented right in this chapter

  • floating placeholder - presented here

To arrange form elements inline or block you use divided container or default grid.

Input



<input type="text" placeholder="Input placeholder">

Two inline inputs with label, using .div-c.



<div class="div-c inline-2">
    <div class="divided-column">
        <label>Input 01</label>
        <input type="text" placeholder="">
    </div>
    <div class="divided-column">
        <label>Input 02</label>
        <input type="text" placeholder="">
    </div>
</div>

Textarea



<textarea  cols="30" rows="5" placeholder="Textarea placeholder"></textarea>

Three textarea elements with label, using .div-c .



<div class="div-c inline-3">
    <div class="divided-column">
        <label>Textarea 01</label>
        <textarea  cols="20" rows="5" placeholder="Textarea placeholder"></textarea>
    </div>
    <div class="divided-column">
        <label>Textarea 02</label>
        <textarea  cols="20" rows="5" placeholder="Textarea placeholder"></textarea>
    </div>
    <div class="divided-column">
        <label>Textarea 03</label>
        <textarea  cols="20" rows="5" placeholder="Textarea placeholder"></textarea>
    </div>
</div>

Select

Default Select

Select element by default.



<select name="dropdown"  class="">
    <option value="1">Option 01</option>
    <option value="2">Option 02</option>
    <option value="3">Option 03</option>
    <option value="4">Option 04</option>
    <option value="5">Option 05</option>
</select>

Dropdown Select

Select that is changed by .dropdown() JavaScript function has the following structure: 



<select name="dropdown"  class="dropdown">
    <option value="1">Item 01</option>
    <option value="2">Item 02</option>
    <option value="3">Item 03</option>
    <option value="4">Item 04</option>
    <option value="5">Item 05</option>
</select>

Checkbox



<input type="checkbox" id="c01">
<label for="c01">Option One - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>

<input type="checkbox" id="c02">
<label for="c02">Option Two - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>

<input type="checkbox" id="c03">
<label for="c03">Option Three - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>

Two colums with checkboxes and label using .div-c.



<div class="div-c inline-2 one-label">
    <label>Checkbox Inline 2</label>
    <div class="divided-column">
        <input type="checkbox" id="checkbox1">
        <label for="checkbox1">Option One - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
    </div>
    ...
    <div class="divided-column">
        <input type="checkbox" id="checkbox4">
        <label for="checkbox4">Option Four - Lorem ipsum dolor sit amet, consectetur adipiscing elit</label>
    </div>
</div>

Radiobox



<input type="radio" id="radio1" name="radio-group-01">
<label for="radio1">Radio 01 Option</label>

<input type="radio" id="radio2" name="radio-group-01">
<label for="radio2">Radio 02 Option</label>

<input type="radio" id="radio3" name="radio-group-01">
<label for="radio3">Radio 03 Option</label>

Three columns with Radio inputs and labels using .div-c.



 <div class="div-c inline-3 one-label">
    <label>Radio Inline 3</label>
    <div class="divided-column">
        <input type="radio" id="r01" name="rg01">
        <label for="r01">Radio 01 Option</label>
    </div>
    ...
    <div class="divided-column">
        <input type="radio" id="r06" name="rg01">
        <label for="r06">Radio 06 Option</label>
    </div>
</div>

Buttons



<button class="" type="submit">Submit Form</button>

For more details on Buttons please visit Buttons section