Form Bootstrap 5

Formulir terpadat

Semua elemen <input> dan <textarea> yang terpasang kelas .form-control dapat mendapatkan gaya formulir yang benar:

Example

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">Surel:</label>
    <input type="email" class="form-control" id="email" placeholder="Silakan masukkan alamat surel" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Sandi：</label>
    <input type="password" class="form-control" id="pwd" placeholder="Silakan masukkan sandi" 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">Kirim</button>
</form>

Try It Yourself

Lainnya, perhatikan bahwa kami menambahkan .form-label kelas untuk memastikan pengisian yang benar.

kotak centang memiliki tanda yang berbeda. Mereka diatur .form-check kelas elemen wadah. Label diatur .form-check-label kelas, sedangkan kotak centang dan tombol pilihan menggunakan .form-check-input。

Textarea

Example

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

Try It Yourself

baris formulir / grid (form dalam baris)

Jika Anda ingin elemen formulir ditampilkan bersampingan, gunakan .row dan .col：

Example

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Silakan masukkan alamat surel" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Silakan masukkan sandi" name="pswd">
    </div>
  </div>
</form>

Try It Yourself

Anda akan Bootstrap Grid Learn more about columns and rows in this chapter.

Form Control Sizes

You can use .form-control-lg or .form-control-sm Change .form-control Size of Input Controls:

Example

<input type="text" class="form-control form-control-lg" placeholder="Large Input Control">
<input type="text" class="form-control" placeholder="Common Input Control">
<input type="text" class="form-control form-control-sm" placeholder="Small Input Control">

Try It Yourself

Disabled and Read-only

Please use the disabled and/or readonly attributes to disable input fields:

Example

<input type="text" class="form-control" placeholder="Common Input Control">
<input type="text" class="form-control" placeholder="Disabled Input Control" disabled>
<input type="text" class="form-control" placeholder="Read-only Input Control" readonly>

Try It Yourself

Plain Text Input

Please use .form-control-plaintext Use the class to set the style of input fields without borders, but keep appropriate margins and padding:

Example

<input type="text" class="form-control-plaintext" placeholder="Plain Text Input">
<input type="text" class="form-control" placeholder="Common Input Control">

Try It Yourself

Color Picker

To correctly set the input style with type="color", please use .form-control-color Class:

Example

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

Try It Yourself