jQuery Mobile (15): Membuat Formulir

Yang berikutnya inputan tipe radio, bukan stasiun radio FM apalagi radio online ya… πŸ˜† . Konsepnya mirip dengan checkbox, bedanya adalah hanya bisa dipilih 1 saja. Kalau checkbok kan bisa banyak pilihan, sedangkan radio hanya bisa 1 saja, ingat 1 saja, ngomong apa coba? πŸ˜‰ Seperti apa kodenya? Nih, perhatikan:

<div data-role="controlgroup">
   <input type="radio" name="radio" id="radio-1" value="L" checked="checked">
   <label for="radio-1">Laki-laki</label>
   <input type="radio" name="radio" id="radio-2" value="P">
   <label for="radio-2">Perempuan</label>
</div>

Simpel kan kodenya? Sekarang kita gabung semuanya dari yang pertama tetapi dengan isi yang berbeda, oke. Bagian akhirnya ditambahkan tombol, silakan baca lagi bahasan kita tentang button menggunakan jQuery Mobile. Silakan buka file jqm_formulir_input.html kemudian sesuaikan kodenya menjadi seperti berikut ini, kemudian simpan dan jalankan. Perhatikan per huruf ya supaya jangan ada yang salah aau ketinggalan.

<!DOCTYPE html>
<html lang="ID">
<head>
  <title>Formulir jQuery Mobile</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
  <script src="jquery-1.11.1.min.js"></script>
  <script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <!-- START Definisikan sebagai Halaman {page} -->
  <div data-role="page">
  
    <!-- Membuat Header -->
    <header data-role="header">
      <h1>Formulir Input</h1>
    </header>
     
    <!-- Bagian ISI (Konten web) -->
    <div data-role="content">
      <p>Mohon isi pesanan Anda.</p>
      <form>
        <label>Nama Lengkap</label>
        <input type="text" name="nama">
        
        <label>Alamat</label>
        <textarea cols="40" rows="5" name="alamat"></textarea>
        
        <label>Cari Sesuatu</label>
        <input type="search" name="cari" placeholder="cari di sini...">
        
        <label>Mau Pesan Berapa?</label>
        <input type="range" name="berapa" value="1" min="1" max="5" step="1" data-highlight="true">
        
        <div data-role="rangeslider">
          <label>Jumlah Cabe:</label>
          <input type="range" name="cabe-min" min="0" max="10" value="3">
          <label>Jumlah Cabe:</label>
          <input type="range" name="cabe-max" min="0" max="10" value="7">
        </div>
        
        <label for="setuju">Saya sanggup menahan rasa pedasnya!</label>
        <input type="checkbox" name="setuju" id="setuju">
        
        <div data-role="controlgroup">
          <legend>Mau Pesan Apa?</legend>
          <input type="checkbox" name="pesanan-1" id="pesanan-1" checked="checked">
          <label for="pesanan-1">Mie Ayam</label>
          <input type="checkbox" name="pesanan-2" id="pesanan-2">
          <label for="pesanan-2">Bakso Beranak</label>
          <input type="checkbox" name="pesanan-3" id="pesanan-3">
          <label for="pesanan-3">Soto Banjar</label>
          <input type="checkbox" name="pesanan-4" id="pesanan-4">
          <label for="pesanan-4">Rawon</label>
        </div>

        <div data-role="controlgroup">
          <legend>Maunya Gimana?</legend>
          <input type="radio" name="gimana" id="gimana-1" value="M" checked="checked">
          <label for="gimana-1">Makan ditempat</label>
          <input type="radio" name="giamna" id="gimana-2" value="B">
          <label for="gimana-2">Dibungkus aja</label>
        </div>

        <button class="ui-shadow ui-btn ui-corner-all">Pesan</button>

      </form>
    </div>
     
    <!-- Membuat Footer -->
    <footer data-role="footer" data-position="fixed">
      <h2>BangHaji DotCom</h2>
    </footer>
   
  </div>
  <!-- END -->
</body>
</html>

Setelah dijalankan hasilnya kira-kira seperti ini, gimana? πŸ™‚ πŸ™‚ πŸ™‚ Lihat di sebelah πŸ˜†

← Sebelumnya Selanjutnya →

Halaman : 1 2 3 4

Share

Muhammad Erfan

aslinya karyawan, suka belajar pemrograman, senang berbagi ilmu melalui tulisan, lagi usaha menghasilkan uang online :cool:

You may also like...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *