Bootstrap3 Form
Form
Steps
- Use form-group
- Add control-label to label tag
- Add form-control to input
- Add form-control-static to text(p tag etc…)
- Wrap radio class in radio button label
- Add help-block to explanation
- Add btn class to button
Change size of control
- small input-sm
- large input-lg
Example
<h1>Quick Form</h1> <div class="container"> <p>Fill in</p> <from method="post" action=""> <div class="form-group"> <label for="title" class="control-label">Title</label> <input type="text" name="title" id="title" placeholder="Input title" class="form-control input-lg"> </div> <div class="form-group"> <label for="name" class="control-label">Name</label> <input type="text" name="name" id="name" placeholder="Input name" class="form-control"> </div> <div class="form-group"> <label for="date" class="control-label">Date</label> <p class="form-control-static">2014/08/17</p> <input type="hidden" name="date" value="2014-08-17"> </div> <div class="form-group"> <label for="email" class="control-label">Mail Address</label> <input type="text" name="email" id="email" placeholder="Fill mail address" class="form-control"><br> </div> <div class="form-group"> <p class="control-label"><strong>Sex</strong></p> <div class="radio"> <input type="radio" value="1" name="gender" id="man"> <label for="man">Man</label> </div> <div class="radio"> <input type="radio" value="2" name="gender" id="woman"> <label for="woman">Woman</label> </div> </div> <div class="form-group"> <p class="control-label"><strong>OS</strong></p> <div class="checkbox"> <input type="checkbox" value="windows" name="os" id="os_windows"> <label for="os_windows">Windows</label> </div> <div class="checkbox"> <input type="checkbox" value="macos" name="os" id="os_macos"> <label for="os_windows">Mac</label> </div> <div class="checkbox"> <input type="checkbox" value="android" name="os" id="os_android"> <label for="os_windows">Android</label> </div> <div class="checkbox"> <input type="checkbox" value="ios" name="os" id="os_ios"> <label for="os_windows">iOS</label> </div> </div> <div class="form-group"> <p class="control-label input-sm"><strong>Age</strong></p> <select name="age" id="age" class="form-control"> <option value="10">10s'</option> <option value="20">20s'</option> <option value="30">30s'</option> <option value="40">40s'</option> <option value="50">50s'</option> <option value="60">Over 60</option> </select> </div> <div class="form-group"> <label for="body" class="control-label">Comment</label> <textarea name="body" id="body" cols="40" rows="5" placeholder="Write comment" class="form-control"></textarea> <p class="help-block">Max 1000 characters</p> </div> <input type="submit" value="Send" class="btn btn-primary"> <input type="reset" value="cancel" class="btn btn-default"> </form> </div>
Horizontal
Add form-holizontal to form tag class
Example
<h1>Quick Form</h1> <div class="container"> <p>Fill in</p> <from method="post" action="" class="form-holizontal"> <div class="form-group"> <label for="title" class="control-label col-sm-4">Title</label> <div class="col-sm-8"> <input type="text" name="title" id="title" placeholder="Input title" class="form-control input-lg"> </div> </div> <div class="form-group"> <label for="name" class="control-label col-sm-4">Name</label> <div class="col-sm-8"> <input type="text" name="name" id="name" placeholder="Input name" class="form-control"> </div> </div> <div class="form-group"> <label for="date" class="control-label col-sm-4">Date</label> <div class="col-sm-8"> <p class="form-control-static">2014/08/17</p> <input type="hidden" name="date" value="2014-08-17"> </div> </div> <div class="form-group"> <label for="email" class="control-label col-sm-4">Mail Address</label> <div class="col-sm-8"> <input type="text" name="email" id="email" placeholder="Fill mail address" class="form-control"><br> </div> </div> <div class="form-group"> <p class="control-label col-sm-4"><strong>Sex</strong></p> <div class="col-sm-8"> <div class="radio"> <input type="radio" value="1" name="gender" id="man"> <label for="man">Man</label> </div> <div class="radio"> <input type="radio" value="2" name="gender" id="woman"> <label for="woman">Woman</label> </div> </div> </div> <div class="form-group"> <p class="control-label col-sm-4"><strong>OS</strong></p> <div class="col-sm-8"> <div class="checkbox"> <input type="checkbox" value="windows" name="os" id="os_windows"> <label for="os_windows">Windows</label> </div> <div class="checkbox"> <input type="checkbox" value="macos" name="os" id="os_macos"> <label for="os_windows">Mac</label> </div> <div class="checkbox"> <input type="checkbox" value="android" name="os" id="os_android"> <label for="os_windows">Android</label> </div> <div class="checkbox"> <input type="checkbox" value="ios" name="os" id="os_ios"> <label for="os_windows">iOS</label> </div> </div> </div> <div class="form-group"> <p class="control-label col-sm-4"><strong>Age</strong></p> <div class="col-sm-8"> <select name="age" id="age" class="form-control"> <option value="10">10s'</option> <option value="20">20s'</option> <option value="30">30s'</option> <option value="40">40s'</option> <option value="50">50s'</option> <option value="60">Over 60</option> </select> </div> </div> <div class="form-group"> <label for="body" class="control-label col-sm-4">Comment</label> <div class="col-sm-8"> <textarea name="body" id="body" cols="40" rows="5" placeholder="Write comment" class="form-control"></textarea> <p class="help-block">Max 1000 characters</p> </div> </div> <div class="text-center"> <input type="submit" value="Send" class="btn btn-primary"> <input type="reset" value="cancel" class="btn btn-default"> </div> </form> </div>
Inline form
<div class="container"> <form action="" class="form-inline text-right"> <div class="form-group"> <label class="control-label sr-only">User name</label> <input type="text" name="username" placeholder="User name" class="form-control input-sm"> </div> <div class="form-group"> <label class="control-label sr-only">Password</label> <input type="password" name="password" placeholder="password" class="form-control input-sm"> </div> <input type="submit" class="btn btn-default" value="signin"> </form> <h1>Contents title</h1> <p>Contents</p> </div>
Button
Button and link
Show link as button btn-link
Show button as link btn
<from action=""> <a href="index.html" class="btn btn-default">Button(Link)</a><br> <button class="btn-link">Link(Button)</button> </form>
Alert
Crete box for alert
- alert-success
- alert-info
- alert-warning
- alert-danger
<div class="alert alert-danger">Error : title is blank</div> <div class="alert alert-warning">Warning : not set sex</div>
With close button
<div class="alert alert-danger alert-dismissable"> <button class="close" data-dismiss="alert" aria-hidden="true">×</button> Error : <a herf="#titleline" class="alert-link">title</a> is blank </div>
Add error to element
control-label is required
- has-success
- has-warning
- has-error
<div class="form-group has-error"> <a name="titleline"></a><label for="title" class="control-label col-sm-4">Title</label> <div class="col-sm-8"> <input type="text" name="title" id="title" placeholder="Input title" class="form-control input-lg"> </div> </div>
Email Input
Use input-group-addon
<div class="input-group"> <span class="input-group-addon"><input type="checkbox" name="regist"></span> <input type="text" name="username" class="form-control" size="8"> <span class="input-group-addon">@</span> <input type="text" name="domain" class="form-control"> <span class="input-group-btn"> <input type="submit" value="Register" class="btn btn-primary"> </span> </div>
Group size
- btn-group-xs
- btn-group-sm
- btn-group-lg