bewoksatukosong.com - Halo balik dengan om bewok tentunya, kali ini om bewok akan melanjutkan tutorial bootstrap ini, yaitu FORM.
Form ini biasanya di gunakan ketika orang ingin mendaftar ke website tersebut atau kalau website education untuk mendaftarkan anaknya ke sekolah tersebut atau kampus tersebut, disebutnya apa ya ? biasanya apa ya mereka menyebutnya ? Oh iya PSB (Penerimaan Siswa Baru).
- Baca :
Bootstrap ini membantu kita dalam pembuatan form, memang betul tanpa bootstrap kita juga bisa membuatnya, tapi kalau menggunakan bootstrap ini kita tidak perlu untuk memikirkan design-nya, karena dengan bantuan bootstrap form yang kita buat sudah lumayan bagus, apalagi kalau kita eksperimen sedikit menjadi mantablah pokoknya. Anyway kita akan langsung saja mencoba.
Yang pertama kita coba Form Default bawaan bootstrap ya, kita ga tambahin apa - apu dulu jadi bisa benar - benar standart ala bootstrap. Mari kita mulai.
1. FORM BOOTSTRAP DEFAULT
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Bikin Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<form>
<div class="form-group">
<label for="exampleInputEmail">Masukan Email</label>
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword">Masukan Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<label for="InputFile">Pilih Input nya bro</label>
<input type="file">
<p class="help-block">format img .jpg .gif .png</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">I Agree
</label>
</div>
<button type="submit" class="btn btn-default">Register</button>
</form>
</body>
</html>
Hasilnya seperti dibawah ini ya.
 |
| Gambar 1 Form Bootstrap Default |
Kalian bisa eksperimen. maksudnya kalian otak - atik sendiri. saran dari om bewok kalau class nya kamu hapus, apa yang terjadi ? ya otomatis form yang kamu buat jadi standart / biasa. tanpa menggunakan bootstrap, Tapi kamu cari tau apa perbedaanya dari default bootstrap dan default saja.
- Baca :
2. FORM-INLINE
Form inline ini jadi maksudnya sejajar dengan kotak yang lain.
Codinganya seperti dibawah ini ya.
<!DOCTYPE html>
<html>
<head>
<title>form cloning FB</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<form class="form-inline">
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" class="form-control" placeholder="Nama Anda">
<div class="form-group">
<label for="Email">Email</label>
<input type="text" class="form-control" placeholder="Email Anda">
</div>
<button type="submit" class="btn btn-default">Daftar</button>
</form>
</body>
</html>
 |
| Gambar 2 Form Inline With Bootstrap |
Om bewok mau nanya dong kalau yang horizontal bisa ga om ? - Sabar ya ini lagi dibikin tutorialnya,
3. FORM HORIZONTAL
Kodingan yang dibuat adalah contoh untuk login masuk website, ya pokoknya website apa aja biasanya tampilanya ya kayak gini, mungkin design-nya aja yang berubah.
<!DOCTYPE html>
<html>
<head>
<title>form cloning FB</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
.form-group{
padding-top: 1%;
}
</style>
</head>
<body>
<h1 class="text-center">Login</h1>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail13"
class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email"
id="inputEmail13" class="form-control" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword13"
class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password"
id="inputPassword13" class="form-control" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit"
class="btn btn-primary">Login</button>
</div>
</div>
</form>
</body>
</html>Hasilnya seperti dibawah ini ya
 |
| Gambar 3 Form Horizontal Bootstrap |
Coba kalian eksperimen sendiri, misalnya kalau col-sm-offset 2 kamu hapus apa yang terjadi ?Jika col-sm-10 kamu ganti apa yang terjadi ?
- Baca :
4. INPUT TAMBAHAN
Ada beberapa input yang bisa kamu tambahkan pada form, di sini om bewok akan memberikan beberapa tambahan inputan yaitu : Text input, text area, checkboxes, radios, select, focus state. Yuk kita pelajari satu - satu
4.1 TEXT INPUT
Text input ini biasa digunakan untuk menuliskan username, nama panjang, nama email dan lain - lain. Tidak ada istimewa nya juga sih, biasa saja tapi sangat penting pada form sebenernya ini bukan di bilang input tambahan,
why ?
karena pasti digunakan ketika membuat form atau sebagainya, Kodinganya seperti apa ? mari kita mulai.
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<input type="text" class="form-control" placeholder="Text input">
</body>
</html>
Hasilnya seperti dibawah ini ya
 |
