Bootstrap/docs/4.5/components/forms

在GitHub上查看

形式

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

概观

Bootstrap的表单控件在 我们重新启动的表单样式 与类。 使用这些类选择加入其自定义的显示,以在浏览器和设备之间提供更一致的呈现。

确保使用适当的 type 所有输入的属性（例如, email 用于电子邮件地址或 number 以获取数字信息）以利用更新的输入控件,例如电子邮件验证,号码选择等。

这是一个简单的示例,用于演示Bootstrap的表单样式。 继续阅读有关所需类,表单布局等的文档。

电子邮件地址 我们绝不会与其他任何人共享您的电子邮件。

密码

对我进行检查

提交

<form>
<div class="form-group">
<label for="exampleInputEmail1"> 电子邮件地址 </label>
<input aria-describedby="emailHelp" class="form-control" id="exampleInputEmail1" type="email"/>
<small class="form-text text-muted" id="emailHelp"> 我们绝不会与其他任何人共享您的电子邮件。 </small>
</div>
<div class="form-group">
<label for="exampleInputPassword1"> 密码 </label>
<input class="form-control" id="exampleInputPassword1" type="password"/>
</div>
<div class="form-group form-check">
<input class="form-check-input" id="exampleCheck1" type="checkbox"/>
<label class="form-check-label" for="exampleCheck1"> 对我进行检查 </label>
</div>
<button class="btn btn-primary" type="submit"> 提交 </button>
</form>

表单控件

文字表单控件-如 <input> s, <select> s和 <textarea> s-用 .form-control 类。 其中包括用于一般外观,焦点状态,大小调整等的样式。

一定要探索我们的 定制表格 进一步的风格 <select> s.

电子邮件地址

示例选择 1 2 3 4 5

多选示例 1 2 3 4 5

示例文本区域

<form>
<div class="form-group">
<label for="exampleFormControlInput1"> 电子邮件地址 </label>
<input class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" type="email"/>
</div>
<div class="form-group">
<label for="exampleFormControlSelect1"> 示例选择 </label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2"> 多选示例 </label>
<select class="form-control" id="exampleFormControlSelect2" multiple="">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1"> 示例文本区域 </label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>

对于文件输入,交换 .form-control for .form-control-file.

示例文件输入

<form>
<div class="form-group">
<label for="exampleFormControlFile1"> 示例文件输入 </label>
<input class="form-control-file" id="exampleFormControlFile1" type="file"/>
</div>
</form>

浆纱

使用类似的类来设置高度 .form-control-lg and .form-control-sm.

<input class="form-control form-control-lg" placeholder=".form-control-lg" type="text"/>
<input class="form-control" placeholder="Default input" type="text"/>
<input class="form-control form-control-sm" placeholder=".form-control-sm" type="text"/>

大选择 默认选择 小选择

<select class="form-control form-control-lg">
<option> 大选择 </option>
</select>
<select class="form-control">
<option> 默认选择 </option>
</select>
<select class="form-control form-control-sm">
<option> 小选择 </option>
</select>

只读

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

<input class="form-control" placeholder="Readonly input here..." readonly="" type="text"/>

只读纯文本

如果你想拥有 <input readonly> 表单中样式为纯文本的元素,请使用 .form-control-plaintext 类以删除默认的表单字段样式,并保留正确的边距和填充。

电子邮件

密码

<form>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="staticEmail"> 电子邮件 </label>
<div class="col-sm-10">
<input class="form-control-plaintext" id="staticEmail" readonly="" type="text" value="email@example.com"/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="inputPassword"> 密码 </label>
<div class="col-sm-10">
<input class="form-control" id="inputPassword" type="password"/>
</div>
</div>
</form>

电子邮件

密码

确认身份

<form class="form-inline">
<div class="form-group mb-2">
<label class="sr-only" for="staticEmail2"> 电子邮件 </label>
<input class="form-control-plaintext" id="staticEmail2" readonly="" type="text" value="email@example.com"/>
</div>
<div class="form-group mx-sm-3 mb-2">
<label class="sr-only" for="inputPassword2"> 密码 </label>
<input class="form-control" id="inputPassword2" placeholder="Password" type="password"/>
</div>
<button class="btn btn-primary mb-2" type="submit"> 确认身份 </button>
</form>

范围输入

使用以下命令设置水平滚动范围输入 .form-control-range.

范围输入示例

<form>
<div class="form-group">
<label for="formControlRange"> 范围输入示例 </label>
<input class="form-control-range" id="formControlRange" type="range"/>
</div>
</form>

复选框和收音机

借助以下功能改进了默认复选框和单选按钮 .form-check, 两种输入类型的单个类,可改善其HTML元素的布局和行为 。复选框用于选择列表中的一个或多个选项,而单选框则用于从多个选项中选择一个选项。

支持禁用的复选框和收音机。 The disabled 属性将应用较浅的颜色,以帮助指示输入状态。

复选框和单选按钮支持基于HTML的表单验证,并提供简洁,可访问的标签。 因此,我们的 <input> 和 <label> s是同级元素,而不是 <input> 在一个 <label> 。如您必须指定的那样,这有点冗长 id and for 关联的属性 <input> and <label>.

默认（堆叠）

默认情况下,任意数量的复选框和单选框都将被垂直堆叠,并与 .form-check.

默认复选框

禁用复选框

