Belajar Bootstrap Bagian 4: Membuat Form Dengan Bootstrap

Membuat Form Dengan Bootstrap

Form merupakan salah satu komponen terpenting dalam sebuah website, entah itu untuk urusan pendaftaran, login, maupun form isian lain yang memungkinkan. Untuk itu, pada bagian ini kita akan mempelajari bagaimana membuat form dengan bantuan bootstrap.

Apabila sebelumnya dalam urusan pembuatan form kita sering direpotkan dengan bagaimana caranya agar form terlihat menarik, maka dengan bootstrap membuat form merupakan suatu hal yang mudah. Kita tinggal memanggil class dari form pada tag <form>. Bootstrap sendiri memiliki beberapa jenis class form yang bisa digunakan antara lain.

Form Inline: form yang segaris atau sejajar, sangat cocok digunakan untuk form pencarian ataupun untuk aktivitas log in seperti yang sering kita lihat di facebook misalnya.
Form Vertical: bisa dibilang ini adalah bentuk form default-nya, karena pada pembuatan form dengan jenis ini kita tidak harus melakukan pemanggilan class-nya secara utuh (form-vertical). Class-nya bisa dipanggil hanya dengan form saja.
Form Horizontal: tidak berbeda jauh dengan form-vertical, hanya saja form ini akan terlihat sedikit lebih lebar.

Itulah sedikit penjelasan tentang beberapa jenis form yang ada di bootstrap. Sekarang kita akan memulai untuk belajar bagaimana cara membuatnya.

Membuat Form Inline

<!DOCTYPE html>
<html>
	<head>
		<title>Belajar Bootstrap</title>
		<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
	</head>
	<body>
		<div class="container">
			<h3>Belajar Membuat Form Dengan Bootstrap</h3>
			<hr>
			<!-- Form Inline -->
			<h4>Form Inline (sejajar)</h4>
			<form class="form-inline">
				<div class="form-group">
					<label>Nama</label>
					<input class="form-control" type="text" name="#">
				</div>
				<div class="form-group">
					<label>Alamat</label>
					<textarea class="form-control"></textarea>
				</div>
			</form>
		</div>
	</body>
</html>

Jika code diatas sudah diketik dengan benar, maka hasil yang akan tampil akan seperti berikut ini:

Saya jelaskan sedikit..


<form class="form-inline">
	<div class="form-group">
		<label>Nama</label>
		<input class="form-control" type="text" name="#">
	</div>

Pada script diatas, kita memanggil form berbentuk inline, maka akan tampil form isian yang sejajar/segaris. Kemudian class form-group ini merupakan suatu class yang digunakan untuk mengelompokkan per kolom isian agar terlihat rapi. Selain itu ada class form-control yang digunakan untuk membuat kolom isian menggunakan tema bootstrap.

Membuat Form Vertikal

Pada file yang sama, coba tambahkan code berikut ini:

<!-- Form Vertikal -->
<h4>Form Vertikal</h4>
<form class="form-vertical">
	<div class="form-group">
		<label>Nama</label>
		<input class="form-control" type="text" name="#">
	</div>
	<div class="form-group">
		<label>Alamat</label>
		<textarea class="form-control"></textarea>
	</div>
</form>

Jika code diatas sudah diketik dengan benar, maka hasil yang akan tampil akan seperti berikut ini:

Saya jelaskan sedikit..

<form class="form-vertical">

Pada script diatas, kita memanggil form berbentuk inline, maka akan tampil form isian yang berbentuk vertikal seperti pada gambar diatas.

Membuat Form Horizontal

Masih dengan file yang sama, coba tambahkan code berikut ini:

<!-- Form Horizontal -->
<h4>Form Horizontal</h4>
<form class="form-horizontal">
	<div class="form-group">
		<label>Nama</label>
		<input class="form-control" type="text" name="#">
	</div>
	<div class="form-group">
		<label>Alamat</label>
		<textarea class="form-control"></textarea>
	</div>
</form>

Jika code diatas sudah diketik dengan benar, maka hasil yang akan tampil akan seperti berikut ini:

Saya jelaskan lagi..

<form class="form-horizontal">

Pada script diatas, kita memanggil form berbentuk horizontal, maka akan tampil form isian yang berbentuk horizontal seperti pada gambar diatas. Memang antara form vertikal dengan yang horiztontal tidak terlihat perbedaan yang besar, perbedaannya hanya diukuran form-nya saja.

Sekian dulu untuk kali ini, ini hanya dasarnya saja untuk pembuatan form tapi semoga bermanfaat. Lain kesempatan kita bahas lagi lebih dalam mengenai form bootstrap, misalnya untuk form pengisian tanggal menggunakan datepicker dan lainnya.