学习 Bootstrap 5 之 Forms

_ZestyJt

已于 2022-01-29 19:46:21 修改

阅读量2.8k

点赞数 2

分类专栏： Bootstrap 5 文章标签： bootstrap html 前端 javascript css

于 2022-01-22 11:21:11 首次发布

本文链接：https://blog.csdn.net/qq_37354060/article/details/122629745

版权

Bootstrap 5 专栏收录该内容

19 篇文章 10 订阅

订阅专栏

学习 Bootstrap 5 之表单

表单 (Forms)

表单 (Forms)

1. 概览 (Overview)

Bootstrap 5 官方文档

(1). 简单的入门案例

在这里插入图片描述

  <div class = "ms-5 w-50 align-left">
    <form>
      <div class="mb-3">
        <label for="inputEmail" class="form-label">邮件</label>
        <input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp">
        <div id="emailHelp" class="form-text">我们会确保你的隐私</div>
      </div>
      <div class="mb-3">
        <label for="inputPassword" class="form-label">密码</label>
        <input type="password" class="form-control" id="inputPassword">
      </div>
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="inputCheck">
        <label class="form-check-label" for="inputCheck">记住我</label>
      </div>
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>

label标签用于跟input标签一起使用, 当点击label标签的文字时, 会触发input标签, 例如点击"记住我:文字, 则会勾选checkbox, 因为label标签中的for属性的值与input标签的id属性的值是一样的, 所有实现了相互关联, 因此可以实现点击 "记住我"文字, 实现勾选框勾选

上面的代码中, 使用了.form-control等类, 使用这些类后, 会创建Bootstrap样式的控件

(2). 表单文本 (Form text)

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

1). 使用块级元素

在这里插入图片描述

  <div class = "ms-5 w-50">
    <label for="inputPassword" class="form-label">密码</label>
    <input type="password" id="inputPassword" class="form-control" aria-describedby="help">
    <div id="help" class="form-text">
      密码必须包含8-20个字符, 不允许特殊字符和表情
    </div>
    <br />
    <label for="inputPassword1" class="form-label">密码</label>
    <input type="password" id="inputPassword1" class="form-control" aria-describedby="help1">
    <div id="help1">
      密码必须包含8-20个字符, 不允许特殊字符和表情
    </div>
  </div>

2). 使用内联HTML元素

在这里插入图片描述

  <div class = "ms-5 w-50">
    <div class="row g-3 align-items-center">
      <div class="col-auto">
        <label for="inputPassword" class="col-form-label">密码</label>
      </div>
      <div class="col-auto">
        <input type="password" id="inputPassword" class="form-control" aria-describedby="passwordHelpInline">
      </div>
      <div class="col-auto">
        <span id="passwordHelpInline" class="form-text">
          密码必须包含8-20个字符
        </span>
      </div>
    </div>
  </div>

(3). 表单禁用 (Disabled forms)

1). 快捷的禁用方式 disabled

在这里插入图片描述

  <div class = "ms-5 w-50">
    <input class="form-control" type="text" placeholder="表单禁用了" disabled>
    <br />
    <input class="form-control" type="text" placeholder="表单没有被禁用">
  </div>

2). 禁用区域

在<fieldset>标签中添加disabled属性, 禁用区域中所有的控件

在这里插入图片描述

  <div class = "ms-5 w-50">
    <form>
      <fieldset disabled>
        <h2>整个区域都被禁用</h2>
        <div class="mb-3">
          <label for="disabledTextInput" class="form-label">被禁用的输入标签</label>
          <input type="text" id="disabledTextInput" class="form-control" placeholder="输入被禁用了">
        </div>
        <div class="mb-3">
          <label for="disabledSelect" class="form-label">被禁用的选择菜单</label>
          <select id="disabledSelect" class="form-select">
            <option>禁用</option>
          </select>
        </div>
        <div class="mb-3">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
            <label class="form-check-label" for="disabledFieldsetCheck">
              禁用
            </label>
          </div>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
      </fieldset>
    </form>
  </div>

(4). 表单中使用到的类或属性

类或属性	效果
`.form-label`	指明这个控件是一个label标签
`.form-check-input`	用于checkbox
`.form-select`	用于select标签
`.form-control`	给input标签使用一个Bootrstrap提供的样式
placeholder属性	提示信息

2. Bootstrap 5 中的input标签和 textarea标签 (Form controls)

Bootstrap 5 官方文档

给文本的表单控件, 像input系列的标签和textarea系列的标签, 增加一些定制的样式, 大小等

(1). 简单的例子 (Example)

在这里插入图片描述
使用placeholder属性, 可以添加提示信息, 当用户输入时, 提示信息消失

  <div class = "ms-5 w-50">
    <div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
    </div>
    <div class="mb-3">
      <label for="exampleFormControlTextarea1" class="form-label">Textarea</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="text"></textarea>
    </div>
  </div>

(2). 改变输入框和文本域大小 (Sizing)

设置输入框的高度

1). 高 class = “form-control-lg”

2). 默认

3). 小 class=“form-control-sm”

4). 对比

在这里插入图片描述

  <div class = "ms-5 w-50">
    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
    <input class="form-control" type="text" placeholder="默认" >
    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
  </div>

(3). 输入框和文本域禁用 (Disabled)

添加disabled属性, 禁用的输入框里的内容不能复制
在这里插入图片描述

  <div class = "ms-5 w-50">
    <input class="form-control" type="text" placeholder="已禁用" disabled>
  </div>

(4). 输入框和文本域只读 (Readonly)

添加readonly属性
在这里插入图片描述

  <div class = "ms-5 w-50">
    <input class="form-control" type="text" value="可以复制这里的文字, 但是不能输入" readonly>
  </div>

(5). 输入框和文本域纯文本 class=“form-control-plaintext”

使input的输入框使用纯文本样式, 一般跟readonly属性一起使用
在这里插入图片描述

  <div class = "ms-5 w-50">
    <input class="form-control-plaintext" type="text" value="可以复制这里的文字, 但是不能输入" readonly>
  </div>

(6). 上传文件

1). 单文件上传 (默认)

在这里插入图片描述

  <div class = "ms-5 w-50">
    <label for="formFile" class="form-label">单文件上传</label>
    <input class="form-control" type="file" id="formFile">
  </div>

2). 多文件上传 (multiple属性)

添加multiple属性
在这里插入图片描述

  <div class = "ms-5 w-50">
    <div class="mb-3">
      <label for="formFileMultiple" class="form-label">多文件上传</label>
      <input class="form-control" type="file" id="formFileMultiple" multiple>
    </div>
  </div>

(7). 颜色选择器 (Color)

使用.form-control-color类
在这里插入图片描述

  <div class = "ms-5 w-50">
    <label for="exampleColorInput" class="form-label">颜色选择器</label>
    <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
  </div>

(8). 数据列表 (Datalists)

在这里插入图片描述

  <div class = "ms-5 w-50">
    <label for="exampleDataList" class="form-label">账号</label>
    <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="输入要搜索的账号">
    <datalist id="datalistOptions">
      <option value="123456789" />
      <option value="987654321" />
    </datalist>
  </div>

3. Bootstrap 5 中的Select标签 (Select)

Bootstrap 5 官方文档

(1). Bootstrap列表框 class = “form-select”

在这里插入图片描述

<select class = "form-select">
  <option selected>打开菜单</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

(2). 改变列表框大小 (Sizing)

1). 大的 class = “form-select-lg”

2). 小的 class = “form-select-sm”

3). 对比

在这里插入图片描述

  <div class = "ms-5 w-50">
    大的
    <select class="form-select form-select-lg mb-3">
      <option selected>打开菜单</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    小的
    <select class="form-select form-select-sm mb-3" >
      <option selected>打开菜单</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    默认的
    <select class="form-select mb-3" >
      <option selected>打开菜单</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

(3). 列表框多选 (multiple 属性)

在这里插入图片描述

  <div class = "ms-5 w-50">
    <select class="form-select" multiple>
      <option selected>打开菜单</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

(4). 列表框禁用 (disabled 属性)

在这里插入图片描述

  <div class = "ms-5 w-50">
    <select class="form-select" multiple disabled>
      <option selected>打开菜单</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

4. Bootstrap 5 中的复选框和圆形复选框标 (Checks and radios)

