Form Bootstrap 5

Bentuk Borang Ditarik

Semua elemen <input> dan <textarea> yang disediakan dengan kelas .form-control boleh mendapatkan gaya bentuk bentuk borang yang betul：

Contoh

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">E-mel：</label>
    <input type="email" class="form-control" id="email" placeholder="Sila masukkan alamat e-mel" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Kata laluan：</label>
    <input type="password" class="form-control" id="pwd" placeholder="Sila masukkan kata laluan" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Ingat saya
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Hantar</button>
</form>

Coba Sendiri

Di samping itu, sila perhatikan bahawa kami telah menambahkan .form-label kelas untuk memastikan pengisian yang betul.

Kotak centang memiliki tanda yang berbeza. Mereka diatur .form-check kelas elemen wadah. label diatur .form-check-label kelas, manakala kotak centang dan pilihan tunggal menggunakan .form-check-input。

Textarea

Contoh

<label for="comment">Komen：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

Coba Sendiri

Baris formulir / Grid (form baris)

Jika anda mahu papar elemen formulir bersusun paralel, sila gunakan .row dan .col：

Contoh

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Sila masukkan alamat e-mel" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Sila masukkan kata laluan" name="pswd">
    </div>
  </div>
</form>

Coba Sendiri

Anda akan Bootstrap Grid Pelajari lebih banyak tentang baris dan kolom di bab ini.

Saiz Kawalan Borang

Anda boleh .form-control-lg atau .form-control-sm Ubah .form-control Saiz kawalan input:

Contoh

<input type="text" class="form-control form-control-lg" placeholder="Kawalan Input Besar">
<input type="text" class="form-control" placeholder="Kawalan Input Biasa">
<input type="text" class="form-control form-control-sm" placeholder="Kawalan Input Kecil">

Coba Sendiri

Dikunci dan Bacaan

Gunakan atribut disabled dan/atau readonly untuk menghalang medan input:

Contoh

<input type="text" class="form-control" placeholder="Kawalan Input Biasa">
<input type="text" class="form-control" placeholder="Kawalan Input Dikunci" disabled>
<input type="text" class="form-control" placeholder="Kawalan Input Bacaan" readonly>

Coba Sendiri

Input Teks Penuh

Gunakan .form-control-plaintext Gaya kawalan medan input tanpa garis, tetapi mempertahankan marjin luar dan marjin dalaman yang sesuai:

Contoh

<input type="text" class="form-control-plaintext" placeholder="Input Teks Penuh">
<input type="text" class="form-control" placeholder="Kawalan Input Biasa">

Coba Sendiri

Pemilih Warna

Untuk mengatur gaya input type="color" dengan benar, gunakan .form-control-color Kelas:

Contoh

<input type="color" class="form-control form-control-color" value="#CCCCCC">

Coba Sendiri