Form
Dasar
Membuat Form kamu perlu menambahkan class .form pada tag <input>, <select> atau <textarea>, diikuti dengan class untuk style Form-nya ketika focus/aktif. Ada class .form--focus-blue, .form--focus-green, .form--focus-red, dan .form--focus-orange.
Jika kamu ingin menambahkan Label pada Form, kamu perlu menambahkan tag <label> sebelum tag <input>, <select> atau <textarea>, bungkus Label dan Form menggunakan tag <div> dengan class .form-group, supaya code kita terlihat lebih rapi. Jika kamu ingin membuat Label satu lagi disebelah kanan Form, saya menyebutnya Optional Label yang bisa kamu gunakan ketika ada Form yang sifatnya Optional (Pilihan), pertama kamu perlu menambahkan class .form-group--d-flex setelah class .form-group, kedua kamu perlu menambahkan class .optional-label pada salah satu tag <label>, letakkan element <label class="optional-label"> dibawah Label tanpa class .optional-label.
Kamu juga bisa membuat Form-nya sejajar, salah satu caranya adalah kamu bisa membuat element menggunakan tag <div> dengan class .form-row, lalu didalamnya buat element menggunakan tag <div> dengan class .col-md-6, atau kamu bisa menggunakan class lain sesuai dengan dokumentasi grid sistem Bootstrap, dan didalamnya kamu bisa meletakkan Form-nya. Penjelasan detailnya bisa kamu lihat di dokumentasi form Bootstrap.
Perlu Kamu tahu bahwa Form baik menggunakan tag <input>, <select>, <textarea> dengan class .form, Form yang menggunakan Label dan Text Bantuan yang dibungkus menggunakan tag <div> dengan class .form-group, dan Input Group, secara standar memiliki margin top sebesar 1rem. Sedangkan Checkbox, Radio yang dibungkus menggunakan tag <div> dengan class .form-check, secara standar memiliki margin top sebesar .5rem.
<div class="form-row">
<div class="col-md-6">
<input type="text" name="nama" placeholder="Nama Depan ..." class="form form--focus-blue mt-0">
</div>
<div class="col-md-6">
<input type="text" name="nama" placeholder="Nama Belakang ..." class="form form--focus-blue mt-3 mt-md-0">
</div>
</div>
<div class="form-group form-group--d-flex">
<label>Tempat Tanggal Lahir</label>
<label class="optional-label">Wajib</label>
<input type="text" name="tempatlahir" placeholder="Tempat Tanggal Lahir ..." class="form form--focus-blue">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Umur</label>
<input type="text" name="umur" placeholder="Umur ..." class="form form--focus-blue">
</div>
<div class="form-group col-md-6">
<label>Hobi</label>
<input type="text" name="hobi" placeholder="Hobi ..." class="form form--focus-blue">
</div>
</div>
<select name="country" class="form form--focus-blue">
<option selected="">Jenis Kelamin ...</option>
<option value="Laki-Laki">Laki-Laki</option>
<option value="Perempuan">Perempuan</option>
</select>
<textarea name="nama" class="form form--focus-blue" placeholder="Alamat ..."></textarea>
<input type="file" name="file" class="form form--focus-blue">Checkbox dan Radio
Membuat Checkbox dan Radio kamu membutuhkan tag <div> dengan class .form-check, didalamnya kamu letakkan Checkbox atau Radio dengan class .form diikuti class untuk style Form-nya ketika focus/aktif, lalu dibawahnya kamu buat Label menggunakan tag <label> dengan class .form-check__label dan didalam tag <label> masukkan text keterangan untuk Checkbox atau Radio-nya.
Jika kamu ingin membuat Checkbox dan Radio tanpa Label, kamu perlu menambahkan class .form-check--not-label setelah class .form-check. Jika kamu ingin membuat input Checkbox dan Radio sejajar atau inline kamu perlu menambahkan class .form-check--inline setelah class .form-check.
<!-- input checkbox dengan label -->
<div class="form-check mt-0">
<input type="checkbox" name="input_check" id="input_check" class="form form--focus-blue">
<label for="input_check" class="form-check__label">Checkbox</label>
</div>
<!-- input checkbox tanpa label -->
<div class="form-check form-check--not-label">
<input type="checkbox" name="input_check_disabled" class="form form--focus-blue">
</div>
<!-- input radio dengan label -->
<div class="form-check">
<input type="radio" name="input_radio" id="input_radio" class="form form--focus-blue">
<label for="input_radio" class="form-check__label">Radio</label>
</div>
<!-- input radio tanpa label -->
<div class="form-check form-check--not-label">
<input type="radio" name="input_radio" class="form form--focus-blue">
</div>
<!-- input checkbox dan radio sejajar atau inline -->
<div class="form-check form-check--inline">
<input type="checkbox" name="input_check" id="input_check2" class="form form--focus-blue">
<label for="input_check2" class="form-check__label">Inline Checkbox</label>
</div>
<div class="form-check form-check--inline">
<input type="radio" name="input_radio" id="input_radio2" class="form form--focus-blue">
<label for="input_radio2" class="form-check__label">Inline Radio</label>
</div>Disabled
Membuat Form Disabled kamu perlu menambahkan attribute disabled="" pada tag <input>, <select> atau <textarea>.
<input type="text" name="nama" placeholder="Nama ..." disabled="" class="form form--focus-blue mt-0">
<select name="jeniskelamin" disabled="" class="form form--focus-blue">
<option selected="">Jenis Kelamin ...</option>
<option value="Laki-Laki">Laki-Laki</option>
<option value="Perempuan">Perempuan</option>
</select>
<textarea class="form form--focus-blue" disabled="" placeholder="Alamat ..."></textarea>
<div class="form-check">
<input type="checkbox" name="input_check" id="input_check_disabled" class="form form--focus-blue" disabled="">
<label for="input_check_disabled" class="form-check__label">Checkbox Disabled</label>
</div>
<div class="form-check">
<input type="radio" name="input_radio_disabled" id="input_radio_disabled" class="form form--focus-blue" disabled="">
<label for="input_radio_disabled" class="form-check__label">Radio Disabled</label>
</div>Text Bantuan
Membuat text bantuan kamu perlu tag <small> dengan class .form-text.text-muted, jika kamu membuat Form tanpa label menggunakan tag <input>, <select> atau <textarea>, kamu perlu membungkus Form dan Text Bantuan menggunakan tag <div> dengan class .form-group dan letakkan Text Bantuan setelah Form. Untuk Checkbox dan Radio kamu tidak perlu menambahkan class .form-text pada tag <small>, letakkan Text Bantuan didalam element <div class="form-check"> setelah Label (jika menggunakan Label) atau letakkan Text Bantuan setelah Form (jika tidak menggunakan Label).
<div class="form-group mt-0">
<input type="text" name="nama" placeholder="Nama ..." class="form form--focus-blue">
<small class="form-text text-muted">Text bantuan</small>
</div>
<div class="form-group">
<select class="form form--focus-blue" name="jeniskelamin">
<option selected="">Jenis Kelamin ...</option>
<option value="Laki-Laki">Laki-Laki</option>
<option value="Perempuan">Perempuan</option>
</select>
<small class="form-text text-muted">Text bantuan</small>
</div>
<div class="form-group">
<textarea class="form form--focus-blue" name="alamat" placeholder="Alamat ..."></textarea>
<small class="form-text text-muted">Text bantuan</small>
</div>
<div class="form-check">
<input type="checkbox" name="check" id="check" class="form form--focus-blue">
<label class="form-check__label" for="check">Checkbox</label>
<small class="text-muted">Text bantuan</small>
</div>
<div class="form-check">
<input type="radio" name="radio" id="radio" class="form form--focus-blue">
<label class="form-check__label" for="radio">Radio</label>
<small class="text-muted">Text bantuan</small>
</div>
<div class="form-check form-check--not-label">
<input type="checkbox" name="check" class="form form--focus-blue">
<small class="text-muted">Text bantuan</small>
</div>
<div class="form-check form-check--not-label">
<input type="radio" name="radio" class="form form--focus-blue">
<small class="text-muted">Text bantuan</small>
</div>Pesan
Membuat Pesan hampir sama dengan membuat Text Bantuan, kamu hanya perlu menambahkan class .form--success, .form--info, .form--warning, atau .form--danger pada tag <input>, <select> atau <textarea> setelah class untuk style Form-nya ketika focus/aktif, dan mengganti class .text-muted pada tag <small> dengan class .form-text--green, .form-text--blue, .form-text--orange, atau .form-text--red.
Kamu hanya bisa membuat Pesan menggunakan tag <input>, <select>, dan <textarea>.
<div class="form-group mt-0">
<label>Pesan Success</label>
<input name="pesansuccess" class="form form--focus-green form--success" placeholder="Pesan Success..." value="Pesan Success">
<small class="form-text form-text--green">Password berhasil di edit.</small>
</div>
<div class="form-group">
<label>Pesan Info</label>
<input name="pesaninfo" class="form form--focus-blue form--info" placeholder="Pesan Info ..." value="Pesan Info">
<small class="form-text form-text--blue">Ini benar.</small>
</div>
<div class="form-group">
<label>Pesan Danger</label>
<input name="pesandanger" class="form form--focus-red form--danger" placeholder="Pesan Danger ..." value="Pesan Danger">
<small class="form-text form-text--red">Password tidak valid!</small>
</div>
<div class="form-group">
<label>Pesan Warning</label>
<input name="Pesan" class="form form--focus-orange form--warning" placeholder="Pesan Warning ..." value="Pesan Warning">
<small class="form-text form-text--orange">Password harus 5 karakter atau lebih!</small>
</div>Input Group
Membuat Input Group kamu perlu tag <div> dengan class .input-group, didalamnya ada 3 bagian yaitu Prepend, Form, dan Append. Prepend dan Append adalah tempat dimana kamu bisa meletakkan Text, Checkbox atau Radio, dan Button. Prepend sebelah kiri dan Append sebelah kanan. Kamu bisa menggunakan salah satu atau keduanya. Pada bagian Form kamu hanya bisa menggunakan tag <input>, <select>, dan <textarea>.
Membuat Prepend kamu membutuhkan tag <div> dengan class .input-group__prepend, didalamnya untuk menambahkan text kamu perlu tag <span> dengan class .input-group__text dan letakkan text-nya didalam tag <span>. Untuk menambahkan Checkbox atau Radio kamu perlu tag <div> dengan class .input-group__text, lalu didalamnya kamu bisa meletakkan Checkbox atau Radio. Untuk menambahkan Button kamu bisa meletakkan Button langsung didalam element <div class="input-group__prepend">. Letakkan Prepend sebelum Form.
Membuat Append kamu membutuhkan tag <div> dengan class .input-group__append, didalamnya untuk menambahkan Button, Checkbox atau Radio dan Text caranya sama seperti Prepend. Letakkan Append setelah Form.
<div class="input-group mt-0">
<div class="input-group__prepend">
<span class="input-group__text">Alamat</span>
</div>
<textarea type="text" name="alamat" placeholder="" class="form form--focus-blue"></textarea>
</div>
<div class="input-group">
<div class="input-group__prepend">
<span class="input-group__text">Rp</span>
</div>
<input type="text" name="harga" placeholder="" class="form form--focus-blue">
<div class="input-group__append">
<span class="input-group__text">,00</span>
</div>
</div>
<div class="input-group">
<div class="input-group__prepend">
<div class="input-group__text">
<input type="checkbox" name="checkbox" class="form form--focus-blue">
</div>
</div>
<input type="text" name="text" placeholder="" class="form form--focus-blue">
</div>
<div class="input-group">
<div class="input-group__prepend">
<a href="#" class="btn btn--blue"><span class="fa fa-envelope"></span></a>
</div>
<input type="text" name="addon_4" placeholder="" class="form form--focus-blue">
<div class="input-group__append">
<span class="input-group__text">@reza.com</span>
</div>
</div>