<div class="form-check">
<input class="form-check-input" id="defaultCheck1" type="checkbox" value=""/>
<label class="form-check-label" for="defaultCheck1"> 默认复选框 </label>
</div>
<div class="form-check">
<input class="form-check-input" disabled="" id="defaultCheck2" type="checkbox" value=""/>
<label class="form-check-label" for="defaultCheck2"> 禁用复选框 </label>
</div>

默认电台

第二默认电台

残疾人收音机

<div class="form-check">
<input checked="" class="form-check-input" id="exampleRadios1" name="exampleRadios" type="radio" value="option1"/>
<label class="form-check-label" for="exampleRadios1"> 默认电台 </label>
</div>
<div class="form-check">
<input class="form-check-input" id="exampleRadios2" name="exampleRadios" type="radio" value="option2"/>
<label class="form-check-label" for="exampleRadios2"> 第二默认电台 </label>
</div>
<div class="form-check">
<input class="form-check-input" disabled="" id="exampleRadios3" name="exampleRadios" type="radio" value="option3"/>
<label class="form-check-label" for="exampleRadios3"> 残疾人收音机 </label>
</div>

排队

通过添加将同一水平行上的复选框或单选按钮分组 .form-check-inline 去任何 .form-check.

1

2

3（已禁用）

<div class="form-check form-check-inline">
<input class="form-check-input" id="inlineCheckbox1" type="checkbox" value="option1"/>
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="inlineCheckbox2" type="checkbox" value="option2"/>
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" disabled="" id="inlineCheckbox3" type="checkbox" value="option3"/>
<label class="form-check-label" for="inlineCheckbox3"> 3（已禁用） </label>
</div>

1

2

3（已禁用）

<div class="form-check form-check-inline">
<input class="form-check-input" id="inlineRadio1" name="inlineRadioOptions" type="radio" value="option1"/>
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="inlineRadio2" name="inlineRadioOptions" type="radio" value="option2"/>
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" disabled="" id="inlineRadio3" name="inlineRadioOptions" type="radio" value="option3"/>
<label class="form-check-label" for="inlineRadio3"> 3（已禁用） </label>
</div>

没有标签

Add .position-static 内的输入 .form-check 没有任何标签文字。 请记住,仍要为辅助技术提供某种形式的可访问名称（例如,使用 aria-label ).

<div class="form-check">
<input aria-label="..." class="form-check-input position-static" id="blankCheckbox" type="checkbox" value="option1"/>
</div>
<div class="form-check">
<input aria-label="..." class="form-check-input position-static" id="blankRadio1" name="blankRadio" type="radio" value="option1"/>
</div>

布局

由于Bootstrap适用 display: block and width: 100% 对于我们几乎所有的窗体控件,默认情况下窗体将垂直堆叠。 可以使用其他类来按表单更改此布局。

表格组

The .form-group 类是向表单添加一些结构的最简单方法。 它提供了一个灵活的类,该类鼓励标签,控件,可选的帮助文本和表单验证消息的正确分组。 默认情况下,仅适用 margin-bottom ,但它在中选取了其他样式 .form-inline 如所须。 搭配使用 <fieldset> s, <div> 或几乎任何其他元素。

标签示例

另一个标签

<form>
<div class="form-group">
<label for="formGroupExampleInput"> 标签示例 </label>
<input class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder" type="text"/>
</div>
<div class="form-group">
<label for="formGroupExampleInput2"> 另一个标签 </label>
<input class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder" type="text"/>
</div>
</form>

表格网格

可以使用我们的网格类构建更复杂的表单。 将它们用于需要多列,可变宽度和其他对齐选项的表单布局。

<form>
<div class="row">
<div class="col">
<input class="form-control" placeholder="First name" type="text"/>
</div>
<div class="col">
<input class="form-control" placeholder="Last name" type="text"/>
</div>
</div>
</form>

表格行

您也可以交换 .row for .form-row ,这是我们标准网格行的一种变体,它覆盖了默认的列装订线,以实现更紧凑,更紧凑的布局。

<form>
<div class="form-row">
<div class="col">
<input class="form-control" placeholder="First name" type="text"/>
</div>
<div class="col">
<input class="form-control" placeholder="Last name" type="text"/>
</div>
</div>
</form>

也可以使用网格系统创建更复杂的布局。

电子邮件

密码

地址

地址2

City

州 选择... ...

Zip

对我进行检查

登入

<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4"> 电子邮件 </label>
<input class="form-control" id="inputEmail4" type="email"/>
</div>
<div class="form-group col-md-6">
<label for="inputPassword4"> 密码 </label>
<input class="form-control" id="inputPassword4" type="password"/>
</div>
</div>
<div class="form-group">
<label for="inputAddress"> 地址 </label>
<input class="form-control" id="inputAddress" placeholder="1234 Main St" type="text"/>
</div>
<div class="form-group">
<label for="inputAddress2"> 地址2 </label>
<input class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor" type="text"/>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity"> City </label>
<input class="form-control" id="inputCity" type="text"/>
</div>
<div class="form-group col-md-4">
<label for="inputState"> 州 </label>
<select class="form-control" id="inputState">
<option selected=""> 选择... </option>
<option> ... </option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip"> Zip </label>
<input class="form-control" id="inputZip" type="text"/>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" id="gridCheck" type="checkbox"/>
<label class="form-check-label" for="gridCheck"> 对我进行检查 </label>
</div>
</div>
<button class="btn btn-primary" type="submit"> 登入 </button>
</form>

水平形式

