Formulir jQuery Mobile

jQuery Mobile akan otomatis menambahkan penampilan yang mudah digunakan dan menarik bagi formulir HTML.

Struktur formulir jQuery Mobile

jQuery Mobile menggunakan CSS untuk menata gaya elemen formulir HTML, untuk membuatnya lebih menarik dan mudah digunakan.

Dalam jQuery Mobile, Anda dapat menggunakan kontrol formulir berikut:

  • Kotak teks
  • Kotak pencarian
  • Tombol pilihan tunggal
  • Kotak centang
  • Menu pilihan
  • Garis bergerak
  • Tombol toggle berputar

Ketika Anda berinteraksi dengan formulir jQuery Mobile, Anda seharusnya mengetahui informasi berikut:

  • Elemen <form> harus mengatur atribut method dan action
  • Setiap elemen formulir harus mengatur atribut "id" yang unik. Id ini di halaman situs harus unik. Ini disebabkan karena model navigasi halaman tunggal jQuery Mobile memungkinkan banyak halaman yang berbeda untuk ditampilkan bersamaan.
  • Setiap elemen formulir harus memiliki tanda (label). Atur atribut for label untuk cocok dengan id elemen.

Contoh

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>

Coba Sendiri

Untuk menyembunyikan label, gunakan kelas ui-hidden-accessible. Ini sering digunakan, ketika Anda memerlukan atribut placeholder properti elemen untuk berfungsi sebagai label:

Contoh

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">Nama：</label>
  <input type="text" name="fname" id="fname" placeholder="Nama...">
</form>

Coba Sendiri

Kontainer Bidang

Jika ingin label dan elemen formulir tampil dengan baik di layar lebar, gunakan elemen <div> atau <fieldset> dengan atribut data-role="fieldcontain" untuk melindungi label atau elemen formulir:

Contoh

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

Coba Sendiri

Petunjuk:Atribut fieldcontain disetel berdasarkan lebar halaman untuk menentukan gaya label dan kontrol formulir. Saat lebar halaman melebihi 480px, label dan kontrol formulir akan ditempatkan di baris yang sama. Saat kurang dari 480px, label akan ditempatkan di atas elemen formulir.

Petunjuk:Untuk menghindari penyesuaian gaya otomatis jQuery Mobile untuk elemen yang dapat diklik, gunakan atribut data-role="none":

Contoh

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname"} data-role="none">

Coba Sendiri

Melaksanakan Formulir di jQuery Mobile

Petunjuk:jQuery Mobile akan secara otomatis melaksanakan pengiriman formulir melalui AJAX, dan akan mencoba menggabungkan tanggapan server ke DOM aplikasi.