Bootstrap-v5-表单(浮动标签)
一、浮动标签(Floating labels)
1、浮动标签
- .form-floating
<div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">Email address</label> </div> <div class="form-floating"> <input type="password" class="form-control" id="floatingPassword" placeholder="Password"> <label for="floatingPassword">Password</label> </div>
2、浮动标签(带值)
- .form-floating
- value
<form class="form-floating"> <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com"> <label for="floatingInputValue">Input with value</label> </form>
3、浮动标签(带效果)
<form class="form-floating"> <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com"> <label for="floatingInputInvalid">Invalid input</label> </form>
二、浮动文本域(Textareas)
1、浮动文本域(基本)
-
floatingTextarea
<div class="form-floating"> <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea> <label for="floatingTextarea">Comments</label> </div>
2、浮动文本域(自定义高度)
floatingTextarea
- height
<div class="form-floating"> <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea> <label for="floatingTextarea2">Comments</label> </div>
三、浮动选项框(Selects)
1、浮动下拉选项
-
floatingSelect
<div class="form-floating"> <select class="form-select" id="floatingSelect" aria-label="Floating label select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <label for="floatingSelect">Works with selects</label> </div>
四、浮动布局(Layout)
1、浮动文本域和浮动下拉选项一起配合使用
<div class="row g-2"> <div class="col-md"> <div class="form-floating"> <input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com"> <label for="floatingInputGrid">Email address</label> </div> </div> <div class="col-md"> <div class="form-floating"> <select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <label for="floatingSelectGrid">Works with selects</label> </div> </div> </div>