bewoksatukosong.com | Halo semua balik dengan om bewok, kali ini om bewok akan melanjutkan tutorial selanjutnya yaitu Belajar Bootstrap part 6 Mengenai Form Bagian 2, kalau teman - teman belum liat sebelumnya bisa lihat di bawah ini
Baca :
Bagian I Form Disabled
Untuk tutorial pertama om bewok akan menjelaskan mengenai form disabled, maksud dari disabled adalah mencacatkan, melumpuhkan Sumber
Jika kita konversikan ke bahasa yang lebih mudah dimengerti adalah tidak bisa diubah.
Jadi yang akan kita lakukan adalah input text, select option, checkbox dan button tidak bisa digunakan atau tidak bisa diubah sama sekali.
Contoh kodinganya teman - teman bisa lihat dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Disabled Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disable Input</label>
<input type="text" id="disableTextInput" class="form-control" placeholder="Tidak bisa diubah"/>
</div>
<div class="form-group">
<label for="disableSelect">Disable Select Menu</label>
<select id="disableSelect" class="form-control">
<option>tidak bisa diganti</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Tidak bisa check list
</label>
</div>
<button type="submit" class="btn btn-danger">Submit</button>
</fieldset>
</form>
</body>
</html>Hasilnya bisa kamu lihat dibawah ini.
 |
| Gambar I.1 Tampilan Form Disabled |
Mungkin teman - teman bingung, bagian mana aja yang bisa mengubah form input, checkbox dan button menjadi disabled ?
Mari kita bahas setelah pesan - pesan berikut ini (iklan muncul).
- Sebenernya kita tidak perlu memperdulikan masalah id input text, atau select id nya karena tidak akan berpengaruh dalam disabled ini, yang membuat form ini tidak bisa diubah yaitu pada bagian fieldset nya. Kita lihat bahwa bagian fieldset nya kita buat menjadi disabled, yang perlu kita lakukan adalah menghapus bagian disabled pada fieldsetnya, maka yang terjadi adalah semua bisa kembali seperti semula dalam artian kita bisa mengubahnya, seperti contoh dibawah ini.
 |
| Gambar I.2 Tampilan Form Yang Bisa Diubah |
Lihat gambar I.2 om bewok bisa menggunakan seperti semula, maksudnya om bewok bisa menulis text pada inputnya, lalu juga bisa checklist yang tadinya tidak bisa dan button pun juga bisa digunakan kembali.
Baca :
- Tutorial Series Bootstrap Dari Dasar Sampai Membuat Website Dengan Bootstrap
Bagian II Status Validasi Atau Validate State
Untuk Tutoral kedua, kita akan membahas mengenai form validasi, mungkin teman - teman pernah lihat pada saat form pendaftaran, jika kamu memasukan sebuah username, lalu ketika nama yang kamu masukan sama dengan orang lain maka form berubah warna merah, dan akan mengatakan bahwa username yang kamu tulis sudah digunakan oleh orang lain, tetapi jika berhasil nama yang digunakan atau tidak ada orang lain yang menggunkanya, biasanya form tersebut berubah menjadi warna hijau dan artinya sukses (selamat ya ) , kali ini kita belajar seperti itu, lebih tepatnya design-nya ya, karena untuk yang seperti tadi dibutuhkan sebuah kodingan yang meng-arah ke sistem, tetapi disini kita lebih ke tampilan design-nya ya.
Contoh kodenya seperti dibawah ini ya
<!DOCTYPE html>
<html>
<head>
<title>Belajar Form Validasi</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<!-- Untuk bagian input form validasi -->
<div class="form-group has-success">
<label class="control-label" for="inputanSukses">Input dengan sukses</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputanWarning1">Input dengan warning</label>
<input type="text" class="form-control" id="inputWarning1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-error">
<label class="control-label" for="inputanError1">Input dengan error</label>
<input type="text" class="form-control" id="inputError1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<!-- end untuk bagian form validasi -->
<!-- checklist untuk validasi -->
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option2">
Checkbox with warning
</label>
</div>
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<!-- end checklist untuk validasi -->
</body>
</html>
 |
