Bootstrap - 表單控制元件

上一頁
下一頁

本章將討論 Bootstrap 表單控制元件。可以使用自定義樣式、大小、焦點狀態和其他功能來升級文字表單控制元件，例如<input>和<textarea>。

基本示例

使用.form-control和.form-label類來設定表單控制元件的樣式。

示例

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</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="mb-3">
      <label for="formControlName" class="form-label">Full Name</label>
      <input type="text" class="form-control" id="formControlName" placeholder="name">
    </div>
    <div class="mb-3">
      <label for="formControlEmail" class="form-label">Email id</label>
      <input type="text" class="form-control" id="formControlEmail" placeholder="tutorialspoint@example.com">
    </div>
    <div class="mb-3">
      <label for="formControlTextarea" class="form-label">Add a comment</label>
      <textarea class="form-control" id="formControlTextarea" rows="3"></textarea>
    </div>
    <button type="submit" class="btn btn-success">Submit</button>
  </body>
  </html>

大小

使用.form-control-lg和.form-control-sm之類的類來指定表單輸入欄位的大小。

示例

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</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>
    <input class="form-control  form-control-lg mt-2" type="text" placeholder="Large size input box" aria-label=".form-control-lg example">
    <input class="form-control  mt-2" type="text" placeholder="Default size input box" aria-label="default input example">
    <input class="form-control  form-control-sm  mt-2" type="text" placeholder="Small size input box" aria-label=".form-control-sm example">
  </body>
  </html>

表單文字

  • 使用.form-text建立塊級或內聯級表單文字。

  • 添加了頂部邊距，以便輕鬆地將輸入與塊級元素分開。

使用aria-labelledby或aria-describedby屬性將表單文字與表單控制元件關聯，以確保輔助技術（如螢幕閱讀器）能夠宣佈它。

示例

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</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>
    <label for="inputUsername" class="form-label mt-2">Username</label>
    <input type="text" id="inputUsername" class="form-control" aria-labelledby="UsernameHelpBlock">
    <div id="UsernameHelpBlock" class="form-text">
      Your username 6–20 characters long and can be any combination of letters, numbers or symbols.
    </div>
    <label for="inputPassword" class="form-label mt-2">Password</label>
    <input type="text" id="inputPassword" class="form-control" aria-labelledby="PasswordHelpBlock">
    <div id="PasswordHelpBlock" class="form-text">
      must be 6-20 characters long.
    </div>

    <button type="submit" class="btn btn-primary mt-2">Submit</button>
  </body>
  </html>

內聯文字可以使用任何典型的內聯HTML元素（例如，<span>，<small>……等等），只需.form-text類。

示例

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</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-3 align-items-center mt-2">
      <div class="col-auto">
        <label for="inputUsername" class="col-form-label">Username</label>
      </div>
      <div class="col-auto">
        <input type="text" id="inputUsername" class="form-control" aria-labelledby="usernameHelpInline">
      </div>
      <div class="col-auto">
        <span id="usernameHelpInline" class="form-text">
          Username 6–20 characters long.
        </span>
      </div>
    </div>
  </body>
  </html>

停用

要獲得灰顯外觀並移除指標事件，請對輸入使用disabled屬性。

示例

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</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>
    <input class="form-control mt-2" type="text" placeholder="Disable Input Field" aria-label="Disabled input example" disabled>
  </body>
  </html>

只讀

使用readonly屬性可以防止更改輸入的值。

示例

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</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>
    <input class="form-control mt-2" type="text" value="Tutorialspoint" aria-label="readonly example" readonly>
  </body>
  </html>

只讀純文字

.form-control-plaintext將只讀輸入欄位建立為純文字。這將移除樣式並保留正確的邊距和填充。

示例

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</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="mb-3 row">
      <label for="name" class="col-sm-2 col-form-label">Name</label>
      <div class="col-sm-3">
        <input type="text" readonly class="form-control-plaintext" id="name" value="Tutorialspoint">
      </div>
    </div>
    <div class="mb-3 row">
      <label for="bootstrap" class="col-sm-2 col-form-label">Language</label>
      <div class="col-sm-3">
        <input type="text" class="form-control" id="bootstrap" placeholder="Bootstrap">
      </div>
    </div>
  </body>
  </html>

在只讀純文字內聯中，您可以使表單標籤和輸入以內聯方式水平顯示。

示例

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</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="row g-2 mt-2">
      <div class="col-auto">
        <input type="text" readonly class="form-control-plaintext" id="staticName" value="Tutorialspoint">
      </div>
      <div class="col-auto">
        <input type="text" class="form-control" id="inputLanguage" placeholder="Bootstrap">
      </div>
    </form>
  </body>
  </html>

檔案輸入

檔案輸入用於瀏覽計算機上的檔案作為輸入。

使用大小的檔案輸入

  • 使用.form-control-sm可以減小檔案輸入的大小。

  • 使用.form-control-lg可以增大檔案輸入的大小。

示例

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</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="mb-3">
      <label for="fileInputsm" class="form-label">Small size file input</label>
      <input class="form-control form-control-sm" id="fileInputsm" type="file">
    </div>
    <div>
      <label for="fileInputlg" class="form-label">Large size file input</label>
      <input class="form-control form-control-lg" id="fileInputlg" type="file">
    </div>
  </body>
  </html>

使用屬性的檔案輸入

  • 無需顯式定義default屬性。

  • 使用disabled屬性將獲得灰顯外觀並移除指標事件。

  • 可以使用multiple屬性一次接受多個檔案輸入。

示例

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</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="mb-3">
      <label for="defaultFileInput" class="form-label">Default file input</label>
      <input class="form-control" type="file" id="defaultFileInput">
    </div>
    <div class="mb-3">
      <label for="disabledFileInput" class="form-label">Disabled file input</label>
      <input class="form-control" type="file" id="disabledFileInput" disabled>
    </div>
    <div class="mb-3">
      <label for="multipleFileInput" class="form-label">Multiple files input</label>
      <input class="form-control" type="file" id="multipleFileInput" multiple>
    </div>
  </body>
  </html>

顏色

在<input>元素中使用.form-control-color類和type="color"屬性可以為輸入欄位新增顏色。

示例

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</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>
    <label for="colorInput" class="form-label">Select a color</label>
    <input type="color" class="form-control form-control-color" id="colorInput" value="#228b22">
  </body>
  </html>

資料列表

您可以建立一個<option>組，可以使用資料列表從<input>訪問這些組。瀏覽器和作業系統為<datalist>元素提供的樣式有限且不一致。

示例

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form Control</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>
    <label for="dataList" class="form-label">Languages</label>
    <input class="form-control" list="datalistOptions" id="dataList" placeholder="Search languages...">
    <datalist id="datalistOptions">
      <option value="Bootstrap">
      <option value="HTML">
      <option value="CSS">
    </datalist>
  </body>
  </html>
列印頁面
上一頁
下一頁
廣告