Membuat Form Input Mengunakan Bootstrap

Example blog post alt

Bootstrap | 2018-05-19

Bootstrap adalah sebuah framework CSS yang dapat digunakan untuk mempermudah membangun tampilan situs website. Bootstrap pertama kali dikembangkan oleh Mark Otto dan Jacob Thornton pada pertengahan tahun 2010 di Twitter. Bootstrap dikembangkan secara open source dengan lisensi MIT.

Bootstrap telah menyediakan banyak sekali class-class CSS dan Plugin Javascript siap pakai yang dapat membantu mempermudah Kita dalam membuat halaman website. Karena kemudahan penggunaan, banyaknya komponen dan kelengkapan dokumentasinya, saat ini Bootstrap menjadi salah satu front-end framework yang paling banyak digunakan di dunia.

Pada kesempatan ini kita akan membahas bagaimana membuat form yang responsive untuk semua perangkat. Terlebih dahulu siapkan beberapa hal di bawah ini :

1. Bootstrap, unduh di Bootstrap

2. XAMPP

3. Notepad ++

#Step 1

Extract bootstrap yang telah kita download tadi dalam folder yang telah kita buat di dalam htdocs seperti gambar di bawah ini :

#Step 2

Langkah selanjutnya silahkan buat file index.php yang berisikan script seperti di bawah ini yang disimpan dalam folder yang telah dibuat didalam htdocs :  

<htmL>
<head>
	<title>Bootstrap</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.css">
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-sm-4">
		<h2 class="page-header">Form Input Bootstrap</h2>
			<form>
				<div class="form-group">
					<label>Nama</label><br>
					<input type="text" class="form-control" placeholder="Nama Lengkap">
					<label>Alamat</label><br>
					<textarea type="text" class="form-control" cols="40" rows="5" placeholder="Alamat"></textarea>
					<label>Tempat Lahir</label><br>
					<input type="text" class="form-control" placeholder="Tempat Lahir">
					<label>Tanggal Lahir</label><br>
					<input type="date" class="form-control" placeholder="Tanggal Lahir"><br>
					<button class="btn btn-danger" type="submit">Simpan</button>
				</div>	
			</form>
		</div>	
	</div>	
</div>
</body>
</html>

#Step 3

Jalankan hasil script yang telah di buat di browser , sehingga hasil nya seperti di bawah ini :

Script di atas merupakan integrasi HTML dan Bootstrap untuk menghasilkan form yang responsive. Semoga bermanfaat !!

Download Aplikasi