菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap 表单


Bootstrap 的默认设置

使用 Bootstrap,文本控件会自动应用一些全局样式。

所有文本 <input>, <textarea>, 和 <select> 元素,类名为 .form-control,宽度为 100%。


Bootstrap 表单布局

Bootstrap 提供三种表单布局:

  • 垂直表单(这是默认的)
  • 水平表单
  • 行内表单

所有三种表单布局的标准规则:

  • 将标签和表单控件包裹在 <div class="form-group"> 中(这是为了最佳间距所必需的)
  • 为所有文本 <input>, <textarea>, 和 <select> 元素添加类名 .form-control

Bootstrap 垂直表单(默认)

下面的示例创建了一个垂直表单,包含两个输入字段、一个复选框和一个提交按钮。

示例

<form action="/action_page.php">
  <div class="form-group">
    <label for="email">电子邮件地址:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">密码:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> 记住我</label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>
自己动手试一试 »


Bootstrap 行内表单

在行内表单中,所有元素都是行内元素,左对齐,并且标签与控件并行。

注意:这只适用于视口宽度至少为 768px 的表单!

行内表单的附加规则:

  • <form> 元素添加类名 .form-inline

下面的示例创建了一个行内表单,包含两个输入字段、一个复选框和一个提交按钮。

示例

<form class="form-inline" action="/action_page.php">
  <div class="form-group">
    <label for="email">电子邮件地址:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">密码:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> 记住我</label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>
自己动手试一试 »

提示: 如果您没有为每个输入包含标签,屏幕阅读器将难以识别您的表单。您可以使用 .sr-only 类来隐藏除屏幕阅读器外的所有设备的标签。

示例

<form class="form-inline" action="/action_page.php">
  <div class="form-group">
    <label class="sr-only" for="email">邮箱地址:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">密码:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> 记住我</label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>
自己动手试一试 »

Bootstrap 水平表单

水平表单意味着标签与输入字段并行(水平)对齐,适用于大屏幕和中等屏幕。在小屏幕(767px 及以下)上,它将转换为垂直表单(标签放置在每个输入字段的上方)。

水平表单的附加规则:

  • <form> 元素添加类名 .form-horizontal
  • 为所有 <label> 元素添加类名 .control-label

提示: 使用 Bootstrap 的预定义网格类来将标签和表单控件组对齐到水平布局中。

下面的示例创建了一个水平表单,包含两个输入字段、一个复选框和一个提交按钮。

示例

<form class="form-horizontal" action="/action_page.php">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">邮箱:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="输入邮箱">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">密码:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="输入密码">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> 记住我</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">提交</button>
    </div>
  </div>
</form>
自己动手试一试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持