Bootstrap
merupakan sebuah framework CSS yang mempermudah web developer dalam web
development.
2.
Pastikan semua file dalam 1 folder, Contoh lihat gambar dibawah.
3. Buka
file HTMLnya kemudian salin codingan HTML5 dibawah ini.
----------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="author" content="Ryfan Aditya Indra">
<title>Ryfan Aditya Indra 1411501123 - Desain Web</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.4-dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.4-dist/css/etc/starter-template.css">
<script src="jquery/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
//jQuery menampilkan hasil inputan pada form
$("#tampilkan").click(function(){
var inputnama=$("#inputnama").val();
var inputemail=$("#inputemail").val();
var pilihagama=$("#pilihagama").val();
var masukkanalamat=$("#masukkanalamat").val();
var jeniskelamin=(document.detailform.jeniskelamin.value);
if ((inputnama!="")&&(inputemail!="")&&(jeniskelamin!="")&&(pilihagama!="")&&(masukkanalamat!="")){
alert("Data diterima");
//radiobutton pada pilihan jenis kelamin
if(jeniskelamin=="pria")
{
jenkel = "pria";
}
else if(jeniskelamin=="wanita"){
jenkel = "wanita";
}
else jenkel="";
//checkbox pada pilihan hobby
var ket = "";
var ket1 ="";
if (document.detailform.coding.checked == true)
{
ket = "coding";
}
if (document.detailform.futsal.checked == true)
{
ket1 = "futsal";
}
$("tbody").append(" <tr> <td>" +inputnama+ "</td> <td> "+inputemail+" </td> <td> "+jeniskelamin+" </td> <td> "+pilihagama+" </td> <td> "+ket +", "+ ket1+" </td> <td> "+masukkanalamat+" </td> </tr>");
}
else alert("Data tidak lengkap");
});
//validasi inputan nama
$("#inputnama").keyup(function(){
var inputnama=$("#inputnama").val();
if (isFinite(inputnama))alert("Nama tidak diperbolehkan dengan awalan Angka");
});
$("#inputnama").blur(function(){
var inputnama=$("#inputnama").val();
if (inputnama=="") alert("Nama belum diisi");
});
//validasi inputan email
$("#inputemail").blur(function(){
var inputemail=$("#inputemail").val();
if (inputemail=="") alert("E-Mail belum diisi");
});
//validasi pilihan jenis kelamin
$("#jeniskelamin").blur(function(){
var jeniskelamin=(document.detailform.jeniskelamin.value);
if (jeniskelamin=="") alert("Pilih jenis kelamin");
});
//validasi pilihan agama
$("#pilihagama").blur(function(){
var pilihagama=$("#pilihagama").val();
if (pilihagama=="") alert("Pilih Agama");
});
//validasi inputan alamat
$("#masukkanalamat").blur(function(){
var masukkanalamat=$("#masukkanalamat").val();
if (masukkanalamat=="") alert("Alamat tidak boleh kosong");
});
//jQuery reset form
$("#reset").click(function(){
alert("Formulir data direset");
});
//menghapus data yang telah diinput
$("#hapusdata").click(function(){
$("td").remove();
alert("Data yang telah tampil dihapus");
});
});
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Navigasi</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">HTML5 dengan Bootstrap</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Beranda</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<!-- div class="starter-template"-->
<form class="form-horizontal" method="POST" name="detailform">
<div class="form-group">
<label class="col-sm-2 control-label">Nama</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="nama" placeholder="Your First & Last Name" id="inputnama">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="email" placeholder="example@domainname.com" id="inputemail">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Jenis Kelamin</label>
<div class="col-sm-10">
<div class="radio">
<label>
<input type="radio" id="jeniskelamin" name="jeniskelamin" value="Pria"> Pria
</label>
<label>
<input type="radio" id="jeniskelamin" name="jeniskelamin" value="Wanita"> Wanita
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Agama</label>
<div class="col-sm-10">
<select id="pilihagama" class="form-control">
<option value="">Pilih</option>
<option value="Islam">Islam</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Hobby</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" name="coding" id="coding" value="Coding"> Coding
</label>
<label>
<input type="checkbox" name="futsal" id="futsal" value="Futsal"> Futsal
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Alamat</label>
<div class="col-sm-10">
<textarea class="form-control" name="masukkanalamat" id="masukkanalamat"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button class="btn btn-primary" type="button" id="tampilkan">Kirim Data</button>
<button class="btn btn-warning" type="reset" id="reset" value="reset">Reset Formulir</button>
</div>
</div>
</form>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<td>Nama</td>
<td>Email</td>
<td>Jenis Kelamin</td>
<td>Agama</td>
<td>Hobby</td>
<td>Alamat</td></tr>
</thead>
<tbody>
</tbody>
</table>
<center><button class="btn btn-danger" type="button" id="hapusdata" value="apusdata">Hapus Data</button></center>
</div>
<script src="bootstrap-3.3.4-dist/js/etc/jquery.min.js"></script>
<script src="bootstrap-3.3.4-dist/js/bootstrap.js"></script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------
4.
Jalankan HTML dan akan tampil seperti berikut.
5. Anda
telah berhasil membuat form HTML dengan menggunakan bootstrap.
Sekian
cara membuat HTML5 Form dari saya, Semoga bermanfaat !
Tidak ada komentar:
Posting Komentar