BootStrap2学习日记12---注册表单

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_30239339

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量111

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/keiling/p/3638368.html

本文介绍了如何使用Bootstrap实现表单设计，通过添加分组元素，使得表单布局更加清晰。详细展示了表单中用户名和密码输入框的创建过程，并说明了如何利用`<fieldset>`元素对相关表单项进行分组。

  <form method="" action="" class="form-horizontal">
  <frameset>
    <div class="control-group">
      <label class="control-label" for="tb_userName">UserName:</label>
      <div class="controls">
        <input id="tb_userName" placeholder="Please input your user name." type="text" />
        <p class="help-block">Please enter a user name you want to register.</p>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="tb_password">Password:</label>
      <div class="controls">
        <input id="tb_password" placeholder="Please input your password." type="text" />
        <p class="help-block">Please enter a password you want to register.</p>
      </div>
    </div>
    </frameset>
    <div class="form-actions">
        <button type="submit" class="btn btn-primary">submit</button>
    </div>
  </form>

先看Bootstrap下表单的效果

添加一些分组元素后代码如下:

  <form method="" action="" class="form-horizontal">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="tb_userName">UserName:</label>
      <div class="controls">
        <input id="tb_userName" placeholder="Please input your user name." type="text" />
        <p class="help-block">Please enter a user name you want to register.</p>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="tb_password">Password:</label>
      <div class="controls">
        <input id="tb_password" placeholder="Please input your password." type="text" />
        <p class="help-block">Please enter a password you want to register.</p>
      </div>
    </div>
    </fieldset>
    <div class="form-actions">
        <button type="submit" class="btn btn-primary">submit</button>
    </div>
  </form>