jQuery Mobile secara otomatis gaya bentuk HTML untuk membuat mereka terlihat menarik dan ramah-sentuh.
jQuery Mobile Form Struktur
jQuery Mobile menggunakan CSS untuk gaya bentuk HTML elemen, membuat mereka menarik dan mudah digunakan.
Dalam jQuery Mobile Anda dapat menggunakan kontrol formulir berikut:
- Input teks
- Cari Masukan
- Tombol radio
- centang
- pilih Menu
- slider
- Switches Beralih sandal
Ketika bekerja dengan bentuk jQuery Mobile Anda harus tahu:
- The <form> elemen harus memiliki metode dan atribut aksi
- Setiap elemen bentuk harus memiliki unik "id" atribut. id harus unik di seluruh halaman di situs. Hal ini karena satu halaman navigasi Model jQuery Mobile memungkinkan banyak berbeda "halaman" untuk hadir pada saat yang sama
- Setiap elemen bentuk harus memiliki label. Mengatur untuk atribut label untuk mencocokkan id dari elemen
Contoh
<form method="post" action="demoform.asp" >
<label for="fname"> First name: </label>
<input
type="text" name="fname" id="fname" >
</form>
Cobalah sendiri " Tip: Gunakan placeholder untuk menentukan petunjuk singkat yang menggambarkan nilai yang diharapkan dari sebuah field input:
Contoh
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Cobalah sendiri " Tip: Untuk menyembunyikan label, gunakan "ui-hidden-accessible" kelas. Hal ini sering digunakan ketika Anda ingin atribut placeholder elemen untuk melayani sebagai label:
Contoh
<label for="fname"
class="ui-hidden-accessible" ">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Cobalah sendiri " Tip: Jika Anda ingin "clear button" (ikon X di sisi kanan dari kolom input yang membersihkan isi field), menambahkan data-jelas-btn = "true" atribut:
Contoh
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-clear-btn="true" >
Cobalah sendiri " The "clear button" dapat ditambahkan pada setiap <input> elemen, kecuali <textarea> . Bidang pencarian memiliki atribut ini diatur ke "true" sebagai default - untuk mengubahnya, hanya menentukan data-clear-btn="false" .
Tombol jQuery Mobile Form
Tombol dalam bentuk dikodekan dengan HTML standar <input> elemen (tombol, mereset, kirimkan). Mereka secara otomatis bergaya, membuat mereka menarik dan mudah digunakan pada perangkat seluler dan komputer desktop:
Contoh
<input type="button" value="Button">
<input type="reset" value="Reset
Button">
<input type="submit" value="Submit Button">
Cobalah sendiri " Untuk tambahan gaya sebuah <input> tombol, menggunakan salah satu atribut * data- tercantum dalam tabel di bawah:
Nilai Bold menunjukkan nilai default.
| Atribut | Nilai | Deskripsi |
|---|---|---|
| data-corners | true | false | Menentukan apakah tombol harus memiliki sudut dibulatkan atau tidak |
| data-icon | Icons Reference | Menentukan ikon tombol |
| data-iconpos | left | right | top | bottom | notext | Menentukan posisi ikon |
| data-inline | true | false | Menentukan apakah tombol harus inline atau tidak |
| data-mini | true | false | Menentukan apakah tombol harus kecil atau tidak |
| data-shadow | true | false | Menentukan apakah tombol harus memiliki bayangan atau tidak |
Menyertakan atau mengecualikan atribut (s) yang Anda inginkan / tidak ingin:
<input type="submit" value="Submit" data-icon="check"
data-iconpos="right" data-inline="true">
Cobalah sendiri " Field Containers
Untuk membuat label dan elemen form terlihat baik pada layar yang lebih luas, membungkus <div> atau <fieldset> elemen dengan "ui-field-contain" kelas sekitar elemen label / form:
Contoh
<form method="post" action="demoform.asp">
<div class="ui-field-contain" >
<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>
Cobalah sendiri " The "ui-field-contain" kelas label gaya dan bentuk kontrol berdasarkan lebar halaman. Ketika lebar halaman lebih besar dari 480px, maka secara otomatis menempatkan label pada baris yang sama sebagai bentuk kontrol. Ketika kurang dari 480px, label akan ditempatkan di atas elemen bentuk.
Tip: Untuk mencegah jQuery Mobile untuk secara otomatis gaya disadap / elemen diklik, menggunakan data-role="none" atribut:
Contoh
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-role="none" >
Cobalah sendiri " Pengiriman formulir di jQuery Mobile
jQuery Mobile secara otomatis akan menangani pengiriman formulir melalui AJAX, dan akan mencoba untuk mengintegrasikan respon server ke dalam DOM dari aplikasi.