Form

Basic form

Example

<form method="post" action="/">
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" placeholder="Name">
    </div>
    <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" name="email" id="email" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="language">Place</label>
        <select name="places" id="places">
            <option value="Sundstorget">Sundstorget</option>
            <option value="Stortorget">Stortorget</option>
            <option value="Gustav Adolfs torg">Gustav Adolfs torg</option>
            <option value="Hamntorget">Hamntorget</option>
            <option value="Kungstorget">Kungstorget</option>
            <option value="Henry Dunkers plats">Henry Dunkers plats</option>
        </select>
    </div>
    <div class="form-group">
        <input type="submit" class="btn btn-primary" value="Send">
    </div>
</form>
Source file: ~/source/sass/component/form/general.scss
View source on GitHub

Horizontal form

A basic horizontal form

Example

<form method="post" action="/" class="form-horizontal">
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" placeholder="Name">
    </div>
    <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" name="email" id="email" placeholder="Email">
    </div>
    <div class="form-group">
        <input type="submit" class="btn btn-primary" value="Send">
    </div>
</form>
Source file: ~/source/sass/component/form/general.scss
View source on GitHub

Input group

Grouped input combination. Use .input-group-addon to append text or use .input-group-addon-btn to append buttons.

Example

<div class="input-group">
    <span class="input-group-addon"><i class="fa fa-user"></i></span>
    <input type="text" name="keyword" class="form-control">
    <span class="input-group-addon-btn">
        <input type="submit" class="btn btn-primary" value="Send">
    </span>
</div>
Source file: ~/source/sass/component/form/input-group.scss
View source on GitHub

Inputs

Input fields

Example

<div class="form-group">
    <label for="firstname">First name</label>
    <input type="text" name="firstname" id="firstname" placeholder="First name">
</div>
<div class="form-group">
    <label for="disabledInput">Disabled input</label>
    <input type="text" name="disabledInput" id="disabledInput" placeholder="Disabled input[text]" disabled>
</div>
<div class="form-group">
    <label for="textarea">Textarea</label>
    <textarea id="textarea"></textarea>
</div>
Source file: ~/source/sass/component/form/input.scss
View source on GitHub

Checkboxes and radiobuttons

Example

<div class="form-group">
    <label class="checkbox">
        <input type="checkbox"> Check me
    </label>
    <label class="checkbox disabled">
        <input type="checkbox" disabled> But you can't check me
    </label>
</div>
<div class="form-group">
    <label class="radio">
        <input type="radio" name="radio"> Alternative 1
    </label>
    <label class="radio">
        <input type="radio" name="radio"> Alternative 2
    </label>
</div>
Source file: ~/source/sass/component/form/input.scss
View source on GitHub

Select

Select field. Single and multiple choises.

Example

<select name="places" id="places">
    <option value="Sundstorget">Sundstorget</option>
    <option value="Stortorget">Stortorget</option>
    <option value="Gustav Adolfs torg">Gustav Adolfs torg</option>
    <option value="Hamntorget">Hamntorget</option>
    <option value="Kungstorget">Kungstorget</option>
    <option value="Henry Dunkers plats">Henry Dunkers plats</option>
</select>
<select name="places" id="places" disabled>
    <option value="Sundstorget">Sundstorget</option>
    <option value="Stortorget">Stortorget</option>
    <option value="Gustav Adolfs torg">Gustav Adolfs torg</option>
    <option value="Hamntorget">Hamntorget</option>
    <option value="Kungstorget">Kungstorget</option>
    <option value="Henry Dunkers plats">Henry Dunkers plats</option>
</select>
<select name="places" id="places" multiple>
    <option value="Sundstorget">Sundstorget</option>
    <option value="Stortorget">Stortorget</option>
    <option value="Gustav Adolfs torg">Gustav Adolfs torg</option>
    <option value="Hamntorget">Hamntorget</option>
    <option value="Kungstorget">Kungstorget</option>
    <option value="Henry Dunkers plats">Henry Dunkers plats</option>
</select>
Source file: ~/source/sass/component/form/select.scss
View source on GitHub