## Form - Basic Inputs

One of the most complete bootstrap admin templates!

Toggle Code!

Individual form controls automatically receive some global styling. All textual `<input>`, `<textarea>`, and `<select>` elements with `.form-control` are set to `width: 100%;` by default. Wrap labels and controls in `.form-group` for optimum spacing.

##### Vertical Form

Email address
Password
Check me out

    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" autofocus="">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> Check me out
            </label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>

##### Horizontal Form

Email
Password
Remember me

    <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">
            <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-primary">Sign in</button>
            </div>
        </div>
    </form>

##### Basic Input Fields

Default Input
Password
Without Placeholder
Read Only Field
Disabled Field
Predefined Value
Default Select
Maximum Characters
Autocomplete Off
Static Text

This is static text in form.

Textarea

    <form class="form-horizontal">
        <div class="form-group">
            <label for="default" class="col-sm-2 control-label">Default Input</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="default" placeholder="Default Input Text">
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="password" placeholder="Password">
            </div>
        </div>
        <div class="form-group">
            <label for="text" class="col-sm-2 control-label">Without Placeholder</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="text" >
            </div>
        </div>
        <div class="form-group">
            <label for="readonly" class="col-sm-2 control-label">Read Only Field</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="readonly" placeholder="Read Only Field" readonly="">
            </div>
        </div>
        <div class="form-group">
            <label for="disabled" class="col-sm-2 control-label">Disabled Field</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="disabled" placeholder="Disabled Field" disabled="">
            </div>
        </div>
        <div class="form-group">
            <label for="predefined" class="col-sm-2 control-label">Predefined Value</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="predefined" placeholder="Predefined Value" value="You can set this value">
            </div>
        </div>
        <div class="form-group">
            <label for="predefined" class="col-sm-2 control-label">Default Select</label>
            <div class="col-sm-10">
                <select class="form-control">
                    <option>Default Select</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="maximum" class="col-sm-2 control-label">Maximum Characters</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="maximum" placeholder="You can enter maximum 5 characters" maxlength="5">
            </div>
        </div>
        <div class="form-group">
            <label for="autocomplete" class="col-sm-2 control-label">Autocomplete Off</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="autocomplete" placeholder="Autocomplete Off" autocomplete="off">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Static Text</label>
            <div class="col-sm-10">
                <p class="form-control-static" id="static">This is static text in form.</p>
            </div>
        </div>
        <div class="form-group">
            <label for="textarea" class="col-sm-2 control-label">Textarea</label>
            <div class="col-sm-10">
                <textarea class="form-control" id="textarea" placeholder="Default Textarea" rows="5"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </form>

##### Default Input Typeswithout jQuery plugins

Text
Email
Password
Date
Datetime
Color

    <form class="form-horizontal">
        <div class="form-group">
            <label for="text1" class="col-sm-2 control-label">Text</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="text1" placeholder="Input type text">
            </div>
        </div>
        <div class="form-group">
            <label for="email2" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="email2" placeholder="Input type Email">
            </div>
        </div>
        <div class="form-group">
            <label for="pass1" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="pass1" placeholder="Input type password">
            </div>
        </div>
        <div class="form-group">
            <label for="date" class="col-sm-2 control-label">Date</label>
            <div class="col-sm-10">
                <input type="date" class="form-control" id="date">
            </div>
        </div>
        <div class="form-group">
            <label for="datetimelocal" class="col-sm-2 control-label">Datetime</label>
            <div class="col-sm-10">
                <input type="datetime-local" class="form-control" id="datetimelocal">
            </div>
        </div>
        <div class="form-group">
            <label for="color" class="col-sm-2 control-label">Color</label>
            <div class="col-sm-10">
                <input type="color" class="form-control" id="color">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </form>

##### Default Input Typeswithout jQuery plugins

Month
Time
Week
Number
URL
Search

    <form class="form-horizontal">
        <div class="form-group">
            <label for="month" class="col-sm-2 control-label">Month</label>
            <div class="col-sm-10">
                <input type="month" class="form-control" id="month">
            </div>
        </div>
        <div class="form-group">
            <label for="time" class="col-sm-2 control-label">Time</label>
            <div class="col-sm-10">
                <input type="time" class="form-control" id="time">
            </div>
        </div>
        <div class="form-group">
            <label for="week" class="col-sm-2 control-label">Week</label>
            <div class="col-sm-10">
                <input type="week" class="form-control" id="week">
            </div>
        </div>
        <div class="form-group">
            <label for="number" class="col-sm-2 control-label">Number</label>
            <div class="col-sm-10">
                <input type="number" class="form-control" id="number" placeholder="Input type number">
            </div>
        </div>
        <div class="form-group">
            <label for="url" class="col-sm-2 control-label">URL</label>
            <div class="col-sm-10">
                <input type="url" class="form-control" id="url" placeholder="http://www.google.com">
            </div>
        </div>
        <div class="form-group">
            <label for="search" class="col-sm-2 control-label">Search</label>
            <div class="col-sm-10">
                <input type="search" class="form-control" id="search" placeholder="Input type search">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </form>

##### Basic Select without jQuery plugins

