search

Cara menggunakan bootstrap 4 radio button

1 years ago
Komentar: 0
Dibaca: 196

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.

Show

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/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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:

kode bootstrap

Pos Terkait

Cara menggunakan phpmyadmin terminal command
Cara menggunakan phpmyadmin terminal command

Bagaimana Anda melakukan operasi array dalam javascript?
Bagaimana Anda melakukan operasi array dalam javascript?

Cara mengubah html ke mp4
Cara mengubah html ke mp4

Bagaimana cara memperbaiki koneksi yang hilang ke server mysql selama permintaan?
Bagaimana cara memperbaiki koneksi yang hilang ke server mysql selama permintaan?

Cara memasukkan file css dan js eksternal di laravel 8
Cara memasukkan file css dan js eksternal di laravel 8

Cara membandingkan dua kolom di excel menggunakan python
Cara membandingkan dua kolom di excel menggunakan python

Bagaimana urutan dibuat di mysql?
Bagaimana urutan dibuat di mysql?

Cara mengenkripsi bidang di mysql
Cara mengenkripsi bidang di mysql

Apa gunanya array_keys di php?
Apa gunanya array_keys di php?

Python atau java untuk pengembangan game
Python atau java untuk pengembangan game

Periklanan

BERITA TERKINI

Apakah fungsi data cleaning dalam python?
1 years ago . by UndiscoveredDucking
Cara cek kartu kredit bca aktif atau tidak
1 years ago . by MythicalCoverage
Cara menggunakan setcookie not working javascript
1 years ago . by DrabServitude
Cara menggunakan fungsi struktur html
1 years ago . by ParticipatingAdvert
Which MySQL edition used for physical backup?
1 years ago . by HeedlessLikeness
Php imagemagick pdf ke png kualitas tinggi
1 years ago . by QuietRegularity
Cara menggunakan python raise typeerror
1 years ago . by DifficultImmunization
Cara mengisi game di ps 3
1 years ago . by VeterinaryReviewer
Bagaimana Anda memeriksa apakah saya sudah menginstal mysql?
1 years ago . by PriestlyDonkey
Mengapa gambar tidak ditampilkan di html?
1 years ago . by High-qualityWidget

Toplist Popular

#1
Top 7 os elementos da paisagem descritos no texto correspondem a aspectos biogeográficos presentes na 2022
1 years ago
#2
Top 6 a energia nuclear é uma alternativa aos combustíveis fósseis que, se não gerenciada de forma correta 2022
1 years ago
#3
Top 6 a persistência das reivindicações relativas à aplicação desse preceito normativo tem em vista 2022
1 years ago
#4
Top 7 wie viele zigaretten sind ein shisha kopf 2022
2 years ago
#5
Top 7 wie viel kostet eine badewanne voll wasser 2022
2 years ago
#6
Top 8 golf 7 standheizung fernbedienung anlernen 2022
2 years ago
#7
Top 8 sky receiver aufnehmen nicht möglich ohne abo 2022
2 years ago
#8
Top 5 einhell kgsz 300 ug sägeblatt wechseln 2022
2 years ago
#9
Top 7 renault clio 3 abblendlicht wechseln anleitung 2022
2 years ago
#10
Top 8 outlook diese datendatei ist mit einem e-mail-konto verbunden 2022
2 years ago

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social

homeentrdeptjp
Copyright © 2024 membukakan Inc.