Borang jQuery Mobile

jQuery Mobile akan mengikut alam sebenarnya menambahkan penampilan yang mudah dipegang kepada borang HTML.

Struktur borang jQuery Mobile

jQuery Mobile menggunakan CSS untuk menetapkan gaya elemen borang HTML, untuk membenarkan lebih menarik dan mudah digunakan.

Dalam jQuery Mobile, anda boleh menggunakan alat borang berikut:

  • Kotak teks
  • Kotak carian
  • Kotak pilihan
  • Kotak centang
  • Pilihan menu
  • Pandu
  • Pindah pindah pengali

Ketika berinteraksi dengan borang jQuery Mobile, anda seharusnya mengerti maklumat berikut:

  • Elemen <form> mesti ditetapkan atribut method dan action.
  • Tiada sebarang elemen borang mesti ditetapkan atribut "id" yang unik. Id itu mesti unik di halaman laman tapak. Ini kerana model penerusan halaman tunggal jQuery Mobile membenarkan banyak "halaman" yang berbeza untuk dipaparkan secara serentak.
  • Setiap elemen formulir harus memiliki tanda (label). Atur atribut for label untuk cocok dengan id elemen.

实例

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

Coba Sendiri

Jika ingin menyembunyikan label, gunakan kelas ui-hidden-accessible. Ini sangat sering digunakan, ketika Anda memerlukan atribut placeholder elemen untuk berperan seperti label:

实例

<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

Kandang domain

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

实例

<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 menata gaya label dan elemen formulir berdasarkan lebar halaman. Saat lebar halaman melebihi 480px, label dan elemen formulir akan disebutkan di baris yang sama. Saat kurang dari 480px, label akan ditempatkan di atas elemen formulir.

Petunjuk:Jika ingin menghindari jQuery Mobile secara otomatis menata gaya bagi elemen yang dapat di klik, gunakan atribut data-role="none":

实例

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

Coba Sendiri

Pengiriman Formulir dalam jQuery Mobile

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