Cara Membuat Form dan Input pada Bootstrap

Cara Membuat Form dan Input pada Bootstrap – Bertemu lagi! Pada artikel sebelumnya kita telah membahas tentang Cara Membuat List Group pada Bootstrap. Seperti biasa, kita akan mempelajari berbagai macam komponen Bootstrap. Pada artikel kali ini kita akan membahas tentang Form dan Input pada Bootstrap. Yep, dua elemen sekaligus! Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau masukan dari pengguna yang kemudian akan diproses atau diolah untuk dapat digunakan sesuai dengan kebutuhan. Contohnya proses pengiriman data, browse, hapus, penyuntingan data dan lain sebagainya.

Mengenal Form dan Input pada Bootstrap

malasngoding.com

Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form> dan diakhiri dengan </form>. Tag form akan membutuhkan beberapa atribut untuk dapat berfungsi dengan seharusnya.

Tag input merupakan tag paling banyak digunakan di dalam form dan memiliki banyak bentuk, mulai dari isian text biasa, text password, checkbox, radio, sampai dengan tombol submit, semuanya dalam bentuk tag <input>.

Pengaturan Default Bootstrap

Seperti biasa, Bootstrap memiliki tampilan default untuk komponen mereka. Semua tekstual <input>, <textarea>, dan <select> elemen dengan class .form-control memiliki lebar 100%.

Cara Membuat Form dan Input pada Bootstrap

Bootstrap menyediakan tiga jenis layout bentuk:

• Bentuk Vertikal (default).
• Bentuk Inline.

Aturan default untuk tiga layout diatas adalah:

• Selalu gunakan <form role="form"> (membantu meningkatkan aksesibilitas untuk orang-orang menggunakan pembaca layar).
• Bungkus label dan bentuk kontrol di <div class="form-group"> (diperlukan untuk jarak optimal).
• Menambahkan kelas .form-control untuk semua tekstual <input> , <textarea>, dan <select>elemen.

Membuat Form Vertikal

Sebagai contoh, kita akan buat form untuk login. Buat file HTML lalu pastekan kode berikut,

1. <form role="form">
2. <div class="form-group">
3. <label for="email">Email address:</label>
4. <input type="email" class="form-control" id="email">
5. </div>
6. <div class="form-group">
7. <label for="pwd">Password:</label>
8. <input type="password" class="form-control" id="pwd">
9. </div>
10. <div class="checkbox">
11. <label><input type="checkbox"> Remember me</label>
12. </div>
13. <button type="submit" class="btn btn-default">Submit</button>
14. </form>

Form Inline pada Bootstrap

Dalam bentuk inline, semua elemen yang inline, rata kiri, dan label bersama. Aturan dalam penggunaan form inline pada Bootstrap adalah:

• Menambahkan kelas .form-inline kedalam elemen <form>.

Sekarang kita buat contoh yang sama dengan form vertikal. Pastekan kode berikut kedalam file HTML kalian,

1. <form class="form-inline" action="/action_page.php">
2. <label for="email" class="mr-sm-2">Email address:</label>
3. <input type="email" class="form-control mb-2 mr-sm-2" id="email">
4. <label for="pwd" class="mr-sm-2">Password:</label>
5. <input type="password" class="form-control mb-2 mr-sm-2" id="pwd">
6. <div class="form-check mb-2 mr-sm-2">
7. <label class="form-check-label">
8. <input class="form-check-input" type="checkbox"> Remember me
9. </label>
10. </div>
11. <button type="submit" class="btn btn-primary mb-2">Submit</button>
12. </form>

Sekian artikel tentang Cara Membuat Form dan Input pada Bootstrap. Apabila ada yang ingin ditanyakan, silahkan tinggalkan komentar dibawah. Semoga bermanfaat dan sampai jumpa!

Sumber: https://codelatte.org