Bootstrap 5 表單浮動標籤
浮動標籤 / 動態標籤
預設情況下，使用標籤時，它們通常顯示在輸入欄位的上方
透過使用浮動標籤，您可以將標籤插入到輸入欄位內部，並在您點選輸入欄位時使其浮動/動態化
示例
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" id="email" placeholder="請輸入郵箱" name="email">
<label for="email">郵箱</label>
</div>
<div class="form-floating mt-3 mb-3">
<input type="text" class="form-control" id="pwd" placeholder="請輸入密碼" name="pswd">
<label for="pwd">密碼</label>
</div>
自己動手試一試 »
關於浮動標籤的說明： <label> 元素必須放在 <input> 元素之後，並且每個 <input> 元素都需要 placeholder 屬性（即使它不顯示）。
Textarea
這同樣適用於文字區域 (textarea)
示例
<div class="form-floating">
<textarea class="form-control" id="comment" name="text" placeholder="在此處輸入評論"></textarea>
<label for="comment">評論</label>
</div>
自己動手試一試 »
選擇選單
您也可以在選擇選單中使用“浮動標籤”。但是，它們不會浮動/動態化。標籤將始終顯示在選擇選單內部的左上角
示例
<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">選擇列表（選擇一個）：</label>
</div>
自己動手試一試 »