通过添加与网格创建水平表单 .row 类以形成组并使用 .col-*-* 用于指定标签和控件宽度的类。 确保添加 .col-form-label 到你的 <label> 也是如此,因此它们与关联的表单控件垂直居中。

有时,您可能需要使用边距或填充实用程序来创建所需的完美对齐方式。 例如,我们删除了 padding-top 在我们堆叠的无线电输入标签上,以更好地对齐文本基线。

电子邮件

密码

收音机

第一台收音机

第二收音机

第三残疾人广播电台

复选框

示例复选框

登入

<form>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="inputEmail3"> 电子邮件 </label>
<div class="col-sm-10">
<input class="form-control" id="inputEmail3" type="email"/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="inputPassword3"> 密码 </label>
<div class="col-sm-10">
<input class="form-control" id="inputPassword3" type="password"/>
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0"> 收音机 </legend>
<div class="col-sm-10">
<div class="form-check">
<input checked="" class="form-check-input" id="gridRadios1" name="gridRadios" type="radio" value="option1"/>
<label class="form-check-label" for="gridRadios1"> 第一台收音机 </label>
</div>
<div class="form-check">
<input class="form-check-input" id="gridRadios2" name="gridRadios" type="radio" value="option2"/>
<label class="form-check-label" for="gridRadios2"> 第二收音机 </label>
</div>
<div class="form-check disabled">
<input class="form-check-input" disabled="" id="gridRadios3" name="gridRadios" type="radio" value="option3"/>
<label class="form-check-label" for="gridRadios3"> 第三残疾人广播电台 </label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-2"> 复选框 </div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" id="gridCheck1" type="checkbox"/>
<label class="form-check-label" for="gridCheck1"> 示例复选框 </label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button class="btn btn-primary" type="submit"> 登入 </button>
</div>
</div>
</form>

水平表单标签大小

请务必使用 .col-form-label-sm or .col-form-label-lg 到你的 <label> s or <legend> 正确遵循的大小 .form-control-lg and .form-control-sm.

电子邮件

电子邮件

电子邮件

<form>
<div class="form-group row">
<label class="col-sm-2 col-form-label col-form-label-sm" for="colFormLabelSm"> 电子邮件 </label>
<div class="col-sm-10">
<input class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm" type="email"/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="colFormLabel"> 电子邮件 </label>
<div class="col-sm-10">
<input class="form-control" id="colFormLabel" placeholder="col-form-label" type="email"/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label col-form-label-lg" for="colFormLabelLg"> 电子邮件 </label>
<div class="col-sm-10">
<input class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg" type="email"/>
</div>
</div>
</form>

列大小

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

<form>
<div class="form-row">
<div class="col-7">
<input class="form-control" placeholder="City" type="text"/>
</div>
<div class="col">
<input class="form-control" placeholder="State" type="text"/>
</div>
<div class="col">
<input class="form-control" placeholder="Zip" type="text"/>
</div>
</div>
</form>

自动调整大小

下面的示例使用flexbox实用工具将内容和更改垂直居中 .col to .col-auto 这样您的列仅占用所需的空间。 换句话说,该列将根据内容自行调整大小。

Name

用户名

@

记住账号

提交

<form>
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInput"> Name </label>
<input class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe" type="text"/>
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup"> 用户名 </label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input class="form-control" id="inlineFormInputGroup" placeholder="Username" type="text"/>
</div>
</div>
<div class="col-auto">
<div class="form-check mb-2">
<input class="form-check-input" id="autoSizingCheck" type="checkbox"/>
<label class="form-check-label" for="autoSizingCheck"> 记住账号 </label>
</div>
</div>
<div class="col-auto">
<button class="btn btn-primary mb-2" type="submit"> 提交 </button>
</div>
</div>
</form>

然后,您可以再次将其与特定于大小的列类重新混合。

Name

用户名

@

记住账号

提交

<form>
<div class="form-row align-items-center">
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputName"> Name </label>
<input class="form-control" id="inlineFormInputName" placeholder="Jane Doe" type="text"/>
</div>
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputGroupUsername"> 用户名 </label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input class="form-control" id="inlineFormInputGroupUsername" placeholder="Username" type="text"/>
</div>
</div>
<div class="col-auto my-1">
<div class="form-check">
<input class="form-check-input" id="autoSizingCheck2" type="checkbox"/>
<label class="form-check-label" for="autoSizingCheck2"> 记住账号 </label>
</div>
</div>
<div class="col-auto my-1">
<button class="btn btn-primary" type="submit"> 提交 </button>
</div>
</div>
</form>

而且当然 自定义表单控件 得到支持。

偏爱 选择... One Two 三

记住我的偏好

提交

<form>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect"> 偏爱 </label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected=""> 选择... </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> 三 </option>
</select>
</div>
<div class="col-auto my-1">
<div class="custom-control custom-checkbox mr-sm-2">
<input class="custom-control-input" id="customControlAutosizing" type="checkbox"/>
<label class="custom-control-label" for="customControlAutosizing"> 记住我的偏好 </label>
</div>
</div>
<div class="col-auto my-1">
<button class="btn btn-primary" type="submit"> 提交 </button>
</div>
</div>
</form>

内联表格

使用 .form-inline 类可在单个水平行上显示一系列标签,表单控件和按钮。 内联表单中的表单控件与其默认状态略有不同。

• 控件是 display: flex ,折叠任何HTML空格,并允许您使用 间距 and 弹性盒 公用事业。
• 控件和输入组接收 width: auto 覆盖Bootstrap默认值 width: 100%.
• 控制 仅内嵌显示在至少576像素宽的视口中 解决移动设备上的狭窄视口。

您可能需要手动处理单个表单控件的宽度和对齐方式, 间隔实用程序 （如下所示）。 最后,请确保始终包含一个 <label> 每个表单控件,即使您需要通过以下方式向非屏幕阅读器访问者隐藏它： .sr-only.

Name 用户名

@

记住账号

提交

<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2"> Name </label>
<input class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe" type="text"/>
<label class="sr-only" for="inlineFormInputGroupUsername2"> 用户名 </label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username" type="text"/>
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" id="inlineFormCheck" type="checkbox"/>
<label class="form-check-label" for="inlineFormCheck"> 记住账号 </label>
</div>
<button class="btn btn-primary mb-2" type="submit"> 提交 </button>
</form>

还支持自定义表单控件和选择。

偏爱 选择... One Two 三

记住我的偏好

提交

<form class="form-inline">
<label class="my-1 mr-2" for="inlineFormCustomSelectPref"> 偏爱 </label>
<select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
<option selected=""> 选择... </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> 三 </option>
</select>
<div class="custom-control custom-checkbox my-1 mr-sm-2">
<input class="custom-control-input" id="customControlInline" type="checkbox"/>
<label class="custom-control-label" for="customControlInline"> 记住我的偏好 </label>
</div>
<button class="btn btn-primary my-1" type="submit"> 提交 </button>
</form>

隐藏标签的替代方法

如果您没有为每个输入都添加标签,那么诸如屏幕阅读器之类的辅助技术将给您的表格带来麻烦。 对于这些内联表单,您可以使用 .sr-only 类。 还有其他替代方法可以为辅助技术提供标签,例如 aria-label,aria-labelledby or title 属性。 如果这些都不存在,辅助技术可能会诉诸于使用 placeholder 属性（如果存在）,但请注意使用 placeholder 不建议用它代替其他标签方法。

帮助文字

表单中的块级帮助文本可以使用 .form-text （以前称为 .help-block 在v3中）。 内联帮助文本可以使用任何内联HTML元素和实用程序类（例如, .text-muted.

将帮助文本与表单控件相关联

帮助文本应与与之相关的表单控件明确关联。 aria-describedby 属性。 这将确保辅助技术（例如屏幕阅读器）在用户聚焦或进入控件时会宣布此帮助文本。

输入下方的帮助文本可以使用以下样式设置 .form-text 。该课程包括 display: block 并添加一些顶部边距,以便与上面的输入轻松隔开。

密码 您的密码必须是8-20个字符长,包含字母和数字,并且不能包含空格,特殊字符或表情符号。

<label for="inputPassword5"> 密码 </label>
<input aria-describedby="passwordHelpBlock" class="form-control" id="inputPassword5" type="password"/>
<small class="form-text text-muted" id="passwordHelpBlock"> 您的密码必须是8-20个字符长,包含字母和数字,并且不能包含空格,特殊字符或表情符号。 </small>

内联文本可以使用任何典型的内联HTML元素（可以是 <small>,<span> 或其他）,只不过是实用程序类。

密码 必须是8-20个字符长。

<form class="form-inline">
<div class="form-group">
<label for="inputPassword6"> 密码 </label>
<input aria-describedby="passwordHelpInline" class="form-control mx-sm-3" id="inputPassword6" type="password"/>
<small class="text-muted" id="passwordHelpInline"> 必须是8-20个字符长。 </small>
</div>
</form>

残障人士表格

添加 disabled 输入上的boolean属性,以防止用户交互并使它看起来更浅。

添加 disabled 归因于 <fieldset> 禁用其中的所有控件。

禁用输入

禁用选择菜单 禁用选择

无法检查

提交

<form>
<fieldset disabled="">
<div class="form-group">
<label for="disabledTextInput"> 禁用输入 </label>
<input class="form-control" id="disabledTextInput" placeholder="Disabled input" type="text"/>
</div>
<div class="form-group">
<label for="disabledSelect"> 禁用选择菜单 </label>
<select class="form-control" id="disabledSelect">
<option> 禁用选择 </option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" disabled="" id="disabledFieldsetCheck" type="checkbox"/>
<label class="form-check-label" for="disabledFieldsetCheck"> 无法检查 </label>
</div>
</div>
<button class="btn btn-primary" type="submit"> 提交 </button>
</fieldset>
</form>

警告与锚

浏览器对待所有本机表单控件（ <input>,<select> ,和 <button> 元素） <fieldset disabled> 为禁用状态,则可以防止键盘和鼠标的交互。

但是,如果您的表单还包含类似按钮的自定义元素,例如 <a ... class="btn btn-*"> ,这些只会赋予 pointer-events: none 。如有关 按钮的禁用状态 （特别是在锚元素的小节中）,此CSS属性尚未标准化,并且Internet Explorer 10中未完全支持。 基于锚的控件也将仍然可以使用键盘进行聚焦和操作。 您必须通过添加手动修改这些控件 tabindex="-1" 防止他们受到关注 aria-disabled="disabled" 向辅助技术传达其状态。

跨浏览器兼容性

虽然Bootstrap将在所有浏览器中应用这些样式,但是Internet Explorer 11及更低版本并不完全支持 disabled 上的属性 <fieldset> 。使用自定义JavaScript禁用这些浏览器中的字段集。

验证

通过HTML5表单验证为您的用户提供有价值的可行反馈– 在所有受支持的浏览器中可用 。从浏览器的默认验证反馈中选择,或使用我们的内置类和入门JavaScript实施自定义消息。

