Cara Membuat Form Responsive Menggunakan Bootstrap – Salam sejahtera, pada postingan kali ini saya akan memberikan tutorial singkat mengenai cara membuat form responsive menggunakan bootstrap. Selain bootstrap dapat membuat tampilan web yang bagus dan keren, dengan bootstrap ini kita dapat membuat sebuah form yang responsive tentunya. Maksudnya adalah form yang akan kita buat nanti, adalah form yang dapat menyesuaikan ukurannya sesuai perangkat atau device yang akan digunakan, seperti smartphone, tablet, notebook, atau lainnya. Dan selain responsive, form kita akan menjadi terlihat indah dan elegant.
Sebelum memulainya, pastikan anda sudah memiliki bootstrap atau anda dapat mengunduhnya di sini. Dan file yang kita gunakan hanya 2 saja yaitu:
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
Nah, jika sudah memanggil file tersebut, sekarang anda gunakan script dibawah diantara tag <body></body> pada file index.html :
<div class="container">
<div class="col-lg-4">
<div class="page-header">
<h3>Form Responsive Bootstrap</h3>
</div>
<form role="form" class="form-horizontal">
<div class="form-group">
<label>Nama Lengkap</label>
<input type="text" name="namaLengkap" class="form-control">
</div>
<div class="form-group">
<label>Alamat</label>
<input type="text" name="alamat" class="form-control">
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" class="form-control">
</div>
<div class="form-group">
<label>Pesan</label>
<textarea name="pesan" class="form-control"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Insert Data</button>
<button type="reset" class="btn btn-danger">Reset</button>
</div>
</form>
</div>
</div>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" class="form-control">
</div>
<div class="form-group">
<label>Pesan</label>
<textarea name="pesan" class="form-control"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Insert Data</button>
<button type="reset" class="btn btn-danger">Reset</button>
</div>
</form>
</div>
</div>
Maka terlihat script lengkapnya seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstrap</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="col-lg-4">
<div class="page-header">
<h3>Form Responsive Bootstrap</h3>
</div>
<form role="form" class="form-horizontal">
<div class="form-group">
<label>Nama Lengkap</label>
<input type="text" name="namaLengkap" class="form-control">
</div>
<div class="form-group">
<label>Alamat</label>
<input type="text" name="alamat" class="form-control">
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" class="form-control">
</div>
<div class="form-group">
<label>Pesan</label>
<textarea name="pesan" class="form-control"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Insert Data</button>
<button type="reset" class="btn btn-danger">Reset</button>
</div>
</form>
</div>
</div>
</body>
</html>
Saya berharap anda dapat mengerti script diatas tersebut, jadi tidak ada yang akan dijelaskan lagi. Jika masih kurang paham dengan script diatas, boleh menggunakan komentar dibawah.
Oke, sampai disini tutorial yang saya berikan Cara Membuat Form Responsive Menggunakan Bootstrap semoga dapat bermanfaat.
Perkenalkan saya blogger pemula, yang ingin belajar lebih dalam mengenai blogger dan internet ini.
Related Post
Cara Membuat Sistem Like sederhana dengan JQuery, PHP, Bootstrap dan MySQL
Cara Membuat Sistem Like sederhana dengan JQuery, PHP, Bootstrap dan MySQL - Salam sejahtera bu
Cara Membuat Aplikasi CRUD Sederhana Menggunakan PDO dan Bootstrap
Cara Membuat Aplikasi CRUD Sederhana Menggunakan PDO dan Bootstrap - Salam sejahtera semuanya, pad
Cara Memutar Audio pada Halaman Web dengan HTML5
Cara Memutar Audio pada Halaman Web dengan HTML5 – Salam sejahtera buat teman-teman semua, pada
Pengertian Web Server
Apa itu web server.? Web Server adalah sebuah program aplikasi yang digunakan untuk menyimpan
2 comments
Click here for commentsApakah ini bisa langsung terkirim ke email kita gan
ReplyMaksudnya gmn ya bg. Kalau mengirim emailnya, ya harus menggunakan PHP atau bahasa pemrograman lainnya. Tutorial ini hanya meembuat formnya saja.
ReplyConversionConversion EmoticonEmoticon