Bootstrap - 浮動標籤

上一頁
下一頁

本章將討論 Bootstrap 浮動標籤。浮動標籤指的是浮在輸入欄位上方的表單標籤。

基本示例

  • 要使用 Bootstrap 的文字表單欄位啟用浮動標籤，請在 .form-floating 中包含一對 <input class="form-control"> 和 <label> 元素。

  • 每個 <input> 必須具有 placeholder，因為僅使用 CSS 的浮動標籤技術使用 :placeholder-shown 偽元素。<input> 需要放在前面以利用像 (~) 這樣的兄弟選擇器。

示例

您可以使用 編輯和執行 選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="form-floating mb-3 mt-2">
            <input type="text" class="form-control" id="floatingUsername" placeholder="tutorialspoint@example.com">
            <label for="floatingUsername">Username</label>
          </div>
          <div class="form-floating">
            <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
            <label for="floatingPassword">Password</label>
          </div>
    </body>
    </html>

當已分配值時，<label> 元素將自動對齊其位置以浮在輸入欄位上方。

示例

您可以使用 編輯和執行 選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <form class="form-floating mt-2">
            <input type="email" class="form-control" id="floatingInputValue" placeholder="tutorialspoint@example.com" value="tutorialspoint@example.com">
            <label for="floatingInputValue">Username</label>
          </form>
    </body>
    </html>

透過使用表單驗證樣式（如 is-invalid），您可以在使用者提交不正確資料時向他們提供視覺反饋。

示例

您可以使用 編輯和執行 選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <form class="form-floating">
            <input type="text" class="form-control is-invalid" id="floatingInvalidInput" placeholder="Password" value="Password">
            <label for="floatingInvalidInput">Invalid Password</label>
        </form>
    </body>
    </html>

文字區域

具有 .form-control 類的 <textarea> 的高度會自動設定為與 <input> 的高度相同。

示例

您可以使用 編輯和執行 選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Text Here" id="floatingTextarea"></textarea>
            <label for="floatingTextarea">Text Here</label>
        </div>
    </body>
    </html>

如果您想自定義 <textarea> 的高度，請不要使用 rows 屬性。而是顯式指定高度（內聯或使用自定義 CSS）。在下面的示例中，我們使用了內聯樣式。

示例

您可以使用 編輯和執行 選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Add a comment" id="floatingTextarea" style="height: 100px"></textarea>
            <label for="floatingTextarea">Add a comment</label>
        </div>
    </body>
    </html>

選擇框

  • 除了 .form-control 之外，浮動標籤也適用於 .form-selects。

  • 它們適用相同的概念，但與 <input> 不同，它們始終以浮動狀態顯示 <label>。不支援基於大小和多選的選擇框。

示例

您可以使用 編輯和執行 選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="form-floating">
            <select class="form-select" id="floatingSelect" aria-label="Floating label select menu">
              <option selected>Language</option>
              <option value="1">English</option>
              <option value="2">Hindi</option>
              <option value="3">Marathi</option>
            </select>
            <label for="floatingSelect">Others</label>
          </div>
    </body>
    </html>

停用

在輸入元素上新增 disabled 布林屬性。這會使輸入、文字區域或選擇框呈灰色。它還會刪除指標事件並阻止聚焦。

示例

您可以使用 編輯和執行 選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInputDisabled" placeholder="name" disabled>
            <label for="floatingInputDisabled">Name</label>
          </div>
          <div class="form-floating mb-3">
            <textarea class="form-control" placeholder="tutorialspoint@example.com" id="floatingEmailDisabled" disabled></textarea>
            <label for="floatingEmailDisabled">Email Id</label>
          </div>
          <div class="form-floating mb-3">
            <textarea class="form-control" placeholder="Add a comment" id="floatingTextareaDisabled" style="height: 120px" disabled></textarea>
            <label for="floatingTextareaDisabled">Add a comment</label>
          </div>
          <div class="form-floating">
            <select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
              <option selected>Select Language</option>
              <option value="1">English</option>
              <option value="2">Hindi</option>
              <option value="3">Marathi</option>
            </select>
            <label for="floatingSelectDisabled">Others</label>
          </div>
    </body>
    </html>

只讀純文字

在不更改頁面佈局的情況下，從可編輯的 <input> 切換到純文字值時，.form-control-plaintext 很有用。

示例

您可以使用 編輯和執行 選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="form-floating mb-3 mt-2">
            <input type="text" readonly class="form-control" id="floatingEmptyPlaintextInput" style="height: 80px" placeholder="Block the comment" value="Block the comment">
            <label for="floatingEmptyPlaintextInput">Block the comment</label>
          </div>
          <div class="form-floating mb-3">
            <input type="text" readonly class="form-control" id="floatingPlaintextInput" style="height: 80px" placeholder="Add a comment" value="Add a comment">
            <label for="floatingPlaintextInput">Add a comment</label>
          </div>
    </body>
    </html>

輸入組

同樣，浮動標籤支援 .input-group。

示例

您可以使用 編輯和執行 選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="input-group mb-3">
            <div class="form-floating">
              <input type="email" class="form-control" id="floatingInputGroup" placeholder="email">
              <label for="floatingInputGroup">Email Id</label>
            </div>
            <span class="input-group-text">tutorialspoint@example.com</span>
        </div>
    </body>
    </html>

當使用 .input-group 和 .form-floating 以及表單驗證時，-feedback（這是一個驗證類，用於在提交表單之前向用戶提供有價值的反饋）應位於 .form-floating 之外，但在 .input-group 之內。

示例

您可以使用 編輯和執行 選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="input-group has-validation">
            <div class="form-floating is-invalid">
            <input type="text" class="form-control is-invalid" id="floatingInputGroup" placeholder="Password" required>
            <label for="floatingInputGroup">Password</label>
            </div>
            <div class="invalid-feedback">
                Wrong Password
            </div>
        </div>
    </body>
    </html>

佈局

  • 當使用網格系統時，浮動標籤佈局的實現變得很有益，因為它能夠在列類中放置表單元素。

  • Bootstrap 中沒有預定義的類，因此我們必須利用表單類並根據我們的需求對其進行定位。

示例

您可以使用 編輯和執行 選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap - Floating Labels</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="row g-2">
            <div class="col-md">
              <div class="form-floating">
                <input type="email" class="form-control" id="floatingGrid" placeholder="tutorialspoint@example.com" value="tutorialspoint@example.com">
                <label for="floatingGrid">Email Id</label>
              </div>
            </div>
            <div class="col-md">
              <div class="form-floating">
                <select class="form-select" id="floatingSelectGrid">
                  <option selected>Language</option>
                  <option value="1">English</option>
                  <option value="2">Hindi</option>
                  <option value="3">Marathi</option>
                </select>
                <label for="floatingSelectGrid">Others</label>
              </div>
            </div>
          </div>
    </html>
列印頁面
上一頁
下一頁
廣告