jQuery Mobile (15): Membuat Formulir

Halo semuanya, kita kembali membahas tentang jQuery Mobile ya setelah sekitar 6 bulan lalu saya bahas tentang Menampilkan Tabel dengan Column Toggle dan Data-Priority. Membahas tentang formulir ini sangat berkaitan dengan tulisan saya yang lain yaitu di Seri Belajar HTML, bagaimana cara membuat formulir. Bahasan tersebut sampai dibuat dalam 2 tulisan bersambung, membuat formulir lanjutan πŸ˜€ .

Okeh, kita ngapain ini? πŸ˜†

Silakan buka dulu file kerangkanya dulu kemudian save-as menjadi jqm_formulir_input.html. Cari kodenya di pengantar ya. Selanjutnya nanti kita edit kodenya. Kita bahas teorinya dulu ya.

Kerangka

Sama seperti formulir di HTML, kita perlu tag <form> dan </form>. Semua elemen formulir harus diletakkan di antara keduanya. Untuk penjelasan tentang atribut yang ada di dalam tag form silakan baca tulisan saya yang lain, karena sama saja. Demikian juga untuk method dan action, sama.

Elemen Isian

Baiklah kita mulai yang pertama tentang inputan atau isian. Kita akan bahas input dengan tipe text, search,Β radio, checkbox, range dan textarea.

Input dengan tipe text bisa dibuat seperti ini:Β <input type="text" name="text">. Hasilnya berupa kolom isian 1 baris. Kemudian untuk isian yang lebih panjang dan bisa beberapa baris digunakan textarea, kodenya begini:Β <textarea cols="40" rows="5" name="textarea"></textarea>. Terus, pastinya kita pernah menemukan isian yang ada gambar/ikon kaca pembesar, ya kan? Nah itu menggunakan tipe search. Kodenya:Β <input type="search" name="search" placeholder="cari di sini...">.

Kemudian untuk isian angka tertentu yang kita batasi nilainya, misal dari 0-100, kita gunakan tipe range. Contoh:Β <input type="range" name="range" value="20" min="0" max="100" data-highlight="true">. Nanti hasilnya akan ditampilkan sebuah slider yang bisa digeser dari 0-100. Uniknya ada tampilan nilai angka yang kita pilih di sisi sebelah kiri dari slidernya. Lanjut ya. Kalau ingin pergeserannya dengan kelipatan tertentu juga bisa. Silakan ditambahkan atribut dengan format begini: step="angka". Jadi kalau digabung bisa seperti ini:Β <input type="range" name="range" value="20" min="0" max="100" step="10" data-highlight="true">.

Lanjuuuut maaang… πŸ˜€

Gimana kalau maunya ada 2 slider. misal untuk menentukan nilai batas bawah (minimal) dan nilai batas atas (maksimal)? Bisa, dengan tipe range juga. Tetapi kodenya agak berbeda sedikit ya, seperti ini:

<div data-role="rangeslider">
   <input type="range" name="range-min" min="0" max="10" value="3">
   <input type="range" name="range-max" min="0" max="10" value="7">
</div>

Sekarang teori untuk checkbox, perhatikan ya itu jangan salah baca πŸ˜† πŸ˜† πŸ˜† . Bentuknya berupa inputan tanda centang yang bisa dipilih beberapa atau semuanya. Kita bahas yang centang tunggal dulu. Begini kodenya:

<label for="checkbox-tunggal">Saya setuju dengan syarat dan ketentuan yang berlaku</label>
<input type="checkbox" name="checkbox" id="checkbox-tunggal">

Itu centang tunggal lho, sekarang multicentang, weh bahasanya 😎 .  Perhatikan formatnya:

<div data-role="controlgroup">
   <input type="checkbox" name="checkbox-1" id="checkbox-1" checked="checked">
   <label for="checkbox-1">Mie Ayam</label>
   <input type="checkbox" name="checkbox-2" id="checkbox-2">
   <label for="checkbox-2">Bakso Beranak</label>
   <input type="checkbox" name="checkbox-3" id="checkbox-3">
   <label for="checkbox-3">Soto Banjar</label>
   <input type="checkbox" name="checkbox-4" id="checkbox-4">
   <label for="checkbox-4">Rawon</label>
</div>

Ke halaman sebelah yuks… πŸ˜‰

Selanjutnya →

Halaman : 1 2 3 4

Share

Muhammad Erfan

aslinya karyawan, suka belajar pemrograman, senang berbagi ilmu melalui tulisan, lagi usaha menghasilkan uang online :cool:

You may also like...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *