Selamat datang di tutorial warungbelajar, masih dalam seri tutorial bootstrap 4, dalam tutorial kali ini kita akan membahas mengenai cara mengatur tampilan form dengan menggunakan bootstrap. Form adalah elemen yang sangat penting yang ada dalam aplikasi berbasis web, dimana dengan form ini user dalam melakukan interaksi dengan aplikasi, seperti proses input edit dll. Baik kita mulai saja beberapa hal yang bisa digunakan untuk mengatur tampilan form dengan menggunakan bootstrap 4
Layout Form pada Bootstrap 4Bootstrap 4 memberikan 2 pilihan layout yang bisa digunakan untuk mengatur tampilan dari form, layout tersebut antara lain :
kita akan bahas satu – persatu untuk layout form tersebut.
Stacked (full-width) fromJenis layout ini digunakan untuk menampilkan form dengan tampilan full-width, istilah full width disini adalah menggunakan keseluruhan ukuran lebar untuk menampilkan form, untuk contoh penggunaan dari layout ini perhatikan skrip dibawah ini : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <!DOCTYPE html> <html lang="en"> <head> <title>Full Width Form</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="card"> <div class="card-header bg-primary text-white">Register Form</div> <div class="card-body"> <form action="action.php"> <div class="form-group"> <label for="nama">Nama</label> <input type="text" class="form-control" id="nama"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="Password"> </div> <button type="submit" class="btn btn-primary">Register</button> </form> </div> </div> </div> </body> </html> Semisal kita simpan dengan nama full_width_form.html, lalu kita buka di browser maka hasilnya adalah :  Keterangan :
Inline Form BootstrapInline Form ini digunakan untuk membuat layout form secara horizontal, jadi form akan ditampilkan secara mendatar, untuk contohnya perhatikan skrip dibawah ini : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <!DOCTYPE html> <html lang="en"> <head> <title>Inline Form</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="card"> <div class="card-header bg-primary text-white">Register Form</div> <div class="card-body"> <form class="form-inline" action="/action_page.php"> <label for="username">Username : </label> <input type="text" class="form-control" id="username"> <label for="password">Password : </label> <input type="password" class="form-control" id="password"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Login</button> </form> </div> </div> </div> </body> </html> Semisal kita simpan dengan nama inline_form.html, lalu kita buka hasilnya : Keterangan :
Form Input Bootstrap 4Dalam bagian sebelumnya kita sudah belajar membuat layout pada bagian form, bootstrap mensupport beberapa Form input seperti :
kita akan membahasnya satu persatu kita mulai dari bagian form dengan tipe input.
Membuat Input Form dengan BootstrapPenggunaan input pada form, caranya seperti membuat form biasa, yang membedakan adalah kita perlu menambahkan class form-control, jika anda belum mengetahui mengenai form input, bisa baca tutorial kami sebelumnya mengenai cara membuat form di html untuk contoh penggunaannya adalah seperti berikut : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!DOCTYPE html> <html lang="en"> <head> <title>Menu Navigasi</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="card"> <div class="card-header bg-primary text-white">Login Form</div> <div class="card-body"> <form action="action.php"> <div class="form-group"> <label for="username">Username</label> <input type="text" class="form-control" id="username"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="Password"> </div> <button type="submit" class="btn btn-primary">Login</button> </form> </div> </div> </div> </body> </html> Semisal kita simpan dengan nama form_input.html, jika kita buka di browser maka hasilnya adalah : Keterangan :
Membuat Textarea dengan bootstrapPembahasan textarea pada html, bisa dibaca di tutorial kami sebelumnya Membuat textarea di form HTML Secara konsep caranya sama yaitu dengan menambahkan class form-control pada tag <textarea>, contoh penggunaannya adalah sebagai berikut : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html> <html lang="en"> <head> <title>Menu Navigasi</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="card"> <div class="card-header bg-primary text-white">Form Textarea</div> <div class="card-body"> <form action="action.php"> <div class="form-group"> <label for="alamat">Alamat</label> <textarea class="form-control" name="alamat" id="alamat"></textarea> </div> <button type="submit" class="btn btn-primary">Input</button> </form> </div> </div> </div> </body> </html> Semisal kita simpan dengan nama textarea_bootstrap.html, lalu kita buka di browser maka hasilnya : Keterangan :
Membuat Checkbox dengan BootstrapBootstrap juga menyediakan class yang bisa digunakan untuk bagian checkbox, jika anda belum mengetahui apa itu checkbox, bisa melihat tutorial kami sebelumnya mengenai cara membuat checkbox di form html. Untuk contoh penggunaan skripnya adalah seperti berikut ini : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 <!DOCTYPE html> <html lang="en"> <head> <title>Menu Navigasi</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="card"> <div class="card-header bg-primary text-white">Form Checkbox</div> <div class="card-body"> <form action="action.php"> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" name="pilih1" class="form-check-input" value="">Pilihan 1 </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" name="pilih2" class="form-check-input" value="">Pilihan 2 </label> </div> <div class="form-check disabled"> <label class="form-check-label"> <input type="checkbox" name="pilih3" class="form-check-input" value="" disabled>Pilihan 3 </label> </div> <hr/> <h4>Checkbox Inline</h4> <hr/> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Pilihan 1 </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Pilihan 2 </label> </div> <div class="form-check form-check-inline disabled"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="" disabled>Pilihan 3 </label> </div> <hr/> <button type="submit" class="btn btn-primary">Input</button> </form> </div> </div> </div> </body> </html> Semisal kita simpan dengan nama bootstrap_checkbox.html, maka hasilnya adalah : Keterangan :
Membuat Radio Button dengan BootstrapBootstrap juga menyediakan class untuk membuat radio button, jika anda belum mengetahui apa itu radio button bisa melihat di tutorial kami sebelumnya, cara membuat radio button di HTML Untuk contoh skripnya adalah sebagai berikut : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <!DOCTYPE html> <html lang="en"> <head> <title>Menu Navigasi</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="card"> <div class="card-header bg-primary text-white">Form Radio</div> <div class="card-body"> <form action="action.php"> <div class="radio"> <label><input type="radio" name="optradio">Radio 1</label> </div> <div class="radio"> <label><input type="radio" name="optradio">Radio 2</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio" disabled>Radio 3</label> </div> <hr/> <h4>Radio Button Inline</h4> <hr/> <label class="radio-inline"> <input type="radio" name="optradio">Option 1 </label> <label class="radio-inline"> <input type="radio" name="optradio">Option 2 </label> <label class="radio-inline"> <input type="radio" name="optradio">Option 3 </label> <hr/> <button type="submit" class="btn btn-primary">Input</button> </form> </div> </div> </div> </body> </html> Semisal kita simpan dengan nama radio_button_bootstrap.html, lalu kita buka di browser maka hasilnya adalah :
Membuat Select Menu dengan bootstrapBootstrap juga menyediakan class yang bisa digunakan untuk bagian select menu, jika anda belum mengetahui mengenai select menu, bisa membaca tutorial kami sebelumnya cara membuat select box dengan bootstrap Untuk contoh perhatikan skrip dibawah ini : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <!DOCTYPE html> <html lang="en"> <head> <title>Form Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>Select Menu Bootstrap</h2> <form> <div class="form-group"> <label for="sel1">Contoh Pilihan</label> <select class="form-control" id="sel1"> <option>Pilihan 1</option> <option>Pilihan 2</option> <option>Pilihan 3</option> <option>Pilihan 4</option> </select> <br> <label for="sel2">Contoh Pilihan Multiple</label> <select multiple class="form-control" id="sel2"> <option>Pilihan 1</option> <option>Pilihan 2</option> <option>Pilihan 3</option> <option>Pilihan 4</option> </select> </div> </form> </div> </body> </html> Semisal kita simpan dengan nama select_menu_bootstrap.html, lalu jika dibuka di bootstrap hasilnya :
Baik sekian dulu teman – teman tutorial mengenai pembuatan form dengan menggunakan bootstrap, jika ada yang ingin didiskusikan silahkan dikolom komentar, sekian dulu sampai jumpa di tutorial bootstrap selanjutnya. |
Cara menggunakan card select bootstrap
Pos Terkait
Copyright © 2024 idkuu.com Inc.
