Assalamualaikum Wr. Wb.
Halo sobat , pada kesempatan kali ini saya akan melanjutkan
pembahasan / tutorial penggunan Bootstrap. Pada kali ini kita akan
membuat form menggunakan Bootstrap. Dalam membuat form dengan
bootstrap maka tampilan dari form aka menjadi lebih menarik dan
responsive.
Dalam membuat form dengan bootstrap kita tinggal memanggil parameter parameter yang sudah di sediakan oleh bootstrap. Di ba wah ini adalah contoh dari parameter parameter yang saya gunakan dalam membuat form dengan bootstrap kali ini:
- class="form-group" digunakan untuk membuat group dari form
- input type diguanakan untuk memilih dari tipe inputan
- class="checkbox" diguanakan untuk inputan tipe checkbox
- class="radio-inline" Digunakan untuk membuat input type radio dalam satu baris.
- class="btn btn-success" untuk membuat button.
LATAR BELAKANG
Belajar memanggil class class yang dibutuhkan dalam pembuatan sebuah form dengan menggunakan framework bootstrap.
MAKSUD & TUJUAN
Menghasilkan tampilan form yang menarik.
ALAT & BAHAN
- Bootstrap
- Text Editor
- Browser
- Laptop/PC
PEMBAHASAN
Di bawah ini adalah script dari contoh form yang saya buat menggunakan bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Formulir Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css " href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
blockquote {
font-size: 15px;
}
.container {
font-family: raleway;
}
</style>
</head>
<body>
<div class="container">
<h1><center>Formulir dengan Bootstrap</center></h1>
<br>
<div class="form-group">
Nama : <input type="text" name="nama" class="form-control" placeholder="Nama Lengkap">
</div>
<div class="form-group">
Tgl Lahir : <input type="text" name="nama" class="form-control" >
</div>
<div class="form-group">
Alamat : <textarea class="form-control" rows="5" id="alamat" placeholder="Alamat"> </textarea>
</div>
Pilih Jurusan :
<blockquote>
<div class="checkbox">
<input type="checkbox" name="jurusan"> Rekayasa Perangkat Lunak
</div>
<div class="checkbox">
<input type="checkbox" name="jurusan"> Teknik Pemesinan
</div>
<div class="checkbox">
<input type="checkbox" name="jurusan"> Teknik Ototronik
</div>
<div class="checkbox">
<input type="checkbox" name="jurusan"> Teknik Pembuatan Kain
</div>
</blockquote>
Jenis Kelamin :
<br>
<div class="radio-inline">
<input type="radio" name="kelamin"> Laki-Laki
</div>
<div class="radio-inline">
<input type="radio" name="kelamin"> Perempuan
</div>
<br>
<br>
<div class="form-group">
Tahun Lulus :
<select class="form-control" >
<option>2011/2012</option>
<option>2012/2013</option>
<option>2013/2014</option>
<option>2014/2015</option>
<option>2015/2016</option>
</select>
</div>
<center>
<button type="button" class="btn btn-success">Kirim</button>
<button type="button" class="btn btn-danger">Batal</button>
</center>
</body>
</html>
Hasilnya
Karena form ini menggunakan bootstrap maka form akan bersifat responsive.
Ketika di buka di perangkat yang tampilanya lebih kecil maka otomatis
menyesuaikan. seperti gambar di bawah ini.
Mungkin itu dulu dari saya kurang lebihnya mohon maaf.
Syukron
Wassalamualaikum Wr. Wb.
w3schools.com
No comments:
Post a Comment