HASANONTA - Sebelumnya pada tutorial belajar bootstrap chapter-chapter sebelumnya saya sudah menjelaskan tentang penggunaan macam-macam komponen bootstrap seperti membuat tombol dengan bootstrap, membuat atau mendesign table dengan bootstrap, membuat menu dropdown dengan bootstrap, list, pagination, breadcrumb dan banyak lagi lainnya. sehingga pada tutorial bootstrap part 13 ini akan di jelaskan tentang cara membuat form dengan bootstrap. bootstrap menyediakan class khusus lagi untuk mendesign 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, karena untuk mendapatkan hasil form yang menarik bootstrap telah membuat design form menjadi tiga model. yaitu:
- Form dengan model vertikal
form degan model vertikal ini merupakan form default bootstrap. - Form dengan model inline
form dengan model inline adalah sebuah form yang label dan form inputnya terletak sebaris. - form dengan model horizontal
form dengan model horizontal ini merupakan form yang memiliki bentuk horizontal. artinya posisi label dan input form terletak horizontal.
Membuat form vertikal dengan bootstrap
Form vertikal bootstrap merupakan bentuk default dari form bootstrap. artinya bentuk form vertikal ini merupakan bentuk yang di gunakan secara default di bootstrap. untuk membuat form dengan bootstrap silahkan perhatikan contoh berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>HasanOnta</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"> <h1>Membuat Form dengan Bootstrap | HasanOnta</h1>
<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>
Output :
contoh form bootstrap di atas merupakan form dengan model default atau vertikal. untuk membuat form dengan bootstrap yang pertama harus di perhatikan adalah pertama tambahkan class “form-group” untuk membalut element sebuah form seperti label dan formnya. dan kemudian pada form berikan class “form-control”.
<div class="form-group">
<label>Nama Anda:</label>
<input type="text" class="form-control">
</div>
Membuat Form Inline dengan Bootstrap
Untuk membuat form inline dengan Bootstrap caranya tidak terlalu berbeda dengan form vertikal, anda hanya harus menambah class <form-inline> pada tag <form>.
<!DOCTYPE html>Output :
<html>
<head>
<title>HasanOnta</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"> <h1>Membuat Form dengan Bootstrap | HasanOnta</h1>
<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-primary">Simpan</button>
</form>
</div>
</body>
</html>
Membuat Form Horizontal dengan Bootstrap
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 13 : Membuat 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"> <h1>Membuat Form dengan Bootstrap | www.malasngoding.com</h1>
<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-danger">Simpan</button>
</form> </div>
</body>
</html>
Output :
untuk membuat form horizontal seperti di atas anda bisa memperhatikan pada contoh di atas :
<form class="form-horizontal">
kita bisa menggunakan class “form-horizontal” pada tag <form>. kemudian pada bagian label dan formnya :
<label class="control-label col-sm-2" for="nama">Nama Anda:</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
di sini untuk membuat form horizontal kita harus menggunakan sistem grid bootstrap untuk mentukan letaknya. mungkin jika anda belum mempelajari tentang system grid bootstrap akan agak membingungkan, untuk tutorial grid system bootstrap akan kita pelajari pada tutorial selanjutnya pengenalan grid system bootstrap untuk membuat halaman website yang responsive pada seluruh device.
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Tidak ada komentar:
Posting Komentar