Bootstrap - Formulir Demo
Bentuk Tata Letak
Bootstrap memberi Anda jenis tata letak formulir berikut -
- Bentuk vertikal (default)
- Bentuk sebaris
- Bentuk horizontal
Bentuk Vertikal atau Dasar
Struktur bentuk dasar dilengkapi dengan Bootstrap; kontrol bentuk individu secara otomatis menerima beberapa gaya global. Untuk membuat formulir dasar lakukan hal berikut -
Tambahkan formulir peran ke elemen <form> induk.
Bungkus label dan kontrol dalam <div> dengan class .form-group . Ini diperlukan untuk jarak optimal.
Tambahkan kelas .form-control ke semua elemen <input>, <textarei>, dan <select> tekstual.
Formulir Inline
Untuk membuat formulir yang semua elemennya sejajar, rata kiri, dan label berada di sampingnya, tambahkan kelas .form-inline ke tag <form>.
Bentuk Horizontal
Bentuk horizontal berdiri terpisah dari yang lain tidak hanya dalam jumlah markup, tetapi juga dalam penyajian formulir. Untuk membuat formulir yang menggunakan tata letak horizontal, lakukan hal berikut -
Tambahkan kelas .form-horizontal ke elemen <form> induk.
Bungkus label dan kontrol dalam <div> dengan class .form-group .
Tambahkan kelas .control-label ke label.
| Contoh | Deskripsi | Tautan unduhan |
|---|---|---|
| Halaman masuk | Contoh ini menunjukkan tentang struktur halaman login di Bootstrap | Unduh |
| Halaman kontak | Contoh ini menunjukkan tentang struktur halaman Kontak di Bootstrap | Unduh |
| Halaman Daftar | Contoh ini menunjukkan tentang struktur halaman Daftar di Bootstrap | Unduh |