我们知道,目前客户端的自定义验证样式和工具提示尚无法访问,因为它们未使用辅助技术。 在研究解决方案时,建议您使用服务器端选项或默认的浏览器验证方法。

输入组验证

不幸的是,输入组在验证样式方面存在困难。 我们的建议是将反馈消息作为 .input-group 有 .is-{valid|invalid} 。将反馈消息放在输入组中会破坏 border-radius. 查看此解决方法 .

这个怎么运作

表单验证如何与Bootstrap结合使用：

• HTML表单验证是通过CSS的两个伪类应用的, :invalid and :valid 。适用于 <input>,<select> ,和 <textarea> 元素。
• 引导范围 :invalid and :valid 父样式 .was-validated 类,通常应用于 <form> 。否则,任何没有值的必填字段在页面加载时都将显示为无效。 这样,您可以选择何时激活它们（通常在尝试提交表单之后）。
• 要重置表单的外观（例如,使用AJAX动态提交表单）,请删除 .was-validated 来自的班级 <form> 提交后再次提交。
• 作为后备, .is-invalid and .is-valid 可以使用类代替伪类 服务器端验证 。他们不需要 .was-validated 父类。
• 由于CSS运作方式的限制,我们目前无法将样式套用至 <label> 无需自定义JavaScript即可在DOM中的表单控件之前出现。
• 所有现代浏览器均支持 约束验证API ,一系列用于验证表单控件的JavaScript方法。
• 反馈消息可以利用 浏览器默认值 （因浏览器而异,并且无法通过CSS样式化）或带有其他HTML和CSS的自定义反馈样式。
• 您可以通过以下方式提供自定义有效性消息 setCustomValidity 在JavaScript中。

考虑到这一点,请考虑以下演示以了解我们的自定义表单验证样式,可选的服务器端类和浏览器默认值。

自定义样式

对于自定义的Bootstrap表单验证消息,您需要添加 novalidate 您的boolean属性 <form> 。这将禁用浏览器的默认反馈工具提示,但仍提供对JavaScript中的表单验证API的访问。 尝试提交以下表格；我们的JavaScript会拦截“提交”按钮,并将反馈转发给您。 尝试提交时,您会看到 :invalid and :valid 样式应用于表单控件。

自定义反馈样式将应用自定义颜色,边框,焦点样式和背景图标,以更好地传达反馈。 的背景图标 <select> s仅适用于 .custom-select , 并不是 .form-control.

名字

看起来不错！

姓

看起来不错！

City

请提供有效的城市。

州 选择... ...

请选择一个有效状态。

Zip

请提供有效的邮编。

同意条款和条件

您必须同意才能提交。

提交表格

<form class="needs-validation" novalidate="">
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom01"> 名字 </label>
<input class="form-control" id="validationCustom01" required="" type="text" value="Mark"/>
<div class="valid-feedback"> 看起来不错！ </div>
</div>
<div class="col-md-6 mb-3">
<label for="validationCustom02"> 姓 </label>
<input class="form-control" id="validationCustom02" required="" type="text" value="Otto"/>
<div class="valid-feedback"> 看起来不错！ </div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03"> City </label>
<input class="form-control" id="validationCustom03" required="" type="text"/>
<div class="invalid-feedback"> 请提供有效的城市。 </div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04"> 州 </label>
<select class="custom-select" id="validationCustom04" required="">
<option disabled="" selected="" value=""> 选择... </option>
<option> ... </option>
</select>
<div class="invalid-feedback"> 请选择一个有效状态。 </div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05"> Zip </label>
<input class="form-control" id="validationCustom05" required="" type="text"/>
<div class="invalid-feedback"> 请提供有效的邮编。 </div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" id="invalidCheck" required="" type="checkbox" value=""/>
<label class="form-check-label" for="invalidCheck"> 同意条款和条件 </label>
<div class="invalid-feedback"> 您必须同意才能提交。 </div>
</div>
</div>
<button class="btn btn-primary" type="submit"> 提交表格 </button>
</form>
<script> }）（）; </script>

浏览器默认值

对自定义验证反馈消息或编写JavaScript以更改表单行为不感兴趣？ 很好,您可以使用浏览器的默认值。 尝试提交以下表格。 根据您的浏览器和操作系统,您会看到略有不同的反馈样式。

虽然无法使用CSS设置这些反馈样式的样式,但是您仍然可以通过JavaScript自定义反馈文本。

名字

姓

City

州 选择... ...

Zip

同意条款和条件

提交表格

<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault01"> 名字 </label>
<input class="form-control" id="validationDefault01" required="" type="text" value="Mark"/>
</div>
<div class="col-md-6 mb-3">
<label for="validationDefault02"> 姓 </label>
<input class="form-control" id="validationDefault02" required="" type="text" value="Otto"/>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault03"> City </label>
<input class="form-control" id="validationDefault03" required="" type="text"/>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault04"> 州 </label>
<select class="custom-select" id="validationDefault04" required="">
<option disabled="" selected="" value=""> 选择... </option>
<option> ... </option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault05"> Zip </label>
<input class="form-control" id="validationDefault05" required="" type="text"/>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" id="invalidCheck2" required="" type="checkbox" value=""/>
<label class="form-check-label" for="invalidCheck2"> 同意条款和条件 </label>
</div>
</div>
<button class="btn btn-primary" type="submit"> 提交表格 </button>
</form>