| Gambar II.3 Tampilan Form Validasi |
Mari kita bedah mengenai form validasi ini. Konsepnya sebenarnya sama seperti Bagian I, karena bootstrap sering mengubahnya dari bagian div class, jadi konsepnya adalah memberikan nama div class lalu semua design formnya akan berubah. kita mempunyai 3 div class diantaranya adalah :
- form-group has-success
- form-group has-warning
- form-group has-error
Kamu bisa latihan sendiri dirumah untuk mengubah - ubah codingan tersebut, sering - seringlah untuk mengubah agar kamu lebih paham karena memang untuk Belajar Bootstrap part 6 Mengenai Form Bagian 2 perlu usaha agar kamu lebih mengerti.
Bagian III Status Validasi Dengan Icon Atau Validate State With Icon
Mungkin kamu sering melihat jika di form tersebut, mempunyai icon silang, checklist atau yang lain, fungsinya untuk apa ? fungsinya sama seperti contoh dari Bagian II, icon checklist berfungsi jika kamu membuat username baru dan tidak ada orang yang membuat username yang sama denga kamu, maka pembuatan username kamu sukses dan muncul icon checlist tersebut, berbeda lagi dengan icon silang berwarna merah jika di bootstrap di sebut error, itu biasanya di gunakan ketika kamu membuat username baru tapi ada orang lain yang sama dengan username kamu, maka akan muncul icon error tersebut. Bootstrap sudah menyediakan banyak sekali icon, jadi kamu tidak perlu repot - repot untuk mencari lagi, kamu bisa check disini Icon Bootstrap
Baca :
-Tutorial CSS Lengkap Bersama Om Bewok
Jadi yang kita lakukan adalah menggabungkan tutorial yang Bagian II dan Bagian III. Untuk kodinganya kamu bisa lihat dibawah sini.
Jadi yang kita lakukan adalah menggabungkan tutorial yang Bagian II dan Bagian III. Untuk kodinganya kamu bisa lihat dibawah sini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Form Validasi</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<!-- Untuk bagian input form validasi -->
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputanSukses">Input dengan sukses</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="helpBlock2" class="help-block">Ini ketika sukses (selamat Ya sukses :D) .</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputanWarning1">Input dengan warning</label>
<input type="text" class="form-control" id="inputWarning1" aria-describedby="helpBlock2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="helpBlock2" class="help-block">Ini ketika sedang peringatan.</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputanError1">Input dengan error</label>
<input type="text" class="form-control" id="inputError1" aria-describedby="helpBlock2">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="helpBlock2" class="help-block">ini ketika username kamu sama dengan orang lain.</span>
</div>
<!-- end untuk bagian form validasi -->
</body>
</html>
 |
| Gambar III.1 Form Validasi With Icon |
Kita bisa lihat bahwa om bewok menambahkan sedikit dari Bagian II, om bewok hanya menambahkan has-feedback dibagian div class, cieh langsung ngecheck ke kodingan yang atas. dan om bewok menambahkan span class yang mana icon yang kita ambil dari Icon Bootstrap.
Apakah kita bisa menambahkan icon di bagian depan ?
- Tentu saja bisa, Kodinganya teman - teman bisa lihat dibawah
<!DOCTYPE html>
<html>
<head>
<title>Belajar Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess">Input success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form>
</body>
</html> |
| Gambar III.2 Tampilan Icon Di Depan Pada Form |
Control sizing adalah mengatur semua ukuran dalam ukuran inputan form, label dan lain - lain. Untuk menghemat langsung saja kita mulai, Untuk control sizing kita bagi 3 di antaranya adalah
- Height Sizing
- Label Sizing
- Column Sizing
1. Height Sizing
Height Sizing maksudnya adalah kita mengatur tingginya input text dan select size dengan memanggil class yang sudah dibuat oleh bootstrap. Kodingan seperti dibawah ini ya
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<h1>Size Input Text</h1>
<input class="form-control input-lg" type="text" placeholder=".input-lg"/>
<input class="form-control" type="text" placeholder="Default Input"/>
<input class="form-control input-sm" type="text" placeholder=".input-sm"/>
<br/>
<br/>
<h2>Select Size</h2>
<select class="form-control input-lg">...
<option>ini inputan input lg</option>
</select>
<select class="form-control">...
<option>ini inputan input default</option>
</select>
<select class="form-control input-sm">...
<option>ini inputan input sm</option>
</select>
</body>
</html>
 |
