jQuery Mobile Input Teks
field input dikodekan dengan elemen HTML standar, dan jQuery Mobile akan gaya mereka untuk terlihat menarik dan mudah digunakan untuk perangkat mobile. Anda juga dapat menggunakan HTML5 baru <input> jenis:
Contoh
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="fullname">Full name:</label>
<input
type="text" name="fullname" id="fullname">
<label
for="bday">Date of Birth:</label>
<input type="date" name="bday"
id="bday">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="Your email..">
</div>
</form>
Cobalah sendiri " text area
Gunakan <textarea> untuk input teks multi-line.
Catatan: text area akan secara otomatis tumbuh untuk menyesuaikan baris baru saat Anda mengetik beberapa teks.
Contoh
<label for="info">Additional Information:</label>
<textarea
name="addinfo" id="info"></textarea>
Cobalah sendiri " Cari Masukan
Input type="search" yang baru di HTML5, dan mendefinisikan kolom teks untuk memasukkan penelusuran:
Contoh
<label for="search">Search:</label>
<input
type="search" name="search" id="search">
Cobalah sendiri " Tombol radio
tombol radio digunakan ketika pengguna hanya dapat memilih salah satu dari sejumlah pilihan.
Untuk membuat satu set tombol radio, menambahkan input dengan type="radio" dan label yang sesuai. Bungkus tombol radio dalam <fieldset> elemen. Anda juga dapat menambahkan <legend> elemen untuk mendefinisikan keterangan untuk <fieldset> .
Tip: Gunakan data-role="controlgroup" , untuk kelompok tombol bersama-sama:
Contoh
<form method="post" action="demoform.asp">
<fieldset
data-role="controlgroup">
<legend>Choose your
gender:</legend>
<label
for="male">Male</label>
<input
type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input
type="radio" name="gender" id="female" value="female">
</fieldset>
</form>
Cobalah sendiri " centang
Centang digunakan saat pengguna dapat memilih satu atau lebih pilihan dari sejumlah pilihan:
Contoh
<form method="post" action="demoform.asp">
<fieldset
data-role="controlgroup">
<legend>Choose as many
favorite colors as you'd like:</legend>
<label for="red">Red</label>
<input
type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Green</label>
<input
type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blue</label>
<input
type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>
</form>
Cobalah sendiri " Contoh lebih
Untuk tombol radio kelompok atau centang horizontal, menggunakan data-type="horizontal" :
Anda juga bisa membungkus wadah lapangan sekitar <fieldset> :
Contoh
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
</fieldset>
</div>
Cobalah sendiri " Jika Anda ingin salah satu tombol Anda menjadi "pre-selected" , menggunakan HTML <input> atribut diperiksa:
Anda juga dapat menempatkan formulir Anda di dalam popup:
Contoh
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline">Show Popup Form</a>
<div
data-role="popup" id="myPopup" class="ui-content">
<form method="post" action="demoform.asp">
<div>
<h3>Login information</h3>
<label for="usrnm" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="usrnm" placeholder="Username">
<label for="pswd" class="ui-hidden-accessible">Password:</label>
<input type="password" name="passw" id="pswd" placeholder="Password">
</div>
</form>
</div>
Cobalah sendiri "