服务器端

我们建议您使用客户端验证,但是如果您需要服务器端验证,则可以使用 .is-invalid and .is-valid 。注意 .invalid-feedback 这些类也受支持。

对于无效字段,请使用以下命令确保无效反馈/错误消息与相关表单字段相关联 aria-describedby 。此属性允许多个 id 如果该字段已经指向其他表单文本,则被引用。

名字

看起来不错！

姓

看起来不错！

City

请提供有效的城市。

州 选择... ...

请选择一个有效状态。

Zip

请提供有效的邮编。

同意条款和条件

您必须同意才能提交。

提交表格

<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer01"> 名字 </label>
<input class="form-control is-valid" id="validationServer01" required="" type="text" value="Mark"/>
<div class="valid-feedback"> 看起来不错！ </div>
</div>
<div class="col-md-6 mb-3">
<label for="validationServer02"> 姓 </label>
<input class="form-control is-valid" id="validationServer02" required="" type="text" value="Otto"/>
<div class="valid-feedback"> 看起来不错！ </div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer03"> City </label>
<input aria-describedby="validationServer03Feedback" class="form-control is-invalid" id="validationServer03" required="" type="text"/>
<div class="invalid-feedback" id="validationServer03Feedback"> 请提供有效的城市。 </div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer04"> 州 </label>
<select aria-describedby="validationServer04Feedback" class="custom-select is-invalid" id="validationServer04" required="">
<option disabled="" selected="" value=""> 选择... </option>
<option> ... </option>
</select>
<div class="invalid-feedback" id="validationServer04Feedback"> 请选择一个有效状态。 </div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer05"> Zip </label>
<input aria-describedby="validationServer05Feedback" class="form-control is-invalid" id="validationServer05" required="" type="text"/>
<div class="invalid-feedback" id="validationServer05Feedback"> 请提供有效的邮编。 </div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input aria-describedby="invalidCheck3Feedback" class="form-check-input is-invalid" id="invalidCheck3" required="" type="checkbox" value=""/>
<label class="form-check-label" for="invalidCheck3"> 同意条款和条件 </label>
<div class="invalid-feedback" id="invalidCheck3Feedback"> 您必须同意才能提交。 </div>
</div>
</div>
<button class="btn btn-primary" type="submit"> 提交表格 </button>
</form>

支持的元素

验证样式可用于以下表单控件和组件：

• <input> 和 <textarea> 与 .form-control
• <select> 与 .form-control or .custom-select
• .form-checks
• .custom-checkbox 和 .custom-radios
• .custom-file

多行文本

请在文本区域中输入一条消息。

选中此自定义复选框

示例无效的反馈文本

切换此自定义收音机

或切换其他自定义收音机

更多示例无效的反馈文本

选择... One Two 三

示例无效的自定义选择反馈

选择文件...

无效的自定义文件反馈示例

@

输入组反馈无效的示例

选项

选择... One Two 三

输入组反馈无效的示例

选择文件...

按键

输入组反馈无效的示例

<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea"> 多行文本 </label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required=""></textarea>
<div class="invalid-feedback"> 请在文本区域中输入一条消息。 </div>
</div>
<div class="custom-control custom-checkbox mb-3">
<input class="custom-control-input" id="customControlValidation1" required="" type="checkbox"/>
<label class="custom-control-label" for="customControlValidation1"> 选中此自定义复选框 </label>
<div class="invalid-feedback"> 示例无效的反馈文本 </div>
</div>
<div class="custom-control custom-radio">
<input class="custom-control-input" id="customControlValidation2" name="radio-stacked" required="" type="radio"/>
<label class="custom-control-label" for="customControlValidation2"> 切换此自定义收音机 </label>
</div>
<div class="custom-control custom-radio mb-3">
<input class="custom-control-input" id="customControlValidation3" name="radio-stacked" required="" type="radio"/>
<label class="custom-control-label" for="customControlValidation3"> 或切换其他自定义收音机 </label>
<div class="invalid-feedback"> 更多示例无效的反馈文本 </div>
</div>
<div class="mb-3">
<select class="custom-select" required="">
<option value=""> 选择... </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> 三 </option>
</select>
<div class="invalid-feedback"> 示例无效的自定义选择反馈 </div>
</div>
<div class="custom-file mb-3">
<input class="custom-file-input" id="validatedCustomFile" required="" type="file"/>
<label class="custom-file-label" for="validatedCustomFile"> 选择文件... </label>
<div class="invalid-feedback"> 无效的自定义文件反馈示例 </div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<span class="input-group-text" id="validatedInputGroupPrepend">@</span>
</div>
<input aria-describedby="validatedInputGroupPrepend" class="form-control is-invalid" required="" type="text"/>
</div>
<div class="invalid-feedback"> 输入组反馈无效的示例 </div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<label class="input-group-text" for="validatedInputGroupSelect"> 选项 </label>
</div>
<select class="custom-select" id="validatedInputGroupSelect" required="">
<option value=""> 选择... </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> 三 </option>
</select>
</div>
<div class="invalid-feedback"> 输入组反馈无效的示例 </div>
</div>
<div class="input-group is-invalid">
<div class="custom-file">
<input class="custom-file-input" id="validatedInputGroupCustomFile" required="" type="file"/>
<label class="custom-file-label" for="validatedInputGroupCustomFile"> 选择文件... </label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"> 按键 </button>
</div>
</div>
<div class="invalid-feedback"> 输入组反馈无效的示例 </div>
</form>

提示