Bootstrap 5 官方文档

(1). Bootstrap 复选框 class = “form-check-input”

在这里插入图片描述

    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
      <label class="form-check-label" for="flexCheckDefault">
        复选框
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
      <label class="form-check-label" for="flexCheckChecked">
        被选中的复选框, 因为使用了 checked属性
      </label>
    </div>

选中属性 checked

使用checked属性, 可以让复选框一开始处于选中状态

(2). Bootstrap 圆形复选框 class = “form-check-input”

在这里插入图片描述

  <div class = "ms-5 w-50">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
      <label class="form-check-label" for="flexRadioDefault1">
        圆形复选框
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
      <label class="form-check-label" for="flexRadioDefault2">
        被选中的圆形复选框
      </label>
    </div>
  </div>

实际上, 两种复选框的区别只是 type 不一样

(3). 复选框禁用 (disabled 属性)

在这里插入图片描述

  <div class = "ms-5 w-50">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" disabled>
      <label class="form-check-label" for="flexRadioDefault1">
        圆形复选框
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" disabled>
      <label class="form-check-label" for="flexCheckDefault">
        复选框
      </label>
    </div>
  </div>

5. Bootstrap 5 中的滑动条 (Range)

Bootstrap 5 官方文档

(1). Bootstrap 滑动条 class = “form-range”

在这里插入图片描述

  <div class = "ms-5 w-50">
    <label for="customRange1" class="form-label">滑动条</label>
    <input type="range" class="form-range" id="customRange1">
  </div>

(2). 滑动条禁用 (disabled 属性)

在这里插入图片描述

  <div class = "ms-5 w-50">
    <label for="customRange1" class="form-label">被禁用的滑动条</label>
    <input type="range" class="form-range" id="customRange1" disabled>
  </div>

(3). 设置滑动条最大值和最小值 (Min and max)

默认情况下, 最大值是100, 最小值是0
可以通过min属性和max属性设置, 滑动条会自动根据最大值和最小值的差合理安排滑动条上小圆点的位置

下面的例子是设置0 - 10

在这里插入图片描述

  <div class = "ms-5 w-50">
    <label for="customRange2" class="form-label">0 - 10 滑动条</label>
    <input type="range" class="form-range" min="0" max="10" id="customRange2">
  </div>

(3). 设置滑动条每一步 (Steps)

默认情况下, 会自动计算, 当然也可以指定, 使用step属性
在这里插入图片描述

  <div class = "ms-5 w-50">
    <label for="customRange2" class="form-label">0 - 10 滑动条</label>
    <input type="range" class="form-range" min="0" max="10" step = "2.5" id="customRange2">
  </div>

6. Bootstrap 5 中的用户输入组 (Input group)

Bootstrap 5 官方文档

可以理解为在输入框附近添加一些其他的控件, 简单的说添加了一些修饰, 让用户输入信息的界面更为友好

(1). 官方例子 (Basic example)

在这里插入图片描述

  <div class = "col-6 ms-5">
    <div class="input-group mb-3">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>

    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
      <span class="input-group-text" id="basic-addon2">@example.com</span>
    </div>

    <label for="basic-url" class="form-label">Your vanity URL</label>
    <div class="input-group mb-3">
      <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
      <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
    </div>

    <div class="input-group mb-3">
      <span class="input-group-text">$</span>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
      <span class="input-group-text">.00</span>
    </div>

    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Username" aria-label="Username">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" placeholder="Server" aria-label="Server">
    </div>

    <div class="input-group">
      <span class="input-group-text">With textarea</span>
      <textarea class="form-control" aria-label="With textarea"></textarea>
    </div>
  </div>

(2). 使用

1). 使用方法

将input标签单独放到div标签中, div标签使用.input-group类, 提示的文字信息放到 span标签中, span标签使用.input-group-text类

  <div class = "col-6 ms-5">
    <label for="url" class="form-label">使用Bootstrap 5 输入组</label>
    <div class="input-group mb-3">
      <span class="input-group-text">https://example.com/users/</span>
      <input type="text" class="form-control" id="url" aria-describedby="basic-addon3">
    </div>
  </div>

效果
在这里插入图片描述
span标签就是前面以灰色为背景的文字, 当然也可以放到中间

