Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
Check
in English

Nhãn nổi

Tạo các nhãn biểu mẫu đơn giản đẹp mắt nổi trên các trường đầu vào của bạn.

Trên trang này

Thí dụ

Bọc một cặp <input class="form-control">và <label>các phần tử vào .form-floatingđể kích hoạt nhãn nổi với các trường dạng văn bản của Bootstrap. A placeholderlà bắt buộc trên mỗi <input>nhãn vì phương pháp nhãn nổi chỉ CSS của chúng tôi sử dụng :placeholder-shownphần tử giả. Cũng lưu ý rằng cái <input>phải đến trước để chúng ta có thể sử dụng bộ chọn anh chị em (ví dụ ~:).

html 
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <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>

Khi có một giá valuetrị đã được xác định, <label>s sẽ tự động điều chỉnh về vị trí thả nổi của chúng.

html 
<form class="form-floating">
  <input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputValue">Input with value</label>
</form>

Các kiểu xác thực biểu mẫu cũng hoạt động như mong đợi.

html 
<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputInvalid">Invalid input</label>
</form>

Textareas

Theo mặc định, <textarea>s với .form-controlsẽ có cùng chiều cao với <input>s.

html 
<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

Để đặt chiều cao tùy chỉnh trên của bạn <textarea>, không sử dụng rowsthuộc tính. Thay vào đó, hãy đặt một cách rõ ràng height(nội tuyến hoặc qua CSS tùy chỉnh).

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

Lựa chọn

Ngoài .form-controlra, nhãn nổi chỉ có sẵn trên .form-selects. Chúng hoạt động theo cùng một cách, nhưng không giống như <input>s, chúng sẽ luôn hiển thị <label>ở trạng thái thả nổi. Các lựa chọn có sizevà multiplekhông được hỗ trợ.

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

Bản rõ chỉ đọc

Các nhãn nổi cũng hỗ trợ .form-control-plaintext, có thể hữu ích để chuyển từ giá trị có thể chỉnh sửa <input>sang giá trị văn bản rõ ràng mà không ảnh hưởng đến bố cục trang.

html 
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]">
  <label for="floatingEmptyPlaintextInput">Empty input</label>
</div>
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]">
  <label for="floatingPlaintextInput">Input with value</label>
</div>

Nhóm đầu vào

Nhãn nổi cũng hỗ trợ .input-group.

@
html 
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <div class="form-floating">
    <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
    <label for="floatingInputGroup1">Username</label>
  </div>
</div>

Khi sử dụng .input-groupvà .form-floatingcùng với xác thực biểu mẫu, dấu -feedbackphải được đặt bên ngoài .form-floating, nhưng bên trong .input-group. Điều này có nghĩa là phản hồi sẽ cần được hiển thị bằng javascript.

@
Vui lòng chọn một tên người dùng.
html 
<div class="input-group has-validation">
  <span class="input-group-text">@</span>
  <div class="form-floating is-invalid">
    <input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
    <label for="floatingInputGroup2">Username</label>
  </div>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Cách trình bày

Khi làm việc với hệ thống lưới Bootstrap, hãy đảm bảo đặt các phần tử biểu mẫu trong các lớp cột.

html 
<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]" value="[email protected]">
      <label for="floatingInputGrid">Email address</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <select class="form-select" id="floatingSelectGrid">
        <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>

Sass

Biến

$form-floating-height:            add(3.5rem, $input-height-border);
$form-floating-line-height:       1.25;
$form-floating-padding-x:         $input-padding-x;
$form-floating-padding-y:         1rem;
$form-floating-input-padding-t:   1.625rem;
$form-floating-input-padding-b:   .625rem;
$form-floating-label-opacity:     .65;
$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out;