Options Admin - Responsive Web Application Kit

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-controlare set to width: 100%;by default. Wrap labels and controls in .form-groupfor optimum spacing.

Vertical Form

<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

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

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

<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

Input with warning

Input with error

Input group with 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

<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>

John Doe

Form - Basic Inputs

Vertical Form

Horizontal Form

Basic Input Fields

Default Input Typeswithout jQuery plugins

Default Input Typeswithout jQuery plugins

Basic Select without jQuery plugins

Validation States without jQuery plugins

With optional icons

Optional icons with hidden `.sr-only`labels

Input with icons

Useful Sidebar

John Doe

John Doe

Form - Basic Inputs

Vertical Form

Horizontal Form

Basic Input Fields

Default Input Typeswithout jQuery plugins

Default Input Typeswithout jQuery plugins

Basic Select without jQuery plugins

Validation States without jQuery plugins

With optional icons

Optional icons with hidden .sr-onlylabels

Input with icons

Useful Sidebar

Optional icons with hidden `.sr-only`labels