---
title: Form Basics
layout: nested-component.html
---
<h1 class="docs--page-header">
    Input Basics
</h1>

<p class="docs--page-description">
    Before going into details with individual form components, lets just sumarize the different "layouts" available.
</p>

<h2 class="docs--section-header">
    Vertical
</h2>
<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputSelect">Select</label>
        <select class="form-control" id="exampleInputSelect" placeholder="Select something">
            <option value="1">Value 1</option>
            <option value="2">Value 2</option>
            <option value="3">Value 3</option>
            <option value="4">Value 4</option>
            <option value="5">Value 5</option>
            <option value="6">Value 6</option>
            <option value="7">Value 7</option>
            <option value="8">Value 8</option>
            <option value="9">Value 9</option>
            <option value="10">Value 10</option>
        </select>
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <div class="form-group">
        <label for="exampleSelect">Value type</label>
        <div class="}}">
            <select id="exampleSelect" class="form-control" readonly="readonly" name="value_type">
                <option value="amount" selected="selected">Option 1</option>
                <option value="percentage">Option 2</option>
            </select>
        </div>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

<h2 class="docs--section-header">
    Horizontal
</h2>
<form class="form-horizontal">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <label for="exampleInputSelectB" class="col-sm-2 control-label">Select</label>
        <div class="col-sm-10">
            <select class="form-control" id="exampleInputSelectB" placeholder="Select something">
                <option value="1">Value 1</option>
                <option value="2">Value 2</option>
                <option value="3">Value 3</option>
                <option value="4">Value 4</option>
                <option value="5">Value 5</option>
                <option value="6">Value 6</option>
                <option value="7">Value 7</option>
                <option value="8">Value 8</option>
                <option value="9">Value 9</option>
                <option value="10">Value 10</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
        </div>
    </div>
</form>

<h2 class="docs--section-header">
    Inline
</h2>
<form class="form-inline">
    <div class="form-group">
        <label for="exampleInputName2">Name</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail2">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
    </div>
    <button type="submit" class="btn btn-default">Send invitation</button>
</form>