mengenal form-control di bootsrap

 Bootstrap adalah salah satu framework CSS yang paling populer digunakan dalam pengembangan web. Bootstrap menyediakan berbagai komponen yang siap pakai untuk memudahkan pengembang dalam membuat tampilan web yang responsif dan estetis.

Salah satu komponen yang sering digunakan dalam pembuatan form pada Bootstrap adalah form-control. Form-control merupakan kelas CSS yang digunakan untuk membuat tampilan input pada form yang konsisten dan mudah diakses oleh pengguna.

Penggunaan form-control

Untuk menggunakan form-control pada Bootstrap, kita perlu menambahkan kelas form-control pada elemen input, select, atau textarea. Berikut adalah contoh penggunaan form-control pada input type teks:

python
<label for="exampleFormControlInput1" class="form-label">Input</label>
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Masukkan input">

Dalam contoh di atas, kita menambahkan kelas form-control pada elemen input type teks, sehingga tampilan input akan berubah menjadi lebih estetis dan responsif.

Penggunaan form-control pada select

Selain input type teks, kita juga dapat menggunakan form-control pada elemen select. Berikut adalah contoh penggunaan form-control pada select:

php
<label for="exampleFormControlSelect1" class="form-label">Pilih</label>
<select class="form-control" id="exampleFormControlSelect1">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
</select>

Dalam contoh di atas, kita menambahkan kelas form-control pada elemen select, sehingga tampilan select akan berubah menjadi lebih estetis dan responsif.

Penggunaan form-control pada textarea

Kita juga dapat menggunakan form-control pada elemen textarea. Berikut adalah contoh penggunaan form-control pada textarea:

php
<label for="exampleFormControlTextarea1" class="form-label">Textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>

Dalam contoh di atas, kita menambahkan kelas form-control pada elemen textarea, sehingga tampilan textarea akan berubah menjadi lebih estetis dan responsif.

Validasi form dengan form-control

Kita dapat menambahkan fitur validasi form di Bootstrap dengan menggunakan form-control. Bootstrap menyediakan beberapa kelas CSS yang dapat digunakan untuk menunjukkan status validasi form, seperti is-valid dan is-invalid.

Berikut adalah contoh penggunaan kelas is-valid dan is-invalid di Bootstrap:

python
<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control is-invalid" id="exampleFormControlInput1" placeholder="name@example.com" required>
  <div class="invalid-feedback">
    Please provide a valid email address.
  </div>
</div>
<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Password</label>
  <input type="password" class="form-control is-valid" id="exampleFormControlInput1" placeholder="Password" required>
  <div class="valid-feedback">
    Password is strong.
  </div>
</div>

Kelas is-valid digunakan untuk menunjukkan bahwa input pada form telah valid, sedangkan kelas is-invalid digunakan untuk menunjukkan bahwa input pada form tidak valid. Pada contoh di atas, kita menggunakan kelas is-invalid untuk menunjukkan bahwa input email tidak valid dan kelas is-valid untuk menunjukkan bahwa input password telah valid.

Kesimpulan

Dalam pengembangan web, form adalah salah satu elemen yang sering digunakan untuk mengambil input dari pengguna. Bootstrap menyediakan komponen form-control yang sangat berguna dalam pembuatan form yang responsif dan estetis.

Dalam penggunaannya, kita perlu menambahkan kelas form-control pada elemen input, select, atau textarea yang ingin kita gunakan dalam form. Kita juga dapat menambahkan fitur validasi form dengan menggunakan kelas is-valid dan is-invalid di Bootstrap.

Dengan menggunakan form-control di Bootstrap, kita dapat membuat tampilan form yang konsisten, mudah diakses oleh pengguna, dan memiliki fitur validasi form yang berguna.