输入栏

输入字段-Bootstrap 5和Material Design 2.0表格

输入字段专门指文本输入字段，用于从中获取数据 用户。

基本例子

输入字段的基本示例由指定了 input 元素的 通过此 ID 与 ID 和 label 元素连接的 输入。这两个元素都包装在 .form-outline 类中，该类提供了一种材料 设计外观。


          <div class="form-outline">
            <input type="text" id="form1" class="form-control" />
            <label class="form-label" for="form1">Example label</label>
          </div>

浆纱

使用 .form-control-lg 和 .form-control-sm 。




          <div class="form-outline">
            <input type="text" id="formControlLg" class="form-control form-control-lg" />
            <label class="form-label" for="formControlLg">Form control lg</label>
          </div>

          <div class="form-outline">
            <input type="text" id="formControlDefault" class="form-control" />
            <label class="form-label" for="formControlDefault">Form control default</label>
          </div>

          <div class="form-outline">
            <input type="text" id="formControlSm" class="form-control form-control-sm" />
            <label class="form-label" for="formControlSm">Form control sm</label>
          </div>

残障人士

在输入上添加 disabled 布尔属性，使其外观呈灰色 并删除指针事件。


          <div class="form-outline mb-3" style="width: 22rem">
            <input
              class="form-control"
              id="formControlDisabled"
              type="text"
              placeholder="Disabled input"
              aria-label="disabled input example"
              disabled
            />
            <label class="form-label" for="formControlDisabled">Disabled</label>
          </div>

只读

在输入上添加 readonly 布尔属性，以防止修改 输入的值。只读输入看起来较浅（就像禁用的输入一样），但保留了 标准光标。


          <div class="form-outline">
            <input
              class="form-control"
              id="formControlReadonly"
              type="text"
              placeholder="Readonly input here..."
              aria-label="readonly input example"
              readonly
            />
            <label class="form-label" for="formControlReadonly">Readonly</label>
          </div>

种类

输入类型使您可以指定用户应提供的数据并帮助您进行验证。

Text


            <div class="form-outline">
              <input type="text" id="typeText" class="form-control" />
              <label class="form-label" for="typeText">Text input</label>
            </div>

电子邮件


            <div class="form-outline">
              <input type="email" id="typeEmail" class="form-control" />
              <label class="form-label" for="typeEmail">Email input</label>
            </div>

密码


            <div class="form-outline">
              <input type="password" id="typePassword" class="form-control" />
              <label class="form-label" for="typePassword">Password input</label>
            </div>

数


            <div class="form-outline">
              <input type="number" id="typeNumber" class="form-control" />
              <label class="form-label" for="typeNumber">Number input</label>
            </div>

电话号码


            <div class="form-outline">
              <input type="tel" id="typePhone" class="form-control" />
              <label class="form-label" for="typePhone">Phone number input</label>
            </div>

网址


            <div class="form-outline">
              <input type="url" id="typeURL" class="form-control" />
              <label class="form-label" for="typeURL">URL input</label>
            </div>

文字区


            <div class="form-outline">
              <textarea class="form-control" id="textAreaExample" rows="4"></textarea>
              <label class="form-label" for="textAreaExample">Message</label>
            </div>

文本

可以使用 .form-text 创建块级或内联级表单文本。

将表单文本与表单控件关联
表单文本应使用与其关联的表单控件显式关联。 aria- describeby 属性。这将确保辅助技术，例如 屏幕阅读器-当用户聚焦或进入控件时，将宣布此表单文本。

输入下方的表单文本可以使用 .form-text 设置样式。如果是块级元素 将被使用，添加了一个上边距，以便与上面的输入轻松隔开。

We'll never share your email with anyone else. 

          <div class="form-outline">
            <input
              type="text"
              id="formTextExample1"
              class="form-control"
              aria-describedby="textExample1"
            />
            <label class="form-label" for="formTextExample1">Example label</label>
          </div>
          <div id="textExample1" class="form-text">
            We'll never share your email with anyone else.
          </div>

内联文本可以使用任何典型的内联HTML元素（可以是<span>, <small>, 或其他） .form-text 类。

Must be 8-20 characters long. 

          <div class="row g-3 align-items-center">
            <div class="form-outline col-auto">
              <input
                type="password"
                id="formTextExample2"
                class="form-control"
                aria-describedby="textExample2"
              />
              <label class="form-label" for="formTextExample2">Password</label>
            </div>
            <div class="col-auto">
              <span id="textExample2" class="form-text"> Must be 8-20 characters long. </span>
            </div>
          </div>

黑暗的背景

将输入放置在深色背景上时，在旁边添加 .form-white 类 .form-outline 提供适当的对比。


          <div class="form-outline form-white">
            <input type="text" id="formWhite" class="form-control" />
            <label class="form-label" for="formWhite">Example label</label>
          </div>

更新标签宽度

如果隐藏了任何父窗体，则在显示后，更新输入以重新计算宽度 标签使用以下代码：


          document.querySelectorAll('.form-outline').forEach((formOutline) => { 
            new mdb.Input(formOutline).update();
          });

动态输入初始化

如果输入是动态加载到页面上的，则在显示输入之后，进行初始化 应该按照以下示例执行。


          document.querySelectorAll('.form-outline').forEach((formOutline) => { 
            new mdb.Input(formOutline).init();
          });