形式

表格-Bootstrap 5和Material Design 2.0

表单控件样式,布局选项和自定义组件的示例和使用指南 用于创建多种形式。

这是对最基本知识的概述,是一般概述。对于更多 有关特定形式,类型的详细信息,请参阅专用文档 页面。


基本例子

一个简单的登录表单的基本示例,其中包含输入字段(电子邮件和密码),复选框和 提交按钮。

复选框和“忘记密码”链接通过使用2列网格布局而位于行内。

注意:大多数演示示例的固定宽度 演示目的。
包含的代码示例不要具有固定的宽度,因此它们自然会填充 其父元素的完整宽度。
要控制表单的宽度,请将其放置在网格中,请使用大小调整实用程序,或设置 内联宽度。


          <form>
            <!-- Email input -->
            <div class="form-outline mb-4">
              <input type="email" id="form1Example1" class="form-control" />
              <label class="form-label" for="form1Example1">Email address</label>
            </div>

            <!-- Password input -->
            <div class="form-outline mb-4">
              <input type="password" id="form1Example2" class="form-control" />
              <label class="form-label" for="form1Example2">Password</label>
            </div>

            <!-- 2 column grid layout for inline styling -->
            <div class="row mb-4">
              <div class="col d-flex justify-content-center">
                <!-- Checkbox -->
                <div class="form-check">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    value=""
                    id="form1Example3"
                    checked
                  />
                  <label class="form-check-label" for="form1Example3"> Remember me </label>
                </div>
              </div>

              <div class="col">
                <!-- Simple link -->
                <a href="#!">Forgot password?</a>
              </div>
            </div>

            <!-- Submit button -->
            <button type="submit" class="btn btn-primary btn-block">Sign in</button>
          </form>
        

每一组表单字段都应位于 <form> 元件。MDB提供 没有默认样式 <form>元素,但是有一些强大的功能 默认提供的浏览器功能。

  • 浏览器表单的新功能?考虑审查 MDN表单文档 有关可用属性的概述和完整列表。
  • <button>内的 <form> 默认为 type="submit", 因此要努力做到具体,并始终包括 type.
  • 您可以使用以下命令禁用表单中的每个表单元素 disabled的属性 <form>.

由于MDB将 display:block width:100%应用于几乎我们所有 表单控件,默认情况下,表单将垂直堆叠。其他类别可以用来改变 此布局是基于表单的。


例子

登录表单

典型的登录表单,带有附加的注册按钮。

Not a member? Register

or sign up with:


            <form>
              <!-- Email input -->
              <div class="form-outline mb-4">
                <input type="email" id="form2Example1" class="form-control" />
                <label class="form-label" for="form2Example1">Email address</label>
              </div>

              <!-- Password input -->
              <div class="form-outline mb-4">
                <input type="password" id="form2Example2" class="form-control" />
                <label class="form-label" for="form2Example2">Password</label>
              </div>

              <!-- 2 column grid layout for inline styling -->
              <div class="row mb-4">
                <div class="col d-flex justify-content-center">
                  <!-- Checkbox -->
                  <div class="form-check">
                    <input
                      class="form-check-input"
                      type="checkbox"
                      value=""
                      id="form2Example3"
                      checked
                    />
                    <label class="form-check-label" for="form2Example3"> Remember me </label>
                  </div>
                </div>

                <div class="col">
                  <!-- Simple link -->
                  <a href="#!">Forgot password?</a>
                </div>
              </div>

              <!-- Submit button -->
              <button type="submit" class="btn btn-primary btn-block mb-4">Sign in</button>

              <!-- Register buttons -->
              <div class="text-center">
                <p>Not a member? <a href="#!">Register</a></p>
                <p>or sign up with:</p>
                <button type="button" class="btn btn-primary btn-floating mx-1">
                  <i class="fab fa-facebook-f"></i>
                </button>

                <button type="button" class="btn btn-primary btn-floating mx-1">
                  <i class="fab fa-google"></i>
                </button>

                <button type="button" class="btn btn-primary btn-floating mx-1">
                  <i class="fab fa-twitter"></i>
                </button>

                <button type="button" class="btn btn-primary btn-floating mx-1">
                  <i class="fab fa-github"></i>
                </button>
              </div>
            </form>
          

登记表格

典型的寄存器形式带有附加的寄存器按钮。