如果您的表单布局允许,则可以交换 .{valid|invalid}-feedback 的课程 .{valid|invalid}-tooltip 类,以在样式化的工具提示中显示验证反馈。 一定要有一个父母 position: relative 在其上进行工具提示定位。 在下面的示例中,我们的列类已经具有此功能,但是您的项目可能需要替代设置。

名字

看起来不错！

姓

看起来不错！

City

请提供有效的城市。

州 选择... ...

请选择一个有效状态。

Zip

请提供有效的邮编。

提交表格

<form class="needs-validation" novalidate="">
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip01"> 名字 </label>
<input class="form-control" id="validationTooltip01" required="" type="text" value="Mark"/>
<div class="valid-tooltip"> 看起来不错！ </div>
</div>
<div class="col-md-6 mb-3">
<label for="validationTooltip02"> 姓 </label>
<input class="form-control" id="validationTooltip02" required="" type="text" value="Otto"/>
<div class="valid-tooltip"> 看起来不错！ </div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip03"> City </label>
<input class="form-control" id="validationTooltip03" required="" type="text"/>
<div class="invalid-tooltip"> 请提供有效的城市。 </div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip04"> 州 </label>
<select class="custom-select" id="validationTooltip04" required="">
<option disabled="" selected="" value=""> 选择... </option>
<option> ... </option>
</select>
<div class="invalid-tooltip"> 请选择一个有效状态。 </div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip05"> Zip </label>
<input class="form-control" id="validationTooltip05" required="" type="text"/>
<div class="invalid-tooltip"> 请提供有效的邮编。 </div>
</div>
</div>
<button class="btn btn-primary" type="submit"> 提交表格 </button>
</form>

定制化

验证状态可以通过Sass使用以下命令自定义 $form-validation-states map. 位于我们的 _variables.scss 文件,此Sass映射被循环生成默认值 valid/invalid 验证状态。 其中包括一个嵌套的地图,用于自定义每个州的颜色和图标。 虽然浏览器不支持其他状态,但是使用自定义样式的浏览器可以轻松添加更复杂的表单反馈。

请注意,我们不建议您自定义这些值,而不修改 form-validation-state mixin。

输入组验证解决方法

我们无法解决损坏的问题 border-radius 由于选择器的限制,具有验证的输入组的数量,因此需要手动替代。 当您使用标准输入组且未自定义默认边框半径值时,请添加 .rounded-right 到破碎的元素 border-radius.

@

请选择一个用户名。

<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input class="form-control is-invalid rounded-right" required="" type="text"/>
<div class="invalid-feedback"> 请选择一个用户名。 </div>
</div>

使用小型或大型输入组或自定义默认值时 border-radius 值,将自定义CSS添加到元素中 border-radius.

@

请选择一个用户名。

<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input class="form-control is-invalid fix-rounded-right" required="" type="text"/>
<div class="invalid-feedback"> 请选择一个用户名。 </div>
</div>

自订表格

为了获得更多的自定义和跨浏览器的一致性,请使用我们完全自定义的表单元素来替换浏览器的默认值。 它们建立在语义和可访问标记的基础之上,因此它们是任何默认表单控件的可靠替代品。

复选框和收音机

每个复选框和单选 <input> and <label> 配对包装在 <div> 创建我们的自定义控件。 从结构上讲,这与我们的默认方法相同 .form-check.

我们使用同级选择器（ ~ ） <input> 状态-如 :checked —正确设置自定义表单指示器的样式。 当与 .custom-control-label 类中,我们还可以根据 <input> 的状态。

我们隐藏默认 <input> with opacity 并使用 .custom-control-label 在以下位置建立一个新的自定义表单指示器 ::before and ::after 。不幸的是,我们不能仅凭 <input> 因为CSS的 content 在该元素上不起作用。

在检查状态下,我们使用 base64嵌入式SVG图标 from 打开标志性 。这为我们提供了跨浏览器和设备的样式和位置的最佳控件。

复选框

选中此自定义复选框

<div class="custom-control custom-checkbox">
<input class="custom-control-input" id="customCheck1" type="checkbox"/>
<label class="custom-control-label" for="customCheck1"> 选中此自定义复选框 </label>
</div>

自定义复选框也可以利用 :indeterminate 通过JavaScript手动设置时的伪类（没有可用的HTML属性来指定它）。

选中此自定义复选框

<div class="custom-control custom-checkbox">
<input class="custom-control-input" id="customCheck2" type="checkbox"/>
<label class="custom-control-label" for="customCheck2"> 选中此自定义复选框 </label>
</div>

如果您使用的是jQuery,则应满足以下条件：

收音机

切换此自定义收音机

或切换其他自定义收音机

<div class="custom-control custom-radio">
<input class="custom-control-input" id="customRadio1" name="customRadio" type="radio"/>
<label class="custom-control-label" for="customRadio1"> 切换此自定义收音机 </label>
</div>
<div class="custom-control custom-radio">
<input class="custom-control-input" id="customRadio2" name="customRadio" type="radio"/>
<label class="custom-control-label" for="customRadio2"> 或切换其他自定义收音机 </label>
</div>

排队

切换此自定义收音机

或切换其他自定义收音机

<div class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" id="customRadioInline1" name="customRadioInline1" type="radio"/>
<label class="custom-control-label" for="customRadioInline1"> 切换此自定义收音机 </label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" id="customRadioInline2" name="customRadioInline1" type="radio"/>
<label class="custom-control-label" for="customRadioInline2"> 或切换其他自定义收音机 </label>
</div>

