Tutorial jQuery Mobile membentuk masukan Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari
jQuery Mobile kotak input teks,contoh,text Field,contoh,Cari kotak input,contoh,tombol radio,contoh,kotak centang,contoh,contoh yang lebih,contoh,contoh,contoh,contoh,
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
<form method="post" action="demo_form.php">
<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="你的电子邮箱id">
</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
<form method="post" action="demo_form.php">
<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
<form method="post" action="demo_form.php">
<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
<form method="post" action="demo_form.php">
<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
<form method="post" action="demo_form.php">
<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":
contoh
<fieldset data-role="controlgroup" data-type="horizontal">
Coba » Anda juga dapat menggunakan lapangan kontainer dikelilingi oleh <fieldset>:
contoh
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>
Coba » Jika Anda ingin tombol Anda dalam atribut pra-dipilih, menggunakan HTML <input> diperiksa:
contoh
<input type="radio" checked>
<input type="checkbox" checked>
Coba » Anda dapat pop pada formulir:
contoh
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline"> Tampilkan Popup Formulir </a>
<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 »