or sign up with:


            <form>
              <!-- 2 column grid layout with text inputs for the first and last names -->
              <div class="row mb-4">
                <div class="col">
                  <div class="form-outline">
                    <input type="text" id="form3Example1" class="form-control" />
                    <label class="form-label" for="form3Example1">First name</label>
                  </div>
                </div>
                <div class="col">
                  <div class="form-outline">
                    <input type="text" id="form3Example2" class="form-control" />
                    <label class="form-label" for="form3Example2">Last name</label>
                  </div>
                </div>
              </div>

              <!-- Email input -->
              <div class="form-outline mb-4">
                <input type="email" id="form3Example3" class="form-control" />
                <label class="form-label" for="form3Example3">Email address</label>
              </div>

              <!-- Password input -->
              <div class="form-outline mb-4">
                <input type="password" id="form3Example4" class="form-control" />
                <label class="form-label" for="form3Example4">Password</label>
              </div>

              <!-- Checkbox -->
              <div class="form-check d-flex justify-content-center mb-4">
                <input
                  class="form-check-input me-2"
                  type="checkbox"
                  value=""
                  id="form2Example3"
                  checked
                />
                <label class="form-check-label" for="form2Example3">
                  Subscribe to our newsletter
                </label>
              </div>

              <!-- Submit button -->
              <button type="submit" class="btn btn-primary btn-block mb-4">Sign up</button>

              <!-- Register buttons -->
              <div class="text-center">
                <p>or sign up with:</p>
                <button type="button" class="btn btn-primary btn-floating mx-1">
                  <i class="fab fa-facebook-f"></i>
                </button>

                <button type="button" class="btn btn-primary btn-floating mx-1">
                  <i class="fab fa-google"></i>
                </button>

                <button type="button" class="btn btn-primary btn-floating mx-1">
                  <i class="fab fa-twitter"></i>
                </button>

                <button type="button" class="btn btn-primary btn-floating mx-1">
                  <i class="fab fa-github"></i>
                </button>
              </div>
            </form>
          

联系表

典型的联系表单,其中textarea输入为消息字段。


            <form>
              <!-- Name input -->
              <div class="form-outline mb-4">
                <input type="text" id="form4Example1" class="form-control" />
                <label class="form-label" for="form4Example1">Name</label>
              </div>

              <!-- Email input -->
              <div class="form-outline mb-4">
                <input type="email" id="form4Example2" class="form-control" />
                <label class="form-label" for="form4Example2">Email address</label>
              </div>

              <!-- Message input -->
              <div class="form-outline mb-4">
                <textarea class="form-control" id="form4Example3" rows="4"></textarea>
                <label class="form-label" for="form4Example3">Message</label>
              </div>

              <!-- Checkbox -->
              <div class="form-check d-flex justify-content-center mb-4">
                <input
                  class="form-check-input me-2"
                  type="checkbox"
                  value=""
                  id="form4Example4"
                  checked
                />
                <label class="form-check-label" for="form4Example4">
                  Send me a copy of this message
                </label>
              </div>

              <!-- Submit button -->
              <button type="submit" class="btn btn-primary btn-block mb-4">Send</button>
            </form>
          

订阅表格

订阅新闻通讯时使用的典型订阅形式。


            <form>
              <!-- Name input -->
              <div class="form-outline mb-4">
                <input type="text" id="form5Example1" class="form-control" />
                <label class="form-label" for="form5Example1">Name</label>
              </div>

              <!-- Email input -->
              <div class="form-outline mb-4">
                <input type="email" id="form5Example2" class="form-control" />
                <label class="form-label" for="form5Example2">Email address</label>
              </div>

              <!-- Checkbox -->
              <div class="form-check d-flex justify-content-center mb-4">
                <input
                  class="form-check-input me-2"
                  type="checkbox"
                  value=""
                  id="form5Example3"
                  checked
                />
                <label class="form-check-label" for="form5Example3">
                  I have read and agree to the terms
                </label>
              </div>

              <!-- Submit button -->
              <button type="submit" class="btn btn-primary btn-block mb-4">Subscribe</button>
            </form>
          

结帐表格