| Gambar 4.1 Tampilan Input Text |
4.2 TEXT AREA
Text area ini biasa digunakan untuk message, misalnya kalau kamu ingin bertanya atau ingin mengirim email kepada seseorang biasanya menggunakan yang namanya text area. Kodinganya seperti dibawah ini ya.
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<textarea class="form-control" rows="5" placeholder="Tulis Disini"></textarea>
</body>
</html>
Maka Hasilnya seperti dibawah ini.
 |
| Gambar 4.2 Text Area |
- Baca :
4.3 CHECKBOXES
Checkboxes adalah persamaan dari check list, istilahnya di centang. checkbox ini digunakan untuk pemilihan misalnya untuk jenis kelamin, hobby, dan sebagainya, langsung saja kita buat kodinganya.
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<h3>Hobby anda</h3>
<div class="checkbox">
<label>
<input type="checkbox">
Bola
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
Basketball
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
Baseball
</label>
</div>
</body>
</html>
Maka Hasilnya seperti dibawah ini ya.
 |
| Gambar 4,3 Checkboxes Bootstrap |
Kali ini kita bukan mau dengerin radio ya, tapi kita ingin membuat tombol bulat nah makanya disebut radio button. masih bingung juga sih kenapa namanya radio button, yaudahlah langsung dipraktekan saja, sudah malem nih jam 2:08 #sedikitCurcol.
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<h3>Gender</h3>
<div class="radio">
<label>
<input type="radio" name="optionRadio" id="optionRadio1" value="option1" checked>Pria
</label>
<label>
<input type="radio" name="optionRadio" id="optionRadio1" value="option2" >Perempuan
</label>
</div>
</body>
</html>
Hasilnya seperti dibawah ini ya.
 |
| Gambar 4.4 Radio Button ala Bootstrap |
- Baca :
4.5 SELECT
Ini select yang ada di stik ps ? bukan.Select ini di gunakan untuk memilih tanggal lahir, kan biasanya suka ada pilihanya tuh. nah biasanya menggunakan select ini, biar ga penasaran mari kita buat kodinganya seperti dibawah ini ya.
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<h3>Tanggal Lahir</h3>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select class="form-control">
<option>Januari</option>
<option>Febuari</option>
<option>Maret</option>
<option>April</option>
</select>
<select class="form-control">
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
</select>
</body>
</html>
Maka Hasilnya seperti dibawah ini ya.
 |
| Gambar 4.5 Mengenai Select Pada Bootstrap |
Hmm gimana ya jelasinya, bingung, om bewok kasih contoh aja deh, kalau kita biasa bikin nama di form menggunakan input text, nah kalau ini nama nya sudah tidak bisa diubah sudah fix nama itu. biasanya ini digunakan ketika membeli barang olshop (Online Shop), kan setelah kita memasukan identitas kita, nah untuk check lagi nama nya benar atau enggak biasanya muncul tulisanya, tapi namanya sudah tidak bisa di hapus lagi, kecuali harus kembali atau juga menggunakan button edit. Mungkin kalau masih bingung langsung kita praktekan saja ya.
- Baca :
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Belajar Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Nama Panjang</label>
<div class="col-sm-10">
<p class="form-control-static">Bewok satu kosong</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Alamat</label>
<div class="col-sm-10">
<p class="form-control-static">Jl Suryadarma bj299 Bekasi, Indonesia</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Barang</label>
<div class="col-sm-10">
<p class="form-control-static">mobil 5 biji </p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Harga</label>
<div class="col-sm-10">
<p
class="form-control-static">Rp.5.000.000.000.000.000 mahal dah pokoknya</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
<button class="btn btn-primary">Kirim</button>
</label>
</div>
</form>
</body>
</html> |
| Gambar 4,6 Static Control Bootstrap |
- Baca :
Yap itu saja belajar bootstrap mengenai form bagian 1, karena kepanjangan, maka di buatkan 2 bagian, yang selanjutnya ga banyak kok, ya ada lah 10 lembar mah :p. Untuk melihat tutorial fom part 2 ada di sini Belajar Bootstrap Part 6 Mengenai Form Bagian 2 Good Luck
No comments:
Post a Comment