学习 Bootstrap 5 之 Forms
Posted _DiMinisH
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习 Bootstrap 5 之 Forms相关的知识，希望对你有一定的参考价值。
学习 Bootstrap 5 之 表单
- 表单 (Forms)
表单 (Forms)
1. 概览 (Overview)
(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)
给文本的表单控件, 像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)
学习 Bootstrap 5 之 Display property 和 Float