具有典型结帐输入的扩展形式的示例。


            <form>
              <!-- 2 column grid layout with text inputs for the first and last names -->
              <div class="row mb-4">
                <div class="col">
                  <div class="form-outline">
                    <input type="text" id="form6Example1" class="form-control" />
                    <label class="form-label" for="form6Example1">First name</label>
                  </div>
                </div>
                <div class="col">
                  <div class="form-outline">
                    <input type="text" id="form6Example2" class="form-control" />
                    <label class="form-label" for="form6Example2">Last name</label>
                  </div>
                </div>
              </div>

              <!-- Text input -->
              <div class="form-outline mb-4">
                <input type="text" id="form6Example3" class="form-control" />
                <label class="form-label" for="form6Example3">Company name</label>
              </div>

              <!-- Text input -->
              <div class="form-outline mb-4">
                <input type="text" id="form6Example4" class="form-control" />
                <label class="form-label" for="form6Example4">Address</label>
              </div>

              <!-- Email input -->
              <div class="form-outline mb-4">
                <input type="email" id="form6Example5" class="form-control" />
                <label class="form-label" for="form6Example5">Email</label>
              </div>

              <!-- Number input -->
              <div class="form-outline mb-4">
                <input type="number" id="form6Example6" class="form-control" />
                <label class="form-label" for="form6Example6">Phone</label>
              </div>

              <!-- Message input -->
              <div class="form-outline mb-4">
                <textarea class="form-control" id="form6Example7" rows="4"></textarea>
                <label class="form-label" for="form6Example7">Additional information</label>
              </div>

              <!-- Checkbox -->
              <div class="form-check d-flex justify-content-center mb-4">
                <input
                  class="form-check-input me-2"
                  type="checkbox"
                  value=""
                  id="form6Example8"
                  checked
                />
                <label class="form-check-label" for="form6Example8"> Create an account? </label>
              </div>

              <!-- Submit button -->
              <button type="submit" class="btn btn-primary btn-block mb-4">Place order</button>
            </form>
          

登录注册

通过使用药片,您可以登录并 将表单注册为一个组件。

Sign in with:

or:

Not a member? Register

Sign up with:

or:


            <!-- Pills navs -->
            <ul class="nav nav-pills nav-justified mb-3" id="ex1" role="tablist">
              <li class="nav-item" role="presentation">
                <a
                  class="nav-link active"
                  id="tab-login"
                  data-mdb-toggle="pill"
                  href="#pills-login"
                  role="tab"
                  aria-controls="pills-login"
                  aria-selected="true"
                  >Login</a
                >
              </li>
              <li class="nav-item" role="presentation">
                <a
                  class="nav-link"
                  id="tab-register"
                  data-mdb-toggle="pill"
                  href="#pills-register"
                  role="tab"
                  aria-controls="pills-register"
                  aria-selected="false"
                  >Register</a
                >
              </li>
            </ul>
            <!-- Pills navs -->

            <!-- Pills content -->
            <div class="tab-content">
              <div
                class="tab-pane fade show active"
                id="pills-login"
                role="tabpanel"
                aria-labelledby="tab-login"
              >
                <form>
                  <div class="text-center mb-3">
                    <p>Sign in with:</p>
                    <button type="button" class="btn btn-primary btn-floating mx-1">
                      <i class="fab fa-facebook-f"></i>
                    </button>

                    <button type="button" class="btn btn-primary btn-floating mx-1">
                      <i class="fab fa-google"></i>
                    </button>

                    <button type="button" class="btn btn-primary btn-floating mx-1">
                      <i class="fab fa-twitter"></i>
                    </button>

                    <button type="button" class="btn btn-primary btn-floating mx-1">
                      <i class="fab fa-github"></i>
                    </button>
                  </div>

                  <p class="text-center">or:</p>

                  <!-- Email input -->
                  <div class="form-outline mb-4">
                    <input type="email" id="loginName" class="form-control" />
                    <label class="form-label" for="loginName">Email or username</label>
                  </div>

                  <!-- Password input -->
                  <div class="form-outline mb-4">
                    <input type="password" id="loginPassword" class="form-control" />
                    <label class="form-label" for="loginPassword">Password</label>
                  </div>

                  <!-- 2 column grid layout -->
                  <div class="row mb-4">
                    <div class="col-md-6 d-flex justify-content-center">
                      <!-- Checkbox -->
                      <div class="form-check mb-3 mb-md-0">
                        <input
                          class="form-check-input"
                          type="checkbox"
                          value=""
                          id="loginCheck"
                          checked
                        />
                        <label class="form-check-label" for="loginCheck"> Remember me </label>
                      </div>
                    </div>

                    <div class="col-md-6 d-flex justify-content-center">
                      <!-- Simple link -->
                      <a href="#!">Forgot password?</a>
                    </div>
                  </div>

                  <!-- Submit button -->
                  <button type="submit" class="btn btn-primary btn-block mb-4">Sign in</button>

                  <!-- Register buttons -->
                  <div class="text-center">
                    <p>Not a member? <a href="#!">Register</a></p>
                  </div>
                </form>
              </div>
              <div
                class="tab-pane fade"
                id="pills-register"
                role="tabpanel"
                aria-labelledby="tab-register"
              >
                <form>
                  <div class="text-center mb-3">
                    <p>Sign up with:</p>
                    <button type="button" class="btn btn-primary btn-floating mx-1">
                      <i class="fab fa-facebook-f"></i>
                    </button>

                    <button type="button" class="btn btn-primary btn-floating mx-1">
                      <i class="fab fa-google"></i>
                    </button>

                    <button type="button" class="btn btn-primary btn-floating mx-1">
                      <i class="fab fa-twitter"></i>
                    </button>

                    <button type="button" class="btn btn-primary btn-floating mx-1">
                      <i class="fab fa-github"></i>
                    </button>
                  </div>

                  <p class="text-center">or:</p>

                  <!-- Name input -->
                  <div class="form-outline mb-4">
                    <input type="text" id="registerName" class="form-control" />
                    <label class="form-label" for="registerName">Name</label>
                  </div>

                  <!-- Username input -->
                  <div class="form-outline mb-4">
                    <input type="text" id="registerUsername" class="form-control" />
                    <label class="form-label" for="registerUsername">Username</label>
                  </div>

                  <!-- Email input -->
                  <div class="form-outline mb-4">
                    <input type="email" id="registerEmail" class="form-control" />
                    <label class="form-label" for="registerEmail">Email</label>
                  </div>

                  <!-- Password input -->
                  <div class="form-outline mb-4">
                    <input type="password" id="registerPassword" class="form-control" />
                    <label class="form-label" for="registerPassword">Password</label>
                  </div>

                  <!-- Repeat Password input -->
                  <div class="form-outline mb-4">
                    <input type="password" id="registerRepeatPassword" class="form-control" />
                    <label class="form-label" for="registerRepeatPassword">Repeat password</label>
                  </div>

                  <!-- Checkbox -->
                  <div class="form-check d-flex justify-content-center mb-4">
                    <input
                      class="form-check-input me-2"
                      type="checkbox"
                      value=""
                      id="registerCheck"
                      checked
                      aria-describedby="registerCheckHelpText"
                    />
                    <label class="form-check-label" for="registerCheck">
                      I have read and agree to the terms
                    </label>
                  </div>

                  <!-- Submit button -->
                  <button type="submit" class="btn btn-primary btn-block mb-3">Sign in</button>
                </form>
              </div>
            </div>
            <!-- Pills content -->
          

布局

有多种方法可以构造表单并为其提供所需的布局。看一下 以下示例可详细了解表单布局。

实用工具

保证金实用程序是添加的最简单方法 一些结构形式。它们提供标签,控件,可选形式的基本分组 文本和表单验证消息。我们建议坚持 margin-bottom 实用程序,并在整个表单中使用单一方向 一致性。

随心所欲地随意构建表单 <fieldset>s, <div>s,或几乎任何其他元素。

在下面的示例中,我们添加了 .mb-4 类以在两个之间提供适当的边距 输入字段。


            <!-- Name input -->
            <div class="form-outline mb-4">
              <input type="text" id="form7Example1" class="form-control" />
              <label class="form-label" for="form7Example1">Name</label>
            </div>

            <!-- Email input -->
            <div class="form-outline mb-4">
              <input type="email" id="form7Example2" class="form-control" />
              <label class="form-label" for="form7Example2">Email address</label>
            </div>
          

表格网格

