Bootstrap 5 浮动标签

“form-floating”用于在 Bootstrap 5 版本中启用带有文本表单字段的浮动标签。 Bootstrap 5 浮动标签是在输入字段内以完整字体大小显示的文本标签。标签在交互时“浮动”在输入字段上方，允许用户输入值。

Bootstrap 5 浮动标签指示字段所需的输入类型。除了使用输入占位符属性的全角文本字段外，每个文本字段和选择字段都应具有标签。标签始终可见并与输入行对齐。它们可以浮动或静止。标签是文本字段的文本描述或标题。

默认浮动标签

Bootstrap 5 浮动标签也称为动画标签。在“.form-floating”类中包含一对 <input class = "form-control"> 和 <label> 组件，以使用 Bootstrap 的文本字段输入启用浮动标签。占位符用于浮动标签中的 CSS 样式。

语法

以下语法显示了如何创建默认浮动或动画标签。

示例

以下示例在 <div> 标签中使用“form-floating”类。<input> 和 <label> 标签分别用于插入数据和显示动画标签。这里，示例显示了“input”标签中的“text”类型，但我们可以使用 email、number 和其他输入类型。

输出

下图显示了 bootstrap 5 浮动标签的输出。

示例

以下示例在 <div> 标签中使用“form-floating”类。<input> 标签用于将数据插入数据库，<label> 标签用于在表单中显示动画标签。

• 第一个浮动标签元素在表单中一起使用“占位符”关键字和 <label> 标签。
• 第二个浮动标签功能不使用占位符关键字，但使用 <label> 标签。
• 第三个浮动标签功能不使用 <label> 标签。标签标签就像输入标签中的占位符。

输出

下图显示了 bootstrap 5 浮动标签的输出。

Textarea 使用浮动标签。

Bootstrap 5 浮动标签也称为动画标签。在“.form-floating”类中包含一对 <textarea class = "form-control"> 和 <label> 组件，以使用 Bootstrap 的文本字段输入启用浮动标签。占位符用于 bootstrap5 浮动标签中的 CSS 样式。

语法

以下语法显示了如何在 textarea 功能中创建浮动标签。

示例

以下示例在 <div> 标签中使用“form-floating”类。<textarea> 和 <label> 标签分别用于插入大尺寸数据和显示动画标签。

输出

• textarea 中的第一个浮动标签使用“占位符”关键字和 <label> 标签。
• textarea 中的第二个浮动标签不使用占位符关键字。
• textarea 中的第三个浮动标签不使用 <label> 标签。

输出

下图显示了 bootstrap 5 浮动标签的输出。

选择菜单使用浮动标签。

在“.form-floating”类中使用 <select class = "form-control"> 和 <option> 标签。此浮动标签类使用 Bootstrap 的输入元素启用浮动标签。<label> 标签用于在选择菜单中显示标签。<select> 标签显示输入选项卡，<option> 标签显示输入数据的值。

语法

以下语法显示了如何在选择标签功能中创建浮动标签。

示例

以下示例在 <div> 标签中显示带有选择菜单的“form-floating”类。<select>、<option> 和 <label> 标签分别用于显示输入选项卡、从选项数据中选择数据和显示动画标签。

输出

下图显示了 bootstrap 5 浮动标签的输出。

结论

bootstrap 5 类很容易创建一个动画标签。bootstrap 5 版本浮动标签用于网页中的动画占位符和输入元素。它有助于在网页上制作一个交互式、用户友好且有吸引力的表单。