Form - Basic Inputs

One of the most complete bootstrap admin templates!

Toggle Code!
Talk to us Settings

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

<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

<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

This is static text in form.


<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

<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

<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
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
This is help text with success state.
This is help text with warning 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
(success)
(warning)
(error)
@
(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
(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

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

Useful Sidebar

Code for help is added within the main page. Check for code below the example.

You can use this sidebar to help your end-users. You can enter any HTML in this sidebar.

This sidebar can be a 'fixed to top' or you can unpin it to scroll with main page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.