Elemen input formulir jQuery Mobile

Input teks jQuery Mobile

Bidang input ditulis melalui elemen HTML standar, jQuery Mobile akan menetapkan gaya yang indah dan mudah digunakan khusus untuk perangkat bergerak. Anda juga dapat menggunakan jenis HTML5 <input> baru:

Contoh

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Nama lengkap:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Ulasan:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">E-mail:</label>
    <input type="email" name="email" id="email" placeholder="Alamat email anda..">
  </div>
</form>

Cuba Sendiri

Petikan:Gunakan placeholder untuk menentukan penanda singkat untuk mendeskripsikan nilai yang diharapkan untuk bidang input:

<input placeholder="sometext">

Kotak teks

Gunakan <textarea> untuk mencapai input teks berbaris.

Keterangan:Kotak teks akan memperluas otomatis untuk menyesuaikan dengan baris teks yang anda masukkan.

Contoh

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Additional Information:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

Cuba Sendiri

Kotak pencarian

Tipe input type="search" adalah jenis baru di HTML5 yang digunakan untuk mendefinisikan bidang teks untuk menginput kata kunci pencarian:

Contoh

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Search:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

Cuba Sendiri

Pilihan tunggal

Pilihan tunggal digunakan saat pengguna hanya memilih salah satu opsi yang terbatas.

Untuk membuat set pilihan tunggal, tambahkan elemen input dengan type="radio" serta label yang sesuai. Lengkapkan pilihan tunggal di dalam elemen <fieldset>. Anda juga dapat menambahkan elemen <legend> untuk menentukan judul <fieldset>.

Petikan:Gunakan atribut data-role="controlgroup" untuk menggabungkan tombol ini:

Contoh

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Pilih jantina anda:</legend>
      <label for="male">Laki-laki</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Wanita</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

Cuba Sendiri

Kotak centang

Kotak centang digunakan ketika pengguna memilih satu atau lebih pilihan dari jumlah pilihan terhadap limit:

Contoh

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Pilih sebanyak warna kegemaran anda yang diinginkan:</legend>
      <label for="red">Merah</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Hijau</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Bue</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

Cuba Sendiri

Contoh lanjut

Untuk menggabungkan kotak pilihan atau kotak centang secara horizontal, gunakan atribut data-type="horizontal":

Contoh

<fieldset data-role="controlgroup" data-type="horizontal">

Cuba Sendiri

Anda juga boleh menggunakan pengkapsul penempatan untuk membalut <fieldset>:

Contoh

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Pilih jantina anda:</legend>
  </fieldset>
</div>

Cuba Sendiri

Jika anda mahu "pilihan sebelumnya" salah satu tombol, gunakan atribut checked tanda <input> HTML:

Contoh

<input type="radio"> checked>
<input type="checkbox"> checked>

Cuba Sendiri