2). class = “input-group”

单使用.input-group类的效果
在这里插入图片描述

  <div class = "col-6 ms-5">
    <label for="url2" class="form-label">input-group</label>
    <div class="input-group mb-3">
      <span>https://example.com/users/</span>
      <input type="text" class="form-control" id="url2" aria-describedby="basic-addon3">
    </div>
  </div>

3). class = “input-group-text”

单使用.input-group-text类的效果
在这里插入图片描述
结合在一起在能实现在输入框左边且以灰色为背景

  <div class = "col-6 ms-5">
    <label for="url3" class="form-label">input-group-text</label>
    <div class="mb-3">
      <span>https://example.com/users/</span>
      <input type="text" class="input-group-text form-control" id="url3" aria-describedby="basic-addon3">
    </div>
    <br />
  </div>

4). 对比

在这里插入图片描述

  <div class = "col-6 ms-5">
    <label for="url" class="form-label">使用Bootstrap 5 输入组</label>
    <div class="input-group mb-3">
      <span class="input-group-text">https://example.com/users/</span>
      <input type="text" class="form-control" id="url" aria-describedby="basic-addon3">
    </div>
    <br />
    <label for="url1" class="form-label">不适用Bootstrap 5 输入组</label>
    <div class="mb-3">
      <span>https://example.com/users/</span>
      <input type="text" class="form-control" id="url1" aria-describedby="basic-addon3">
    </div>
    <br />
    <label for="url2" class="form-label">input-group</label>
    <div class="input-group mb-3">
      <span>https://example.com/users/</span>
      <input type="text" class="form-control" id="url2" aria-describedby="basic-addon3">
    </div>
    <br />
    <label for="url3" class="form-label">input-group-text</label>
    <div class="mb-3">
      <span>https://example.com/users/</span>
      <input type="text" class="input-group-text form-control" id="url3" aria-describedby="basic-addon3">
    </div>
    <br />
  </div>

(3). 设置输入组元素大小 (Sizing)

1). 小 class = “input-group-sm”

2). 大 class = “input-group-lg”

3). 大小的对比

在这里插入图片描述

  <div class = "col-6 ms-5">
    <div class="input-group input-group-sm mb-3">
      <span class="input-group-text" id="inputGroup-sizing-sm">小</span>
      <input type="text" class="form-control">
    </div>

    <div class="input-group mb-3">
      <span class="input-group-text" id="inputGroup-sizing-default">默认</span>
      <input type="text" class="form-control">
    </div>

    <div class="input-group input-group-lg">
      <span class="input-group-text" id="inputGroup-sizing-lg">大</span>
      <input type="text" class="form-control">
    </div>
  </div>

(4). 输入组中的复选框 (Checkboxes and radios)

注意最好要把复选框的外边距设置为0

1). 普通复选框

在这里插入图片描述

  <div class = "col-6 ms-5">
    <div class="input-group mb-3">
      <div class="input-group-text">
        <input class="form-check-input mt-0" type="checkbox" value="" >
      </div>
      <input type="text" class="form-control" >
    </div>
  </div>

2). 圆形复选框

在这里插入图片描述

  <div class = "col-6 ms-5">
    <div class="input-group">
      <div class="input-group-text">
        <input class="form-check-input mt-0" type="radio" value="" >
      </div>
      <input type="text" class="form-control" >
    </div>
  </div>

3). 两种复选框的对比

在这里插入图片描述

  <div class = "col-6 ms-5">
    <div class="input-group mb-3">
      <div class="input-group-text">
        <input class="form-check-input mt-0" type="checkbox" value="" >
      </div>
      <input type="text" class="form-control" >
    </div>
    <br />
    <div class="input-group">
      <div class="input-group-text">
        <input class="form-check-input mt-0" type="radio" value="" >
      </div>
      <input type="text" class="form-control" >
    </div>
  </div>

(5). 多个输入框 (Multiple inputs)

在这里插入图片描述

  <div class = "col-6 ms-5">
    <div class="input-group">
      <span class="input-group-text">姓名</span>
      <input type="text" class="form-control">
      <input type="text" class="form-control">
    </div>
  </div>

