html - Difference between input-group and form-group -
what difference in use between tags <input-group>
, <form-group>
?
input groups extended form controls. using input groups can prepend , append text or buttons text-based inputs. example, can add $ symbol, @ twitter username, or else required.
form groups used wrap labels , form controls in div optimum spacing between label , control.
therefore, use both form-group , input-group required. wrap label , input in form-group tag. if of input field required prepended / appended text/button, wrap control input-group. below example, combining both of them. hope helps
<body> <form class="form-horizontal col-md-8" role="form"> <div class="form-group"> <label for="inputfield1" class="col-sm-2 control-label">input 1</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputfield1" placeholder="input 1"> </div> </div> <div class="form-group"> <label for="inputfield2" class="col-sm-2 control-label">input 2</label> <div class="controls"> <div class="input-group col-sm-10"> <input type="text" class="form-control" id="inputfield2" placeholder="input 2"> <span class="input-group-addon">.00</span> </div> </div> </div> <div class="form-group"> <label for="inputfield3" class="col-sm-2 control-label">input 3</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputfield3" placeholder="input 3"> </div> </form> </body>
Comments
Post a Comment