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> 

code produces following form


Comments

Popular posts from this blog

javascript - How to get current YouTube IDs via iMacros? -

c# - Maintaining a program folder in program files out of date? -

emulation - Android map show my location didn't work -