Default Select
Default Multi-Select
Use ctrl / command key on keyboard to select multiple options.

    <form class="form-horizontal">
        <div class="form-group">
            <label for="predefined" class="col-sm-2 control-label">Default Select</label>
            <div class="col-sm-10">
                <select class="form-control">
                    <option>Default Select</option>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                    <option>Option 4</option>
                    <option>Option 5</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="predefined" class="col-sm-2 control-label">Default Multi-Select</label>
            <div class="col-sm-10">
                <select multiple class="form-control" aria-describedby="helpBlock">
                    <option>Default Multi-Select</option>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                    <option>Option 4</option>
                    <option>Option 5</option>
                    <option>Option 6</option>
                    <option>Option 7</option>
                    <option>Option 8</option>
                </select>
                <span id="helpBlock" class="help-block">Use ctrl / command key on keyboard to select multiple options.</span>
            </div>
        </div>
    </form>

##### Validation States without jQuery plugins

Input with success state
This is help text with success state.
Input with warning state
This is help text with warning state.
Input with error state
This is help text with error state.

    <form class="">
        <div class="form-group has-success">
            <label for="success" class="control-label">Input with success state</label>
            <div class="">
                <input type="text" class="form-control" id="success">
                <span class="help-block">This is help text with success state.</span>
            </div>
        </div>
        <div class="form-group has-warning">
            <label for="warning" class="control-label">Input with warning state</label>
            <div class="">
                <input type="text" class="form-control" id="warning">
                <span class="help-block">This is help text with warning state.</span>
            </div>
        </div>
        <div class="form-group has-error">
            <label for="error" class="control-label">Input with error state</label>
            <div class="">
                <input type="text" class="form-control" id="error">
                <span class="help-block">This is help text with error state.</span>
            </div>
        </div>
    </form>

##### With optional icons

Input with success (success)
Input with warning (warning)
Input with error (error)
Input group with success
@
(success)

    <form class="">
        <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" aria-describedby="inputSuccess2Status">
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            <span id="inputSuccess2Status" class="sr-only">(success)</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" aria-describedby="inputWarning2Status">
            <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
            <span id="inputWarning2Status" class="sr-only">(warning)</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" aria-describedby="inputError2Status">
            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
            <span id="inputError2Status" class="sr-only">(error)</span>
        </div>
        <div class="form-group has-success has-feedback">
            <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
            <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
            </div>
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
        </div>
    </form>

##### Optional icons with hidden `.sr-only` labels

Hidden label (success)
Input group with success
@
(success)

    <form class="">
        <div class="form-group has-success has-feedback">
            <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
            <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            <span id="inputSuccess5Status" class="sr-only">(success)</span>
        </div>
        <div class="form-group has-success has-feedback">
            <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
            <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
            </div>
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
        </div>
    </form>

##### Input with icons

Input icons
Icons on Right

    <form class="form-horizontal">
        <div class="form-group left-icon">
            <label for="leftIcon" class="col-sm-2 control-label">Input icons</label>
            <div class="col-sm-10">
                <span class="glyphicon glyphicon-calendar form-left-icon"></span>
                <input type="text" class="form-control" id="leftIcon" placeholder="Input with left icon">
            </div>
        </div>
        <div class="form-group left-icon">
            <label for="leftIcon2" class="col-sm-2 control-label"></label>
            <div class="col-sm-10">
                <span class="glyphicon glyphicon-envelope form-left-icon icon-lg"></span>
                <input type="text" class="form-control input-lg" id="leftIcon2" placeholder="Left icon + Large input">
            </div>
        </div>
        <div class="form-group left-icon">
            <label for="leftIcon3" class="col-sm-2 control-label"></label>
            <div class="col-sm-10">
                <span class="glyphicon glyphicon-info-sign form-left-icon icon-sm"></span>
                <input type="text" class="form-control input-sm" id="leftIcon3" placeholder="Left icon + Small input">
            </div>
        </div>
        <div class="form-group left-icon">
            <label for="leftIcon4" class="col-sm-2 control-label"></label>
            <div class="col-sm-10">
                <span class="glyphicon glyphicon-comment form-left-icon"></span>
                <textarea class="form-control" id="leftIcon4" placeholder="Textarea" rows="5"></textarea>
            </div>
        </div>

        <div class="form-group has-feedback">
            <label for="rightIcon2" class="col-sm-2 control-label">Icons on Right</label>
            <div class="col-sm-10">
                <input type="text" class="form-control input-lg" id="rightIcon2" placeholder="Right icon + Large input">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
        </div>
        <div class="form-group has-feedback">
            <label for="rightIcon" class="col-sm-2 control-label"></label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="rightIcon" placeholder="Input with right icon">
                <span class="glyphicon glyphicon-calendar form-control-feedback"></span>
            </div>
        </div>
        <div class="form-group has-feedback">
            <label for="rightIcon3" class="col-sm-2 control-label"></label>
            <div class="col-sm-10">
                <input type="text" class="form-control input-sm" id="rightIcon3" placeholder="Right icon + Small input">
                <span class="glyphicon glyphicon-info-sign form-control-feedback"></span>
            </div>
        </div>
        <div class="form-group has-feedback">
            <label for="rightIcon4" class="col-sm-2 control-label"></label>
            <div class="col-sm-10">
                <textarea class="form-control" id="rightIcon4" placeholder="Textarea with right icon" rows="5"></textarea>
                <span class="glyphicon glyphicon-comment form-control-feedback"></span>
            </div>
        </div>
    </form>