Ketika kita mengembangkan sebuah aplikasi berbasis web pasti kita akan membuat form-form pengisian data. Kita dapat membuat form menggunakan Bootstrap 4.
Langkah-langkah membuat form pada Bootstrap 4 ini adalah
- tag form
- tentukan ukuran colom untuk label dan input
- membuat div dengan class form-group row
- Membuat label class col-form-label dan juga class untuk lebar kolomnya
- Membuat div dengan class sesuai ukuran kolom
- Membuat input dengan class form-control
- Untuk button bisa digunakan terkait button
Cuplikan source codenya
<form>
<div class=”form-group row”>
<label for=”Nama” class=”col-md-1 col-form-label”>Nama:</label>
<div class=”col-md-4″>
<input type=”text” class=”form-control” name=”nama”>
</div>
</div>
<div class=”form-group row”>
<label for=”Email” class=”col-md-1 col-form-label”>Email:</label>
<div class=”col-md-4″>
<input type=”text” class=”form-control” name=”email”>
</div>
</div>
<div class=”form-group row”>
<label for=”Pesan” class=”col-md-1 col-form-label”>Pesan:</label>
<div class=”col-md-4″>
<textarea class=”form-control” name=”pesan”>
</textarea>
</div>
</div>
<div class=”form-group row”>
<label for=”Kirim” class=”col-md-1 col-form-label”></label>
<div class=”col-md-4″>
<input type=”submit” class=”btn btn-success” value=”Kirim”>
</div>
</div>
</form>
Demo dapat dilihat di https://bs4.aris.proweb.asia/contact00.html dengan tampilan seperti berikut ini:
Informasi lebih lanjut silahkan mengunjungi
1. https://getbootstrap.com/docs/4.3/components/forms/ .
2. https://getbootstrap.com/docs/4.3/components/buttons/ .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.