Form adalah tempat dimana user yang melihat web dapat memberikan input / masukkan data, dalam membuat form bila dilakukan secara manual kita harus banyak menulis kode-kode css dalam mengatur perataan, besar kotak input, menyamakan label dan warnanya, tetapi apabila kita menggunakan class-class yang sudah disediakan oleh bootstrap akan jauh lebih mudah, khususnya dalam mengatur efek responsive
- Catatan Singkat
- Download
- Challenge
Membuat Form pada bootstrap
Langkah membuat file html dan css
- Jalankan program Brackets, pilih menu open folder dan buka folder tempat anda bekerja
- pilih menu File, new dan simpan dengan nama form.css
- isi ketikan css seperti kode dibawah ini
.kiri, .kanan { height: 1200px; color: white; } .kiri { background-color: #53777A; } .kanan { background-color: #542437; }
- pilih menu File, new dan simpan dengan nama form.html
- seperti langkah pada praktek sebelumnya buat dokumen html standard bootstrap dengan menggunakan emmet
- beberapa kata kunci emmet:
- ! (tanda seru)
- meta:vp
- link (arahkan ke 3 css, bootstrap, font-awesome, form.css)
- script:src (arahkan ke 2 file js yaitu jquery dan bootstrap)
- pada bagian isi ketik
- ketik perintah emmet berikut:
- div.row>div.container-fluid>div.col-sm-6.kiri+div.col-sm-6.kanan
- lalu tekan tab sehingga menjadi kode seperti dibawah ini
<div class="container-fluid"> <div class="row"> <div class="col-sm-6 kiri"> ... </div> <div class="col-sm-6 kanan"> ... </div> </div> </div>
Membuat Form sederhana dengan bootstrap
- pada bagian kiri ketik urutan perintah emmet berikut:
- form:post , tekan tab
- buat input untuk nama
- fieldset.form-group , tekan tab
- label{nama} , tekan tab, pada bagian for isi dengan id-nama
- input:t.form-control , tekan tab
- pada bagian name isi dengan nama
- pada bagian for isi dengan id-nama
- buat input untuk email
- cobalah membuat 1 form group lagi seperti langkah c sampai e tetapi tipenya bukan text tetapi email, dan namanya menjadi email
- buat tombol submit
- ketik: button:submit.btn.btn-lg.btn-info{Kirim} ,tekan tab
<h3>Componen form yang berguna</h3> <form action="" method="post"> <fieldset class="form-group"> <label for="id-nama">Nama</label> <input type="text" name="nama" id="id-nama" class="form-control"> </fieldset> <fieldset class="form-group"> <label for="id-email">Email</label> <input type="email" name="email" id="id-email" class="form-control"> </fieldset> <button type="submit" class="btn btn-lg btn-info">Kirim</button> </form>
Membuat Form Horizontal dengan bootstrap
- dibawah form yang telah dibuat pada langkah 6, ketik langkah berikut:
- form:post.form-horizontal , tekan tab
- membuat field nama
- div.form-group.row
- label.col-sm-2.form-control-label{Nama} , tekan tab , pada for ketik id-nama
- div.col-sm-10 , tekan tab
- input:t.form-control , tekan tab
- pada bagian name isi dengan nama
- pada bagian for isi dengan id-nama
- buat input untuk email
- cobalah membuat 1 form group lagi seperti sebelumnya tetapi tipenya bukan text tetapi email, dan namanya menjadi email
- buat tombol submit, ketik perintah berikut:
- button:submit.btn.btn-lg.btn-info{Kirim} ,tekan tab
<h3>Form Horizontal</h3> <form action="#" method="post" class="form-horizontal"> <div class="form-group row"> <label for="id-nama" class="col-sm-2 form-control-label">Nama</label> <div class="col-sm-10"> <input type="text" name="nama" id="id-nama" class="form-control"> </div> </div> <div class="form-group row"> <label for="id-email" class="col-sm-2 form-control-label">Email</label> <div class="col-sm-10"> <input type="email" name="email" id="id-email" class="form-control"> </div> </div> <button type="submit" class="btn btn-lg btn-info">Kirim</button> </form>
Beberapa class lain yang berguna
- lakukan copy paste kode html berikut pada kolom kanan
<h3>Componen form yang berguna</h3> <form action="" method="post"> <fieldset class="form-group"> <label for="id-jenis-kelamin">Jenis Kelamin</label> ... </fieldset> <fieldset class="form-group"> <label for="id-hobi">Hobi</label> ... </fieldset> <button type="submit" class="btn btn-lg btn-info">Kirim</button> </form>
- Anda dapat membuat dengan emmet / copy-paste kode yang ada pada kelasdigital.com
- Pada bagian dibawah label jenis kelamin ketik perintah berikut:
- (div.checkbox>label>input:radio[name="jenis-kelamin" value="p1"]{p1})*2
- pada label hapus pilihan for=””
- untuk p1 pertama ubah menjadi Laki-Laki
- untuk P1 kedua ubah menjadi Perempuan
- bila ingin memiliki 3 pilihan ubah angka 2 menjadi 3
- secara default pilihan akan tampak kebawah, bila anda menginginkan pilihan ke samping (sebaris), maka pada perintah diatas gunakan (div.checkbox-inline>…)
- pada bagian dibawah hobi, ketik perintah berikut:
- (div.radio-inline>label>input:checkbox[name="hobi" value="p1"]{p1})*2
- pada label hapus pilihan for=””
beberapa catatan lain
- hampir semua elemen input selain radio button dan checkbox menggunakan class form-control untuk mengatur tampilannnya.
- perhatikan contoh berikut input berupa select box
<fieldset class = "form-group"> <label for = "name">Pilihan anda</label> <select name="makanan" multiple class = "form-control"> <option>1. Soto</option> <option>2. Rawon</option> <option>3. Bakso</option> </select> </fieldset>
- untuk mengatur tinggi dari suatu input box dapat menggunakan class berikut:
- input-lg dan input-sm misalnya
<fieldset class="form-group input-lg"> ... </fieldset>
- untuk mengatur lebar dari suatu input dapat menggunakan teknik col-sm-...
- pada contoh dibawah ini adalah 2 kotak input yang memiliki besar 5 kolom dan 3 kolom
<div class="row"> <div class="col-sm-5"> <input type="text" class="form-control" nama="kotak-satu"> </div> <div class="col-xs-3"> <input type="text" class="form-control" name="kotak-dua"> </div> </div>
- kita dapat menggunakan class form-control-static untuk suatu tag untuk menyatakan suatu nilai
- berikut contohnya:
<div class="form-group"> <label class="col-xs-3 form-control-label">Username</label> <div class="col-xs-8"> <p class="form-control-static">Bugsy</p> </div> </div>
- Berikut adalah hasil lengkap dari praktek ini