Membuat Form Dengan Bootstrap
Pada tutorial sebelumnya kita sudah mempelajari tentang Membuat Navigasi Tabs dan Pillis Bootstrap .dan selanjutnya ini akan saya jelaskan tentang cara memubat form dengan bootstrap . bootstrap menyediakan class khusus lagi unutk mendesaign form dan pastinya terlihat sangat modern dan bersih . Membuat form dengan bootstrap
Pada tutorial ini akan di jelaskan tentang bagaimana cara penulisan syntax , element-element HTML yang kita butuhkan untuk membuat form dengan Bootstrap, Bootstrap telah menyediakan class form yang menarik dan membaginya dalam tiga model, yaitu :
- Form dengan model Vertikal : Form dengan model vertikal ini merupakan form default Bootstrap
- Form dengan model Inline : Form dengan model inline adalh sebuah form yang label dan form inputnya terletak sebaris
- Form dengan model Horizontal : Form dengan model horizontal merupakan form yang memiliki bentuk horizontal. Artinya posisi label dan input form terletak Horizontal
Untuk membuat form dengan Bootstrap sobat dapat menggunakan class "form-control" pada tag <input>, <textarea>, <select> dan element form yang bisa digunakan lainya. Baca Disini tentang cara membuat form dengan Bootstrap
MEMBUAT FORM VERTIKAL DENGAN BOOTSTRAP
Form vertikal Bootstrap merupakan bentuk default dari Bootstrap. Artinya bentuk form vertikal ini merupakan bentuk yang digunakan secara default oleh Bootstrap. Untuk membuat form dengan Bootstrap silahkan perheatikan contoh berikut
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery/js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="nama">Nama Anda:</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label for="alamat">Alamat anda:</label>
<input type="text" class="form-control" id="alamat">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
Perhatikan contoh form Bootstrap di atas . Untuk membuat form dengan Bootstrap pertama yang harus di perhatikan adalaha tambah class "form-grup" untuk memalut element sebuah form seperti seperti label dan formnya , Kemudian kita berikan class "form-control"'
<div class="form-group">Tentu sangat mudah bukan? Karena sobat hanya perlu menambahkan class - class yang sudah disediakan oleh Bootstrap . Sedikit tambahan, untuk membuat tombol pada Bootstrap , kita telah mempelajarinya pada tutorial sebelumnya
<label>Nama Anda:</label>
<input type="text" class="form-control">
</div>
MEMBUAT FORM INLINE DENGAN BOOTSTRAP
Untuk membuat form inline dengan Bootstrap caranya cukup mudah. Sobat hanya perlu menambahkan class "form-inline" pada tag <form> Perhatikan contoh berikut
<!DOCTYPE html>
<html>
<head>
<title> Membuar Form Dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<form class="form-inline">
<div class="form-group">
<label for="nama">Nama Anda:</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label for="alamat">Alamat anda:</label>
<input type="text" class="form-control" id="alamat">
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</body>
</html>
MEMBUAT FORM HORIZONTAL DENGAN BOOTSTRAP
Cara membuat form horizontal dengan Bootstrap yaitu dengan memberikan class "form-horizontal" pada tag <form> Perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
<title> Membuar Form Dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="nama">Nama Anda:</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="alamat">Alamat anda:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="alamat">
</div>
</div>
<button type="submit" class="btn btn-primary">Simpan</button>
</form>
</div>
</body>
</html>
Oke akan saya jelaskan tentang pembuatan form Horizontal pada contoh diatas
Kita tidak hanya dapat memasukkan kode syntax input type text saja tetapi kita dapat memasukkan kode lain dan mengkreasikanya sendiri. Perhatikan contoh berikut
<form class="form-horizontal">Kita bisa menggunakan class "form-horizontal" pada tag <fom> kemudian pada label dan formatnya
<label class="control-label col-sm-2" for="nama">Nama Anda:</label>Disini untuk membuat form horizontal kira harus menggunakan grid sistem Bootstrap untuk menentukan letaknya. Mungkin bagi sobat yang belum mempelajari Grid System akan agak kebingungan, untuk tutorial Grid System akan kita pelajari pada tutorial selanjutnya.
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
Kita tidak hanya dapat memasukkan kode syntax input type text saja tetapi kita dapat memasukkan kode lain dan mengkreasikanya sendiri. Perhatikan contoh berikut
<!DOCTYPE html>
<html>
<head>
<title> Membuar Form Dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<h1>biodata</h1>
<div class="container">
<form>
<div class="form-group">
<label for="nama">Username : </label>
<input type="text" class="form-conatrol">
</div>
<div class="form-group">
<label for="password">Password : </label>
<input type="password" class="form-conatrol">
</div>
<div class="form-group">
<label for="alamat">Informasi Anda : </label>
<textarea type="text" class="form-control" id="alamat"></textarea>
</div>
<div class="form-group">
<label for="jk">Jenis Kelamin : </label>
<select class="form-control" id="jk">
<option>Pria</option>
<option>Wanita</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
KESIMPULAN
Bootstrap telah menyediakan class form yang responsive dan terlihat modern dan kita tinggal mengkreasikanya sesuai kita. Dan kita tidak memerlukan class yang begitu rumit dan sudah saya paparkan diatas. Jika sobat mengalami kesulitan silahkan berikan komentar. Sekian terima Kasih
No comments:
Post a Comment