Tutorial Belajar Bootstrap Bagian 12 : Cara Membuat Input Grup di Bootstrap

Pada tutorial sebelumnya kita sudah belajar Tutorial Belajar Bootstrap Bagian 11 : Cara Membuat Kustom Formulir di Bootstrap, selanjutnya kita akan belajar cara embuat input grup di Bootstrap.

Komponen grup input bootstrap adalah komponen yang sangat fleksibel dan Tangguh untuk membuat kontrol form yang interaktif dan elegan, namun terbatas pada input tekstual saja.

Di bagian berikut, Anda akan melihat bagaimana memperluas kolom input berbasis teks dengan menambahkan teks, ikon atau tombol sebelum, sesudah, atau di kedua sisinya untuk membuat formulir Anda lebih menarik.

Membuat Prepended dan Appended Input

Grup input dibuat menggunakan class .input-group. Ini bertindak sebagai wadah untuk input dan addons.

Selanjutnya, gunakan class .input-group-prepend untuk menempatkan addons sebelum input, sedangkan gunakan class .input-group-append untuk menempatkan addons setelah input.

Selain itu, pastikan untuk membungkus teks atau ikon dalam <span> dan menerapkan class .input-group-text di atasnya untuk rendering dan style yang tepat. Coba contoh berikut untuk melihat cara kerjanya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Prepend and Append Inputs</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="row">
            <div class="col-sm-4">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <span class="fa fa-user"></span>
                        </span>                    
                    </div>
                    <input type="text" class="form-control" placeholder="Username">
                </div>
            </div>
            <div class="col-sm-4">
                <div class="input-group">            
                    <input type="text" class="form-control" placeholder="Jumlah">
                    <div class="input-group-append">
                        <span class="input-group-text">.00</span>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Rp.</span>
                    </div>
                    <input type="text" class="form-control" placeholder="Rupiah">
                    <div class="input-group-append">
                        <span class="input-group-text">.00</span>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>

Catatan: Fitur tambahan awal atau penambahan Bootstrap hanya tersedia untuk input berbasis teks. Itu tidak mendukung elemen <select> atau <textarea>.

Check Box dan Radio Button Addon

Demikian pula, Anda dapat menempatkan check box atau radio button dalam addon grup input, bukan teks.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Input groups with Checkbox and Radio Buttons</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="row">
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <input type="checkbox">
                        </span>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <input type="radio">
                        </span>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>

Menempatkan Beberapa Input atau Addons

Anda juga dapat menempatkan beberapa input secara berdampingan dalam grup input dengan mudah, seperti ini:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Menempatkan Multiple Input dalam Input Group di Bootstrap</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">Nama Anda </span>
            </div>
            <input type="text" class="form-control" placeholder="Nama depan">
            <input type="text" class="form-control" placeholder="Nama belakang">
        </div>
    </form>
</div>
</body>
</html>

Demikian pula, Anda juga dapat menempatkan beberapa addon secara berdampingan dalam grup input. Anda juga dapat mencampurnya dengan check box dan input radio, seperti yang ditunjukkan pada contoh berikut:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Menempatkan Multiple Addons dalam Input Group di Bootstrap</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="row">
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <input type="checkbox">
                        </span>
                        <span class="input-group-text">Rp.</span>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Rp.</span>
                        <span class="input-group-text">0.00</span>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>

Tombol Addons untuk Input Teks

Anda juga dapat menambahkan tombol sebagai ganti teks. Cukup, letakkan tombol sebanyak yang Anda suka dalam .input-group-prepend atau .input-group-append, seperti yang ditunjukkan di bawah ini:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Input Groups dengan Tombol</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="row">    
            <div class="col-sm-5">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search...">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-secondary">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-sm-7">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Ketik sesuatu...">
                    <div class="input-group-append">
                        <button type="submit" class="btn btn-primary">Kirim</button>
                        <button type="reset" class="btn btn-danger">Reset</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>

Menambahkan Tombol Dropdown ke Input Teks

Anda bahkan dapat menambahkan tombol dengan dropdown ke input teks, jika Anda ingin melakukan lebih dari satu tindakan dari sebuah tombol.

Selain itu, dalam kasus grup input, Anda tidak memerlukan elemen pembungkus .dropdown, yang biasanya diperlukan. Mari kita lihat contohnya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Input Groups dengan Button Dropdowns</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="row">
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item">Action</a>
                            <a href="#" class="dropdown-item">Action lainnya</a>
                        </div>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item">Action</a>
                            <a href="#" class="dropdown-item">Action lainnya</a>
                        </div>
                    </div>                
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>

Menambahkan Grup Tombol Dropdown Tersegmentasi

Demikian pula, Anda dapat menentukan grup tombol dropdown tersegmentasi di mana tombol dropdown ditempatkan di samping tombol lainnya, seperti yang ditunjukkan pada contoh berikut:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Input Group dengan Split Dropdown Button Group</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="row">
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <button type="button" class="btn btn-outline-secondary">Action</button>
                        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item">Action</a>
                            <a href="#" class="dropdown-item">Action lainnya</a>
                        </div>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-outline-secondary">Action</button>
                        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item">Action</a>
                            <a href="#" class="dropdown-item">Action lainnya</a>
                        </div>
                    </div>                
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>

Ukuran Tinggi Kelompok Input

Anda juga dapat menambahkan class ukuran bentuk relatif seperti .input-group-lg atau .input-group-sm ke elemen .input-group itu sendiri untuk membuatnya lebih besar atau lebih kecil tingginya.

Konten dalam grup .input akan secara otomatis mengubah ukuran – tidak perlu mengulang class ukuran kontrol formulir di setiap elemen. Berikut contohnya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Input Group Height Sizing</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <!-- Input group Terbesar-->
        <div class="input-group input-group-lg">
            <div class="input-group-prepend">
                <span class="input-group-text">Besar</span>
            </div>
            <input type="text" class="form-control">
        </div>
        <!-- Default input group -->
        <div class="input-group mt-2">
            <div class="input-group-prepend">
                <span class="input-group-text">Default</span>
            </div>
            <input type="text" class="form-control">
        </div>
        <!-- Input group terkecil-->
        <div class="input-group input-group-sm mt-2">
            <div class="input-group-prepend">
                <span class="input-group-text">Kecil</span>
            </div>
            <input type="text" class="form-control">
        </div>
    </form>
</div>
</body>
</html>

Semoga tutorial ini membantu Anda untuk belajar cara membuat input grup di Bootstrap.

Artikel Lainnya

0 Komentar

Kirim Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

0