html – input-group和form-group之间的区别

前端之家收集整理的这篇文章主要介绍了html – input-group和form-group之间的区别前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
标签< input-group>之间的区别是什么?和< form-group>?

解决方法

输入组是扩展的表单控件.使用输入组您可以轻松地将文本或按钮附加到基于文本的输入.例如,您可以为Twitter用户名添加$符号@,或者根据需要添加其他任何内容.

表单组用于在div中包装标签和表单控件,以获得标签和控件之间的最佳间距.

因此,根据需要同时使用表单组和输入组.将标签和输入包装在表单组标签中.如果您的任何输入字段需要添加/附加文本/按钮,请使用input-group包装控件.以下是这两个例子.希望这可以帮助

  1. <body>
  2. <form class="form-horizontal col-md-8" role="form">
  3. <div class="form-group">
  4. <label for="inputfield1" class="col-sm-2 control-label">Input 1</label>
  5. <div class="col-sm-10">
  6. <input type="text" class="form-control" id="inputfield1" placeholder="Input 1">
  7. </div>
  8. </div>
  9. <div class="form-group">
  10. <label for="inputfield2" class="col-sm-2 control-label">Input 2</label>
  11. <div class="controls">
  12. <div class="input-group col-sm-10">
  13. <input type="text" class="form-control" id="inputfield2" placeholder="Input 2">
  14. <span class="input-group-addon">.00</span>
  15. </div>
  16. </div>
  17. </div>
  18. <div class="form-group">
  19. <label for="inputfield3" class="col-sm-2 control-label">Input 3</label>
  20. <div class="col-sm-10">
  21. <input type="text" class="form-control" id="inputfield3" placeholder="Input 3">
  22. </div>
  23. </form>
  24. </body>

猜你在找的HTML相关文章