Bootstrap5 表單浮動(dòng)標(biāo)簽

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

使用浮動(dòng)標(biāo)簽，可以在 input 輸入框內(nèi)插入標(biāo)簽，在單擊 input 輸入框時(shí)使它們浮動(dòng)到上方

Bootstrap 實(shí)例

<
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
>

嘗試一下 ?

注意事項(xiàng)： 元素必須在 元素之后，并且每個(gè) 元素都需要 placeholder 屬性。

文本框

文本框 textarea 也可以有浮動(dòng)效果：

Bootstrap 實(shí)例

<
div

class
=
"
form-floating
"
>

<
textarea

class
=
"
form-control
"

id
=
"
comment
"

name
=
"
text
"

placeholder
=
"
Comment goes here
"
>
textarea
>

<
label

for
=
"
comment
"
>
Comments
label
>

div
>

嘗試一下 ?

選擇框

我們可以在選擇菜單上使用浮動(dòng)標(biāo)簽，它將始終顯示在選擇菜單的左上角，不會(huì)有點(diǎn)擊浮動(dòng)效果：

Bootstrap 實(shí)例

<
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
>

嘗試一下 ?

文章標(biāo)題：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5表單浮動(dòng)標(biāo)簽
文章鏈接：http://m.fisionsoft.com.cn/article/dhdphjj.html