Assalamualaikum Wr.Wb
Kali ini saya akan berbagi tutorial membuat form dengan bootstrap,membuat form dengan bootstrap sangatlah mudah karena bootstrap telah menyediakan style untuk form.Sebelum kita mulai pastikan teman semua sudah mendownload bootstrap di sini lalu simpan file form dalam folder bootstrap yang telah di ekstrak.
Dan hasilnya seperti di bawah
Sebenarnya tinggal tambahkan clas form-inline pada <form> dan hasilnya
Maka hasilnya seperti di bawah
Ya itu tadi tutorial membuat form dengan bootstrap yang menurut saya hasilnya lebih baik di banding dengan html biasa bahkan kita tidak perlu repot - repot membuat style dengan css.Oke sekian dulu postingan kali ini sampai jumpa di potingan berikutnya terimakasih telah berkunjung semoga bermanfaat.
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
Kali ini saya akan berbagi tutorial membuat form dengan bootstrap,membuat form dengan bootstrap sangatlah mudah karena bootstrap telah menyediakan style untuk form.Sebelum kita mulai pastikan teman semua sudah mendownload bootstrap di sini lalu simpan file form dalam folder bootstrap yang telah di ekstrak.
- Bootstrap Vertical Form
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical form</h2>
<form>
<div class="form-group">
<label for="email">Tulis Email:</label>
<input type="email" class="form-control" id="email" placeholder="Email Anda">
</div>
<div class="form-group">
<label for="pwd">Masukkan Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Password">
</div>
<div class="checkbox">
<label><input type="checkbox">Tetap Masuk</label>
</div>
<button type="submit" class="btn btn-danger btn-lg">Submit</button>
</form>
</div>
</body>
</html>
Dan hasilnya seperti di bawah
- Inline Form(form dalam satu garis)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical form</h2>
<form class="form-inline">
<div class="form-group">
<label for="email">Tulis Email:</label>
<input type="email" class="form-control" id="email" placeholder="Email Anda">
</div>
<div class="form-group">
<label for="pwd">Masukkan Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Password">
</div>
<div class="checkbox">
<label><input type="checkbox">Tetap Masuk</label>
</div>
<button type="submit" class="btn btn-danger btn-lg">Submit</button>
</form>
</div>
</body>
</html>
Sebenarnya tinggal tambahkan clas form-inline pada <form> dan hasilnya
- Horizontal Form
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Masukkan Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Email Anda">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Masukkan Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Tetap Masuk</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success btn-lg">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
Maka hasilnya seperti di bawah
Ya itu tadi tutorial membuat form dengan bootstrap yang menurut saya hasilnya lebih baik di banding dengan html biasa bahkan kita tidak perlu repot - repot membuat style dengan css.Oke sekian dulu postingan kali ini sampai jumpa di potingan berikutnya terimakasih telah berkunjung semoga bermanfaat.
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
0 komentar:
Posting Komentar