Hello guys, kali ini kita akan belajar bagimana membuat form dengan Bootstrap 4. Sebelum itu kita harus mengenal apa itu Bootstrap. Bootstrap adalah sebuah framework untuk membangun sebuah website, yang memiliki banyak class yang untuk memudahkan designer web membangun sebuah front-end website dengan cepat dan dinamis. Bootstrap juga mendukung pembuatan website mobile yang responsif.
Untuk memulai membuat sebuah form dengan bootstrap, kita memiliki 2 cara untuk menginstall boostrap. Pertama kita bisa menggunakan Bootstrap CDN yang telah disediakan, yakni untuk mempercepat pengerjaan di projek yang kita buat. Cara kedua adalah dengan mendownload Source files Bootstrap di halaman page resminya, https://getbootstrap.com/
Untuk lebih mudahnya, langsung saja kita buat file HTML nya dan copy 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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>Code language: PHP (php)Simpan dengan nama file form.html, dan ketika buka dibrowser akan tampil halaman seperti dibawah ini,
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">Code language: HTML, XML (xml)Code di atas adalah link untuk menghubungkan atau memanggil package CSS yang dimiliki bootstrap 4
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>Code language: HTML, XML (xml)Script di atas adalah paket javascript yang meliputi JQuery, Popper.js, dan Bootstrap.min.js yang dibutuhkan untuk penggunaan javascript yang ada di Bootstrap.
Selanjutnya kita masukan code untuk form, code tersebut di taruh di file form.html tadi. Sematkan code dibawah ini diantara elemen <body> dan </body>
<div class="container">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>Code language: HTML, XML (xml)Setelah di save akan menampilkan halaman dibawah ini,
Catatan:
Bila menggunakan Source File Bootstrap dengan cara didownload, tinggal ganti saja code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">Code language: HTML, XML (xml)Dengan code dibawah ini, tergantung directory atau folder tempat ditaruh nya film bootstrap.min.css
<link rel="stylesheet" href="..directory/bootstrap.min.css">Code language: HTML, XML (xml)Sekian tutorial yang sagat sederhana ini, bila ada pertanyaan bisa ditulis di kolom komentar dibawah yaa. Terima kasih 🙂