残障人士

自定义复选框和收音机也可以禁用。 添加 disabled 的boolean属性 <input> 自定义指标和标签说明将自动设置样式。

选中此自定义复选框

切换此自定义收音机

<div class="custom-control custom-checkbox">
<input class="custom-control-input" disabled="" id="customCheckDisabled1" type="checkbox"/>
<label class="custom-control-label" for="customCheckDisabled1"> 选中此自定义复选框 </label>
</div>
<div class="custom-control custom-radio">
<input class="custom-control-input" disabled="" id="customRadioDisabled2" name="radioDisabled" type="radio"/>
<label class="custom-control-label" for="customRadioDisabled2"> 切换此自定义收音机 </label>
</div>

开关

交换机具有自定义复选框的标记,但使用 .custom-switch 类,以显示切换开关。 开关也支持 disabled 属性。

切换此开关元素

禁用的开关元件

<div class="custom-control custom-switch">
<input class="custom-control-input" id="customSwitch1" type="checkbox"/>
<label class="custom-control-label" for="customSwitch1"> 切换此开关元素 </label>
</div>
<div class="custom-control custom-switch">
<input class="custom-control-input" disabled="" id="customSwitch2" type="checkbox"/>
<label class="custom-control-label" for="customSwitch2"> 禁用的开关元件 </label>
</div>

选择菜单

习惯 <select> 菜单只需要一个自定义类, .custom-select 触发自定义样式。 自定义样式仅限于 <select> 的初始外观,无法修改 <option> 由于浏览器的限制。

打开此选择菜单 One Two 三

<select class="custom-select">
<option selected=""> 打开此选择菜单 </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> 三 </option>
</select>

您也可以从大型和大型自定义选项中进行选择,以匹配我们大小相似的文本输入。

打开此选择菜单 One Two 三 打开此选择菜单 One Two 三

<select class="custom-select custom-select-lg mb-3">
<option selected=""> 打开此选择菜单 </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> 三 </option>
</select>
<select class="custom-select custom-select-sm">
<option selected=""> 打开此选择菜单 </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> 三 </option>
</select>

The multiple 属性也受支持：

打开此选择菜单 One Two 三

<select class="custom-select" multiple="">
<option selected=""> 打开此选择菜单 </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> 三 </option>
</select>

由于是 size 属性：

打开此选择菜单 One Two 三

<select class="custom-select" size="3">
<option selected=""> 打开此选择菜单 </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> 三 </option>
</select>

范围

创建自定义 <input type="range"> 与控制 .custom-range 。轨道（背景）和拇指（值）的样式都使其在浏览器中看起来相同。 由于只有IE和Firefox支持从拇指的左侧或右侧“填充”其轨迹,以可视方式指示进度,因此我们目前不支持。

示例范围

<label for="customRange1"> 示例范围 </label>
<input class="custom-range" id="customRange1" type="range"/>

范围输入具有隐式值 min and max—0 and 100 , 分别。 您可以使用 min and max 属性。

示例范围

<label for="customRange2"> 示例范围 </label>
<input class="custom-range" id="customRange2" max="5" min="0" type="range"/>

默认情况下,范围输入“快照”为整数值。 要更改此设置,您可以指定一个 step 值。 在下面的示例中,我们通过使用 step="0.5".

示例范围

<label for="customRange3"> 示例范围 </label>
<input class="custom-range" id="customRange3" max="5" min="0" step="0.5" type="range"/>

文件浏览器

推荐使用动画制作自定义文件输入的插件： bs定制文件输入 ,这就是我们当前在文档中使用的内容。

文件输入是最讨厌的,如果您想将它们与功能连接起来,则需要额外的JavaScript 选择文件… 并选择文件名文本。

选择文件

<div class="custom-file">
<input class="custom-file-input" id="customFile" type="file"/>
<label class="custom-file-label" for="customFile"> 选择文件 </label>
</div>

我们隐藏默认文件 <input> via opacity 取而代之 <label> 。按钮生成并定位到 ::after 。最后,我们声明一个 width and height 在...上 <input> 用于周围内容的适当间距。

使用SCSS翻译或自定义字符串

The :lang() 伪类 用于允许将“浏览”文本翻译成其他语言。 覆盖或向其中添加条目 $custom-file-text Sass变量与相关 语言标签 和本地化的字符串。 可以使用相同的方式自定义英文字符串。 例如,这是一种添加西班牙语翻译的方法（西班牙语的语言代码为 es ):

这是 lang(es) 针对西班牙语翻译的自定义文件输入的操作：

Seleccionar Archivo

<div class="custom-file">
<input class="custom-file-input" id="customFileLang" lang="es" type="file"/>
<label class="custom-file-label" for="customFileLang"> Seleccionar Archivo </label>
</div>

您需要正确设置文档（或其子树）的语言,以便显示正确的文本。 这可以使用 the lang 属性 在...上 <html> 元素或 Content-Language HTTP头 ,以及其他方法。

用HTML翻译或自定义字符串

Bootstrap还提供了一种方法来翻译HTML中的“浏览”文本, data-browse 可以添加到自定义输入标签的属性（荷兰语示例）：

Voeg Je文档脚趾

<div class="custom-file">
<input class="custom-file-input" id="customFileLangHTML" type="file"/>
<label class="custom-file-label" data-browse="Bestand kiezen" for="customFileLangHTML"> Voeg Je文档脚趾 </label>
</div>