Bootstrap5 表單浮動標簽

默認情況下，標簽內(nèi)容一般顯示在 input 輸入框的上方：

使用浮動標簽，可以在 input 輸入框內(nèi)插入標簽，在單擊 input 輸入框時使它們浮動到上方

Bootstrap 實例

<
div

class
=
"
form-floating mb-3 mt-3
"
>

<
input

type
=
"
text
"

class
=
"
form-control
"

id
=
"
email
"

placeholder
=
"
Enter email
"

name
=
"
email
"
>

<
label

for
=
"
email
"
>
Email
label
>

div
>

<
div

class
=
"
form-floating mt-3 mb-3
"
>

<
input

type
=
"
text
"

class
=
"
form-control
"

id
=
"
pwd
"

placeholder
=
"
Enter password
"

name
=
"
pswd
"
>

<
label

for
=
"
pwd
"
>
Password
label
>

div
>

嘗試一下 ?

注意事項： 元素必須在 元素之后，并且每個 元素都需要 placeholder 屬性。

文本框

文本框 textarea 也可以有浮動效果：

Bootstrap 實例

<
div

class
=
"
form-floating
"
>

<
textarea

class
=
"
form-control
"

id
=
"
comment
"

name
=
"
text
"

placeholder
=
"
Comment goes here
"
>
textarea
>

<
label

for
=
"
comment
"
>
Comments
label
>

div
>

嘗試一下 ?

選擇框

我們可以在選擇菜單上使用浮動標簽，它將始終顯示在選擇菜單的左上角，不會有點擊浮動效果：

Bootstrap 實例

<
div

class
=
"
form-floating
"
>

<
select

class
=
"
form-select
"

id
=
"
sel1
"

name
=
"
sellist
"
>

<
option
>
1
option
>

<
option
>
2
option
>

<
option
>
3
option
>

<
option
>
4
option
>

select
>

<
label

for
=
"
sel1
"

class
=
"
form-label
"
>
Select list (select one):
label
>

div
>

嘗試一下 ?

分享標題：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5表單浮動標簽
文章起源：http://m.5511xx.com/article/dhdphjj.html