概述
概述 Bootstrap的表单控件在我们重新启动的表单样式中扩展为类。使用这些类来选择它们的定制显示,以便在不同浏览器和设备之间实现更一致的呈现。 确保在所有输入上使用适当的 type 属性(例如,email表示电子邮件地 ...更新于: 2023-04-30 14:28:21 查看: 539
发布于: 2021-8-31 11:31 发布者: 大米
概述
Bootstrap的表单控件在我们重新启动的表单样式中扩展为类。使用这些类来选择它们的定制显示,以便在不同浏览器和设备之间实现更一致的呈现。
type
属性(例如,email
表示电子邮件地址或 number
表示数字信息),以利用新的输入控件,如电子邮件验证、数字选择等。下面是一个演示Bootstrap表单样式的快速示例。请继续阅读关于必需类、表单布局等的文档。
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
表单文本
可以使用
.form-text
创建块级或内联级表单文本。
关联表单文本和表单控件
表单文本应该使用 aria-describedby
属性显式地与表单控件关联。这将确保辅助技术(如屏幕阅读器)在用户聚焦或进入控件时宣布此表单文本。
输入下面的表单文本可以用 .form-text
样式。如果将使用块级元素,则会添加顶部边距,以便与上面的输入保持距离。
<label for="inputPassword5" class="form-label">密码</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text"> 密码长度为8-20个字符,包含字母和数字,不能包含空格、特殊字符、表情符号。</div>
内联文本可以使用任何典型的内联HTML元素(可以是,<span>
, <small>
或其他标签),除了 .form-text
类。
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputPassword6" class="col-form-label">密码</label>
</div>
<div class="col-auto">
<input type="密码" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
</div>
<div class="col-auto">
<span id="passwordHelpInline" class="form-text">
必须8-20个字符之间。
</span>
</div>
</div>
禁用表单
在输入上添加disabled
的布尔属性,以防止用户交互,并使其看起来更清楚。
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
disabled
属性添加到 <fieldset>
以禁用其中的所有控件。浏览器将 <fieldset disabled>
中的所有本机窗体控件( <input>
, <select>
和 <button>
元素)视为已禁用,阻止它们上的键盘和鼠标交互。
但是,如果您的表单还包括自定义的类似按钮的元素,例如 <a class="btn btn-*">...</a>
, 这些只会被赋予 pointer-events: none
, 这意味着它们仍然可以通过键盘进行聚焦和操作。在这种情况下,必须手动修改这些控件,方法是添加 tabindex="-1"
以阻止它们接收焦点,并添加 aria-disabled="disabled"
以将其状态发送给辅助技术。
<form>
<fieldset disabled>
<legend>禁用表单例子</legend>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">禁用 input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁用 input">
</div>
<div class="mb-3">
<label for="disabledSelect" class="form-label">禁用 select menu</label>
<select id="disabledSelect" class="form-select">
<option>禁用 select</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>
可访问性
确保所有表单控件都有一个合适的可访问的名称,以便它们的用途可以传达给使用辅助技术的用户。实现这一点的最简单方法是使用<label>元素,或者在按钮的情况下,将足够描述性的文本作为
<button>...</button>
内容的一部分。
对于不可能包含可见的 <label>
或适当的文本内容的情况,仍有其他方法提供可访问的名称,例如:
<label>
使用.visually-hidden
类隐藏的元素- 指向可以使用
aria-labelledby
充当标签的现有元素 - 提供
title
属性 - 使用
aria-label
在元素上显式设置可访问的名称
如果这些都不存在,辅助技术可能会求助于使用 placeholder
属性作为 <input>
和 <textarea>
元素上可访问名称的后备。本节中的示例提供了一些建议的、针对具体情况的方法。
虽然使用视觉隐藏的内容(.visually-hidden, aria-label,
甚至 placeholder
内容,一旦表单字段有内容就会消失)将有利于辅助技术用户,但是缺少可见标签文本对于某些用户来说仍然是个问题。某种形式的可见标签通常是最好的方法,无论是对于可访问性还是可用性。