| Gambar IV.1 Tampilan Input Text Sizing & Select Sizing |
Baca :
- Tutorial HTML Lengkap Dengan Om Bewok
2. Label Sizing
Label Sizing maksudnya disini kita akan mengatur ukuran label nya, kalau tadi kan input nya, sebenernya konsep yang digunakan masih sama kok. Contoh kodingnya seperti dibawah ini ya
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<br/>
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large Label</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="FormGroupInputLarge" placeholder="Large Input"/>
</div>
</div>
<br/>
<br/>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Small Label</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="FormGroupInputSmall" placeholder="Small Input"/>
</div>
</div>
</form>
</body>
</html>
 |
| Gambar IV.2 Tampilan Label Sizing |
<form class="form-horizontal">
Jika kita tidak menggunakan ini, maka kita tidak memberikan jarak antar inputan dan label kamu bisa mencobanya sendiri.
<div class="form-group form-group-lg">
Ini maksudnya lebih mengendalikan di label dan input text, jika kamu akan hapus maka ukuran input text dan label pun akan berubah
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large Label</label>
Ini untuk posisi text label nya, jika kamu memberi col-sm-4 maka text label akan maju.
<div class="col-sm-10">
Ini untuk mengatur ukuran dari inputan text, jika kamu ganti dengan col-sm-12 maka dia akan kebawah. Mengapa ? karena om bewok pernah bilang bahwa ukuran dari kiri sampai kanan yaitu 12. di karenakan ada label col-sm-2 + col-sm-12 maka hasilnya 14, secara otomatis dia akan kebawah, kamu bisa mencobanya agar lebih mengerti
3. Column Sizing
Konsep ini sama seperti kita belajar grid system waktu itu, perbedaanya adalah kita hanya menambahkan inputan text agar bisa dikendalikan ukuran panjang kotak tersebut, kalau tadi kan tinggi kotaknya, jika sekarang kita akan mencoba mengubah panjang kotaknya
Kodingan seperti dibawah ya.
saa
Hasilnya akan seperti dibawah ini
3. Column Sizing
Konsep ini sama seperti kita belajar grid system waktu itu, perbedaanya adalah kita hanya menambahkan inputan text agar bisa dikendalikan ukuran panjang kotak tersebut, kalau tadi kan tinggi kotaknya, jika sekarang kita akan mencoba mengubah panjang kotaknya
Kodingan seperti dibawah ya.
saa
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
</body>
</html>
 |
| Gambar IV.3 Tampilan Control Size |
Kita bisa lihat ukuranya berubah - ubah karena settinganya tadi yang kita coba secara berurutan col-sm-2 col-sm-3 col-sm-4
Kamu bisa coba untuk col-sm-5 col-sm-6 dan sampai seterusnya, dan Apa yang terjadi apakah hanya 1 baris yang digunakan atau sampai 2 baris atau sampai kebawah lagi. Kamu bisa mencobanya sendiri
Selesai Tutorial mengenai Form Bagian 2, Jika kamu ingin lihat Tutorial Form Bagian 1 kamu bisa lihat di sini Belajar Bootstrap Part 6 Mengenai Form bagian 1. Jika kamu ingin melihat tutorial semuanya mengenai bootstrap kamu bisa lihat disini Tutorial Dasar Sampai Membuat Website Menggunakan Bootstrap, Om bewok sudah membuat secara berurutan agar kamu tidak susah mencarinya
Selanjutnya kita akan belajar mengenai Button
No comments:
Post a Comment