(6). 多个span标签或者label标签 (Multiple addons)

在这里插入图片描述

  <div class = "col-6 ms-5">
    <div class="input-group mb-3">
      <span class="input-group-text">美元 $ </span>
      <span class="input-group-text">0.00</span>
      <input type="text" class="form-control" >
    </div>
  </div>

(7). 按钮控件 (Button)

在这里插入图片描述

  <div class = "col-6 ms-5">
    <div class="input-group mb-3">
      <button class="btn btn-outline-secondary" type="button">按钮1</button>
      <button class="btn btn-outline-primary" type="button">按钮2</button>
      <input type="text" class="form-control" placeholder="请输入内容" >
    </div>
  </div>

(8). 下拉菜单按钮 (Buttons with dropdowns)

1). 合在一起的

在这里插入图片描述

  <div class = "col-6 ms-5">
    <div class="input-group">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">下拉菜单</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">超链接1</a></li>
        <li><a class="dropdown-item" href="#">超链接2</a></li>
        <li><a class="dropdown-item" href="#">超链接3</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">超链接4</a></li>
      </ul>
      <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">下拉菜单</button>
      <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">超链接1</a></li>
        <li><a class="dropdown-item" href="#">超链接2</a></li>
        <li><a class="dropdown-item" href="#">超链接3</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">超链接4</a></li>
      </ul>
    </div>
  </div>

2). 分离的

在这里插入图片描述

  <div class = "col-6 ms-5">
    <div class="input-group mb-3">
      <button type="button" class="btn btn-outline-secondary">Action</button>
      <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">超链接1</a></li>
        <li><a class="dropdown-item" href="#">超链接2</a></li>
        <li><a class="dropdown-item" href="#">超链接3</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">超链接4</a></li>
      </ul>
      <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
    </div>
  </div>

7. 浮动标签 (Floating labels)

Bootstrap 5 官方文档

(1). 浮动标签 class = “form-floating”

输入框

  <div class = "col-6 ms-5">
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="floatingInput" placeholder="xxx@qq.com">
      <label for="floatingInput">电子邮箱</label>
    </div>
    <div class="form-floating">
      <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
      <label for="floatingPassword">密码</label>
    </div>
  </div>

文本域

  <div class = "col-6 ms-5">
    <div class="form-floating">
      <textarea class="form-control" placeholder="在这里评论" id="floatingTextarea2" style="height: 100px"></textarea>
      <label for="floatingTextarea2">评论</label>
    </div>
  </div>

1). placeholder属性

如果不使用placeholder属性, 输入框不会出现鼠标点击文字变换的效果
在这里插入图片描述

  <div class = "col-6 ms-5">
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="floatingInput">
      <label for="floatingInput">电子邮箱</label>
    </div>
    <div class="form-floating">
      <input type="password" class="form-control" id="floatingPassword">
      <label for="floatingPassword">密码</label>
    </div>
  </div>

2). 设置初始值 value属性

在这里插入图片描述

  <div class = "col-6 ms-5">
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="floatingInput" value = "xxx@qq.com">
      <label for="floatingInput">电子邮箱</label>
    </div>
    <div class="form-floating">
      <input type="password" class="form-control" id="floatingPassword"  value = "123456">
      <label for="floatingPassword">密码</label>
    </div>
  </div>

3). 设置无效的样式 class = “is-invalid”

在这里插入图片描述

  <div class = "col-6 ms-5">
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="floatingInput" value = "xxx@qq.com">
      <label for="floatingInput">电子邮箱</label>
    </div>
    <div class="form-floating">
      <input type="password" class="form-control is-invalid" id="floatingPassword"  value = "123456">
      <label for="floatingPassword">密码</label>
    </div>
  </div>

3). 设置有效的样式 class = “is-valid”

在这里插入图片描述

  <div class = "col-6 ms-5">
    <div class="form-floating mb-3">
      <input type="email" class="form-control is-valid" id="floatingInput" value = "xxx@qq.com">
      <label for="floatingInput">电子邮箱</label>
    </div>
    <div class="form-floating">
      <input type="password" class="form-control is-valid" id="floatingPassword"  value = "123456">
      <label for="floatingPassword">密码</label>
    </div>
  </div>