Elemen Input Formulir jQuery Mobile

Input Teks jQuery Mobile

Bidang input ditulis dengan elemen HTML standar, jQuery Mobile akan menetapkan gaya yang khusus dan mudah digunakan untuk perangkat bergerak. Anda juga dapat menggunakan tipe 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">Ulang Tahun:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" placeholder="Alamat email anda..">
  </div>
</form>

Coba Sendiri

Petunjuk:Gunakan placeholder untuk menentukan peringatan singkat yang mendeskripsikan nilai yang diharapkan untuk bidang input:

<input placeholder="sometext">

Kotak teks

Gunakan <textarea> untuk mencapai input teks berbaris.

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

Contoh

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

Coba Sendiri

Kotak pencarian

Tipe input type="search" adalah tipe 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>

Coba Sendiri

Tombol pilihan tunggal

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

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

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

Contoh

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Pilih gender Anda:</legend>
      <label for="male">Pria</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>

Coba Sendiri

Kotak centang

Kotak centang digunakan saat pengguna memilih satu atau beberapa opsi dari jumlah pilihan terbatas:

Contoh

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Pilih sebanyak yang Anda inginkan warna kesukaan:</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">Biru</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

Coba Sendiri

Contoh lain

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

Contoh

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

Coba Sendiri

Anda juga dapat menggunakan kontainer domain untuk membalut <fieldset>:

Contoh

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Pilih gender Anda:</legend>
  </fieldset>
</div>

Coba Sendiri

Jika Anda ingin "pilih sebelumnya" salah satu tombol, gunakan atribut checked tanda <input> HTML:

Contoh

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

Coba Sendiri