4 #permalink Forms

4.1 #permalink Text Fields

Example

Example block-level help text here.

<div class="form-group">
    <label class="control-label" for="firstName">First Name</label>
    <input
        type="text"
        class="form-control"
        id="firstName"
        name="firstName"
        placeholder="Enter first name"
        value=""
    >
    <p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group">
    <label class="control-label" for="comment">Comment</label>
   <textarea
        class="form-control"
        id="comment"
        name="comment"
        placeholder="Enter text here...."
    ></textarea>
</div>

4.2 #permalink Select Boxes

Example 
<div class="form-group">
    <label for="title">Title</label>
    <select class="form-control" id="title" name="title">
        <option id="1" value="Mr" selected>Mr</option>
        <option id="2" value="Mrs">Mrs</option>
        <option id="3" value="Ms">Ms</option>
    </select>
</div>

4.3 #permalink Single Checkbox

Example 
<div class="checkbox">
    <label>
        <input
            type="checkbox"
            id="terms"
            name="terms"
        >
        I accept the
        <a href="" title="Terms and Conditions">Terms &amp; Conditions</a>.
    </label>
</div>

4.4 #permalink Multiple Checkboxes (Stacked)

Example 
<div class="checkbox">
    <label>
        <input
            type="checkbox"
            id="terms"
            name="terms"
        >
        I accept the
        <a href="" title="Terms and Conditions">Terms &amp; Conditions</a>.
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox" id="newsletter" name="newsletter">
        I want to receive regular updates via email
    </label>
</div>

4.5 #permalink Multiple Checkboxes (Inline)

Example 
<div class="checkbox-inline">
    <label>
        <input type="checkbox" id="optionA" name="optionA"> Option A
    </label>
</div>
<div class="checkbox-inline">
    <label>
        <input type="checkbox" id="optionB" name="optionB"> Option B
    </label>
</div>

4.6 #permalink Multiple Radio Buttons (Stacked)

Example 
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option one is this and that&mdash;be sure to include why it's great
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
    </label>
</div>

4.7 #permalink Multiple Radio Buttons (Inline)

Example 
<div class="radio-inline">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option one
    </label>
</div>
<div class="radio-inline">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two
    </label>
</div>

4.8 #permalink Input File and Help Block

Example

Example block-level help text here.

<div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile" name="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
</div>

4.9 #permalink Static control

Example

email@example.com

<div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
        <p class="form-control-static">email@example.com</p>
    </div>
</div>

4.10 #permalink Validation

Example

Example block-level help text here.

Example block-level help text here.

Example block-level help text here.

<div class="form-group has-success has-feedback">
     <label class="control-label" for="inputSuccess2">Input with success</label>
     <input type="text" class="form-control" id="inputSuccess2">
     <p class="help-block">Example block-level help text here.</p>
     <span class="icon icon-check form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
     <label class="control-label" for="inputWarning2">Input with warning</label>
     <input type="text" class="form-control" id="inputWarning2">
     <p class="help-block">Example block-level help text here.</p>
     <span class="icon icon-exclamation-circle form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
     <label class="control-label" for="inputError2">Input with error</label>
     <input type="text" class="form-control" id="inputError2">
     <p class="help-block">Example block-level help text here.</p>
     <span class="icon icon-close form-control-feedback"></span>
</div>

4.11 #permalink Form with inline labels

Example 
<form role="form" class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-sm-2" for="firstName">First Name</label>
        <div class="col-sm-10">
            <input
                type="text"
                class="form-control"
                id="firstName"
                name="firstName"
                placeholder="Enter first name"
                value=""
            >
       </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="lastName">Last Name</label>
        <div class="col-sm-10">
            <input
                type="text"
                class="form-control"
                id="lastName"
                name="lastName"
                placeholder="Enter last name"
                value=""
            >
       </div>
    </div>
</form>

4.13 #permalink Upload image, with preview

Placeholder and preview window should be replaced with the uploaded image

Example

Upload image

Upload your image.

<div class="form-group clearfix">
<div class="image-preview">
	<div class="placeholder">
		<p><strong>Upload image</strong></p>
	</div>
</div>
<div class="image-input">
	<label for="exampleInputFile">File input</label>
	<input type="file" id="exampleInputFile" name="exampleInputFile">
	<p class="help-block">Upload your image.</p>
</div>
</div>

4.14 #permalink Multi group input

Used in the guarantee form for a 24 character code

Example
Lookup 
<div class="form-group form-group-postcode">
    <label class="control-label" for="postcode">Postcode</label>
    <div class="input-group">
        <input name="postcode" type="text" class="js-postcode form-control" value="">
        <span class="input-group-btn">
            <a class="js-postcode-get btn btn-primary ladda-button" data-style="slide-down">
                <span class="ladda-label">
                    <div class="icon icon-info-circle"></div>
                    Lookup
                </span>
            </a>
        </span>
    </div>
    <div class="form-group /*collapse*/">
        <select class="js-postcode-output form-control">
            <option>Dummy Address</option>
        </select>
    </div>
</div>

4.14 #permalink Postcode input

Example
Lookup 
<div class="form-group form-group-postcode">
    <label class="control-label" for="postcode">Postcode</label>
    <div class="input-group">
        <input name="postcode" type="text" class="js-postcode form-control" value="">
        <span class="input-group-btn">
            <a class="js-postcode-get btn btn-primary ladda-button" data-style="slide-down">
                <span class="ladda-label">
                    <div class="icon icon-info-circle"></div>
                    Lookup
                </span>
            </a>
        </span>
    </div>
    <div class="form-group /*collapse*/">
        <select class="js-postcode-output form-control">
            <option>Dummy Address</option>
        </select>
    </div>
</div>

4.15 #permalink Fieldset

Example 
<div class="radio-images">
    <label for="roof_pitch_30">
        Quite flat
        <input type="radio" name="roof_pitch" id="roof_pitch_30" value="30" checked>
        <span class="radio-image" style="background-image: url('/img/radio-house.png');"></span>
    </label>
    <label for="roof_pitch_45">
        Standard
        <input type="radio" name="roof_pitch" id="roof_pitch_45" value="45">
        <span class="radio-image radio-image-2" style="background-image: url('/img/radio-house.png');"></span>
    </label>
    <label for="roof_pitch_60">
        Quite steep
        <input type="radio" name="roof_pitch" id="roof_pitch_60" value="60">
        <span class="radio-image radio-image-3" style="background-image: url('/img/radio-house.png');"></span>
    </label>
</div>

4.15 #permalink Radio images

Example 
<div class="radio-images">
    <label for="roof_pitch_30">
        Quite flat
        <input type="radio" name="roof_pitch" id="roof_pitch_30" value="30" checked>
        <span class="radio-image" style="background-image: url('/img/radio-house.png');"></span>
    </label>
    <label for="roof_pitch_45">
        Standard
        <input type="radio" name="roof_pitch" id="roof_pitch_45" value="45">
        <span class="radio-image radio-image-2" style="background-image: url('/img/radio-house.png');"></span>
    </label>
    <label for="roof_pitch_60">
        Quite steep
        <input type="radio" name="roof_pitch" id="roof_pitch_60" value="60">
        <span class="radio-image radio-image-3" style="background-image: url('/img/radio-house.png');"></span>
    </label>
</div>