可以使用我们的表格构建更复杂的表格 网格类别。将这些用于表格布局 需要多列,变化的宽度以及其他对齐选项。 要求启用 $ enable-grid-classes Sass变量 (默认情况下处于启用状态)。



            <div class="row">
              <div class="col">
                <!-- Name input -->
                <div class="form-outline">
                  <input type="text" id="form8Example1" class="form-control" />
                  <label class="form-label" for="form8Example1">Name</label>
                </div>
              </div>
              <div class="col">
                <!-- Email input -->
                <div class="form-outline">
                  <input type="email" id="form8Example2" class="form-control" />
                  <label class="form-label" for="form8Example2">Email address</label>
                </div>
              </div>
            </div>

            <hr />

            <div class="row">
              <div class="col">
                <!-- Name input -->
                <div class="form-outline">
                  <input type="text" id="form8Example3" class="form-control" />
                  <label class="form-label" for="form8Example3">First name</label>
                </div>
              </div>
              <div class="col">
                <!-- Name input -->
                <div class="form-outline">
                  <input type="text" id="form8Example4" class="form-control" />
                  <label class="form-label" for="form8Example4">Last name</label>
                </div>
              </div>
              <div class="col">
                <!-- Email input -->
                <div class="form-outline">
                  <input type="email" id="form8Example5" class="form-control" />
                  <label class="form-label" for="form8Example5">Email address</label>
                </div>
              </div>
            </div>
          

天沟

通过添加装订线修改器类,您可以控制装订线的宽度 内联作为块方向。 还需要启用 $ enable-grid-classes Sass变量 (默认情况下处于启用状态)。



            <!-- Gutter g-1 -->
            <div class="row g-1">
              <div class="col">
                <!-- Name input -->
                <div class="form-outline">
                  <input type="text" id="form9Example1" class="form-control" />
                  <label class="form-label" for="form9Example1">Name</label>
                </div>
              </div>
              <div class="col">
                <!-- Email input -->
                <div class="form-outline">
                  <input type="email" id="form9Example2" class="form-control" />
                  <label class="form-label" for="form9Example2">Email address</label>
                </div>
              </div>
            </div>

            <hr />

            <!-- Gutter g-5 -->
            <div class="row g-5">
              <div class="col">
                <!-- Name input -->
                <div class="form-outline">
                  <input type="text" id="form9Example3" class="form-control" />
                  <label class="form-label" for="form9Example3">Name</label>
                </div>
              </div>
              <div class="col">
                <!-- Email input -->
                <div class="form-outline">
                  <input type="email" id="form9Example4" class="form-control" />
                  <label class="form-label" for="form9Example4">Email address</label>
                </div>
              </div>
            </div>
          

列大小

如前面的示例所示,我们的网格系统允许您放置任意数量的 .row 中的 .col 。他们将平均分割可用宽度 它们之间。您还可以选择一部分列来占用更多或更少的空间, 而其余的 .col 则使用特定的列类平均分配其余的 例如 .col-sm-7


            <div class="row g-3">
              <div class="col-sm-7">
                <div class="form-outline">
                  <input type="text" id="form10Example1" class="form-control" />
                  <label class="form-label" for="form10Example1">Name</label>
                </div>
              </div>
              <div class="col-sm">
                <div class="form-outline">
                  <input type="text" id="form10Example2" class="form-control" />
                  <label class="form-label" for="form10Example2">Name</label>
                </div>
              </div>
              <div class="col-sm">
                <div class="form-outline">
                  <input type="text" id="form10Example3" class="form-control" />
                  <label class="form-label" for="form10Example3">Name</label>
                </div>
              </div>
            </div>
          

自动调整大小

下面的示例使用flexbox实用工具将内容和更改垂直居中 将 .col 转换为 .col-auto ,以便您的列仅占用尽可能多的空间 如所须。换句话说,该列会根据内容自行调整大小。


            <form class="row gy-2 gx-3 align-items-center">
              <div class="col-auto">
                <div class="form-outline">
                  <input type="text" id="form11Example1" class="form-control" />
                  <label class="form-label" for="form11Example1">Label</label>
                </div>
              </div>
              <div class="col-auto">
                <div class="form-check">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    value=""
                    id="form11Example2"
                    checked
                  />
                  <label class="form-check-label" for="form11Example2"> Checked </label>
                </div>
              </div>
              <div class="col-auto">
                <div class="form-outline">
                  <input type="text" id="form11Example3" class="form-control" />
                  <label class="form-label" for="form11Example3">Label</label>
                </div>
              </div>
              <div class="col-auto">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="form11Example4" checked />
                  <label class="form-check-label" for="form11Example4"
                    >Checked switch checkbox input</label
                  >
                </div>
              </div>
              <div class="col-auto">
                <button type="submit" class="btn btn-primary">Submit</button>
              </div>
            </form>