Halo teman-teman jumpa lagi di seri tutorial cutom bootstrap 4 yaitu mengenai bagaimana cara membuat form 2 kolom. sebelumnya kita juga sudah membahas tentang mengcustom navbar default dari bootstrap 4 kamu bisa membacanya disini : Tutorial Custom Bootstrap 4 #1 : Navbar Keren di Bootstrap 4
Oke lanjut kita akan membuat form 2 kolom di bootstrap 4. Sebenarnya sih ini gabungan antara system grid dan form pada bootstrap 4. Jadi sebelum lanjut ke tutorial nya alangkah baiknya kamu harus membaca terlebih dahulu tutorial penjelasan mengenai sistem grid di bootstrap 4.
Dan sebelum membuat form 2 kolom. Kamu harus melakukan persiapan terlebih dahulu yang tutorialnya juga sudah afrizatul.com berikan di seri tutorial bootstrap 4 untuk pemula : Tutorial Belajar Bootstrap 4 Untuk Pemula #1 : Pengenalan dan Cara Install
Karena takut artikel ini terlalu panjang dan membosankan langsung saja kita ke tutorial bagaimana cara membuat form 2 kolom di bootstrap 4.
Jadi kira-kira hasilnya akan seperti ini :
Itu adalah program kerja praktek saya selama kuliah yang berjudul Sistem Aplikasi Rekam alumni berbasis website menggunakan framework bootstrap 4 yang insyaallah juga akan saya bagikan di blog ini ya.
Karena form yang saya buat diatas terlalu kompleks karena terdiri dari form input, radio button, date, combobox dan lain-lain. Maka untuk latihan cara membuat form 2 kolom kali ini kita akan membuat yang sederhana saja.
Sekarang buka file index kamu lalu copy kan code dibawah ini.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Form 2 Kolom Bootstrap 4 - Afrizatul.com</title>
</head>
<body>
<form role="form" method="post" action="tambah_alumni.php">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group ">
<label for="exampleInputEmail1">Npm</label>
<input type="text" class="form-control" name="npm" placeholder="Npm" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Nama</label>
<input type="text" class="form-control" name="nama" placeholder="Nama"required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Jenis Kelamin</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="jenkel" value="Laki-Laki" >
<label class="form-check-label">Laki-Laki</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="jenkel"value="Perempuan">
<label class="form-check-label">Perempuan</label>
</div>
</div>
<div class="form-group">
<label for="tgl_lahir">Tanggal Lahir</label>
<input type="text" id="datepicker" class="form-control" name="tgl_lahir" placeholder="Tanggal Lahir">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Priode Wisuda</label>
<select id="periode_wisuda" class="form-control" name="periode_wisuda">
<option disabled selected>-Pilih Periode-</option>
<option value="Pertama">Pertama</option>
<option value="Kedua">Kedua</option>
<option value="Ketiga">Ketiga</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Nama Kosentrasi</label>
<select id="id_kosentrasi" class="form-control" name="id_kosentrasi">
<option disabled selected>-Pilih Kosentrasi-</option>
</select>
</div>
<div class="form-group">
<label for="thn_masuk">Tahun Masuk</label>
<input type="text" id="datepicker1" class="form-control" name="thn_masuk" placeholder="Tahun Masuk">
</div>
<div class="form-group">
<label for="thn_selesai">Tahun Selesai</label>
<input type="text" id="datepicker2" class="form-control" name="thn_selesai" placeholder="Tahun Selesai">
</div>
<div class="form-group">
<label for="ipk">IPK</label>
<input type="text" class="form-control" name="ipk" placeholder="IPK">
</div>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" name="submit" class="btn btn-success float-right">Simpan</button>
</div>
</form>
<a href="afrizatul.com">afrizatul.com</a>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>Maka hasilnya akan seperti ini :
Jangan heran jika form tanggal lahir, tahun masuk, dan form tahun selesai tidak mengeluarkan tampilan tanggal nya ya karena itu memerlukan plugin tambahan yang bernama daterangepicker.
Karena disini kita akan mencoba bagaimana cara membuat form 2 kolom jadi untuk saat ini itu saja. Mungkin nanti akan saya bagikan juga bagaimana cara membuat form dengan plugin daterange picker di blog ini. Jadi jangan lupa stay terus di blog afrizatul.com ya.
Akhir Kata
itulah bagaimana cara membuat form 2 kolom menggunakan form dan system grid pada framework css bootstrap versi 4. Jangan lupa teman-teman baca juga seri tutorial custom bootstrap 4 lainnya di blog afrizatul.com. Semangat ngoding..
