bootstrap 基础教程之表单部分实例代码-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章就给大家带来Bootstarp 基础教程之表单部分实例代码。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。大家也可以访问bootstrap教程来获取和学习更多的bootstrap相关视频教程。

bootstrap 表单部分，具体代码如下所示：

<p class="container">
  <form action="#" method="post">
    <fieldset>
      <legend>用户登陆</legend>
      <p class="form-group">
        <label>用户名：</label>
        <input type="text" class="form-control" name="name" placeholder="用户名">
      </p>
      <p class="form-group">
        <label>密码：</label>
        <input type="password" class="form-control" name="pwd" placeholder="密码">
        <!--form-control代表的是占满容器-->
      </p>
      <p class="checkbox">
        <label><input type="checkbox">记住密码</label>
      </p>
      <!--多选框必须这么写 不然会造成选框与文本重叠的问题-->
      <p class="form-group">
        <button type="submit" class="btn btn-default">提交</button>
      </p>
    </fieldset>
  </form>
</p>

inline表单与label隐藏

<p class="container">
  <form action="#" method="post" class="form-inline">
    <!--form-inline让表单横向放置-->
    <fieldset>
      <legend>用户登陆</legend>
      <p class="form-group">
        <label class="sr-only">用户名：</label>
        <!--sr-only让label隐藏-->
        <input type="text" class="form-control" name="name" placeholder="用户名">
      </p>
      <p class="form-group">
        <label>密码：</label>
        <input type="password" class="form-control" name="pwd" placeholder="密码">
        <!--form-control代表的是占满容器-->
      </p>
      <p class="checkbox">
        <label><input type="checkbox">记住密码</label>
      </p>
      <!--多选框必须这么写 不然会造成选框与文本重叠的问题-->
      <p class="form-group">
        <button type="submit" class="btn btn-default">提交</button>
      </p>
    </fieldset>
  </form>
</p>