Form of bootstrap css style and bootstrapcss Style

Form of bootstrap css style and bootstrapcss Style

The examples in this article share the code of the bootstrap form for your reference. The details are as follows:

1. Basic Form usage

<form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label>  <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button></form>

2. inline form

Add a. form-inline class to the form element to align its content left and display it as an inline-block-level control. It is only applicable when the viewport is at least PX width (the form is folded if the width of the view is smaller ).
Be sure to add a label

If you do not set a label for each input control, the screen reader will not be able to recognize it correctly. For these inline forms, you can hide them by setting. sr-only for the label class.

<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <div class="input-group">  <div class="input-group-addon">@</div>  <input class="form-control" type="email" placeholder="Enter email"> </div> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label>  <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button></form>

3. Horizontally arranged forms

By adding the. form-horizontal class to the form and using the grid class preset by Bootstrap, You Can horizontally layout the label and control group. In this way, the behavior of. form-group will be changed to row in the raster system, so no additional. row is required.

<form class="form-horizontal" role="form"> <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-default">Sign in</button> </div> </div></form>

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.