jQuery Mobile membentuk masukan
jQuery Mobile kotak input teks
Memasuki lapangan melalui HTML standar pengkodean elemen, jQuery Mobile akan menambah gaya mereka agar terlihat lebih menarik dan lebih mudah untuk digunakan pada perangkat mobile. Anda juga dapat menggunakan baru HTML5 <input> Jenis:
contoh
<div class="ui-field-contain">
<label for="fullname">全名:</label>
<input type="text" name="fullname" id="fullname">
<label for="bday">生日:</label>
<input type="date" name="bday" id="bday">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="你的电子邮箱..">
</div>
</form>
Coba »
Tip: Gunakan placeholder untuk menentukan deskripsi singkat yang menggambarkan nilai yang diharapkan dari field input:
<input placeholder="sometext">
text Field
Untuk multi-baris input teks dapat menggunakan <textarea>.
CATATAN: Ketika Anda mengetik beberapa teks, bidang teks akan otomatis diubah ukurannya agar sesuai dengan baris baru ditambahkan.
contoh
<div class="ui-field-contain">
<label for="info">附加信息:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
</form>
Coba »
Cari kotak input
ketik = "pencarian" jenis kotak input yang baru di HTML5, yang didefinisikan sebagai bidang pencarian input teks:
contoh
<div class="ui-field-contain">
<label for="search">搜索:</label>
<input type="search" name="search" id="search">
</div>
</form>
Coba »
tombol radio
Ketika pengguna memilih sejumlah pilih hanya satu pilihan saat menggunakan tombol radio.
Dalam rangka menciptakan serangkaian tombol radio, tambahkan masukan dan sesuai label dengan type = "radio" adalah. Tombol radio yang dikurung di dalam <fieldset> elemen. Anda juga dapat menambahkan <legend> elemen untuk mendefinisikan <fieldset> judul.
Tip: Gunakan Data-role = "controlgroup" tombol untuk menempatkan bersama-sama:
contoh
<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>
Coba »
kotak centang
Ketika pengguna memilih satu atau lebih pilihan dalam jumlah terbatas pilihan, kotak penggunaan cek:
contoh
<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>
Coba »
contoh yang lebih
Untuk kombinasi tombol radio horizontal atau kotak cek, menggunakan data-type = "horizontal":
Anda juga dapat menggunakan lapangan kontainer dikelilingi oleh <fieldset>:
contoh
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>
Coba »
Jika Anda ingin tombol Anda dalam atribut pra-dipilih, menggunakan HTML <input> diperiksa:
Anda dapat pop pada formulir:
contoh
<Div Data-role = "popup" id = "myPopup" class = "ui-content">
<Metode Form = "post" action = "demoform.php">
<Div>
<H3> Informasi Login </ h3>
<Label untuk = kelas "usrnm" = "ui-tersembunyi-diakses"> Username: </ label>
<Input type = "text" name = "user" id = "usrnm" placeholder = "username">
<Label untuk = kelas "pswd" = "ui-tersembunyi-diakses"> Password: </ label>
<Input type = "password" name = "sandi batasan" id = "pswd" placeholder = "password">
</ Div>
</ Form>
</ Div>
Coba »