Skip to main content
Cara membuat form

Cara Membuat Form Menggunakan Framework Ionic

Pendahuluan Cara Membuat Form Menggunakan Framework Ionic

Salam sejahtera, masih seputar pembelajaran tentang penggunaan Ionic Framework untuk pengembangan aplikasi mobile, kali ini kita akan bahas tentang Cara Membuat Form Menggunakan Framework Ionic. Pembahasan sebelumnya tentang awal menggunakan Framework Ionic, mulai dari instalasi awal, pembuatan project dan menjalankan project melalui serve sampai pada tahap pengenalan component CSS. Pembahasan tersebut mudah-mudahan menjadi landasan awal untuk lanjut ketahap ini. Pembahasan tentang pengenalan Struktur code project ionic ini sangat penting untuk pemahaman untuk pengembangan project ionic.

Baca Topik Sebelumnya :

Topik Pembahasan Cara Membuat Form Menggunakan Framework Ionic:

  • Pendahuluan
  • Pengenalan Form Pada Project Ionic
  • Pembuatan Form menggunakan HTML5
  • Validasi Inputan Form
  • Kesimpulan

Download Source Code Latihan:

Untuk tahapan awal dalam mempelajari tentang Cara Membuat Form Menggunakan Framework Ionic, pertama sekali akan kita bahas dulu apa itu form dan bagaimana contoh penerapan nya.

Pengenalan Cara Membuat Form Pada Project Ionic

Untuk memulai pembahasan materi tentang Cara Membuat Form Menggunakan Framework Ionic, terlebih dahulu kita harus pahami apa itu form dan bagaimana bentuknya. Lumrah nya dalam sebuah aplikasi, pasti terdapat metode input data. Proses menginput data biasanya dilakukan pada sebuah form inputan yang telah tersedia di aplikasi. Untuk aplikasi menggunakan Ionic, kita juga bisa membuat inputan dalam bentuk form yang tujuan nya untuk kemudahan penginputan data. Lihat contoh Inputan Form berikut :

Cara membuat form Ionic
Contoh Form

Saya anggap dengan sekilas penjelasan, kita semua sudah mengetahui dan memahami apa itu form dan apa fungsi form pada sebuah aplikasi. Pada Ionic, kita bisa membuat rancangan form menggunakan bahasa HTML5, yang mana memberikan kemudahan.

Cara Membuat Form Menggunakan HTML5 Ionic

Pembuatan form pada Ionic kita letakkan source code nya dalam “content”. Kita bisa membuatnya secara bentuk list atau sesuai kebutuhan kita masing-masing. Bisa juga kita gunakan kode HML5. Berikut contoh pembuatan form dari urutan beserta hasil implementasinya.

Form Text Input dan Placeholder

Untuk awal kita mulai dari membuat inputan dalam bentuk Text disertai placeholder. Kode yang digunakan yaitu : item-input. Berikut contoh sedehana nya:

<ion-content>
      		<ion-list>
      			<label class="item item-input">
      			<input type="text" placeholder="Nama Lengkap">
      			</label>
      			<label class="item item-input">
      			<input type="text" placeholder="Nama Panggilan">
      			</label>
      			<label class="item item-input">
      				<textarea placeholder="Alamat Lengkap"></textarea>
      			</label>
      		</ion-list>
      </ion-content>

Hasil Implementasinya :

Cara membuat form Ionic
Cara membuat form Input Text

Text Input Inline Label

Gunakan kode “input-label” untuk memunculkan garis atau border text inputan. Jika ingin tambahkan placeholder, kodenya sama seperti yang sebelumnya. Namun jika tidak gunakan, cukup hilangkan saja, Contohnya :

      <ion-content>
      		<ion-list>
      			<label class="item item-input">
      			<span class="input-label">Nama Lengkap</span>
      			<input type="text">
      			</label>
      			<label class="item item-input">
      			<span class="input-label">Nama Panggilan</span>
      			<input type="text">
      			</label>
      			<label class="item item-input">
      			<span class="input-label">ALamat Lengkap</span>
      				<textarea></textarea>
      			</label>
      		</ion-list>
      </ion-content>

Hasil Implementasinya :

Cara membuat form Ionic
membuat form Inline Label Text

Form Text Input Stacked Label

Maksudnya adalah kita membuat inputan text dengan keterangan diatas dan inputan dibawahnya. Kode yang digunakan yaitu “item-stacked-label”. Berikut contohnya:

      <ion-content>
      		<ion-list>
      			<label class="item item-input item-stacked-label">
      			<span class="input-label">Nama Lengkap</span>
      			<input type="text" placeholder="Nama Lengkap">
      			</label>
      			<label class="item item-input item-stacked-label">
      			<span class="input-label">Nama Panggilan</span>
      			<input type="text" placeholder="Nama Panggil">
      			</label>
      			<label class="item item-input item-stacked-label">
      			<span class="input-label">ALamat Lengkap</span>
      				<textarea placeholder="Alamat lengkap"></textarea>
      			</label>
      		</ion-list>
      </ion-content>

Hasil implementasinya:

Cara membuat form Ionic
Cara membuat form

Form Text Input Floating Label

Hampir sama dengan penggunaan stacked label, namun disini kita berikan sedikit animasinya, keterangan akan muncul ketika text selesai diinputkan (setelah Enter). Gunakan kode “item-floating-label”. Berikut contohnya:

      <ion-content>
      		<ion-list>
      			<label class="item item-input item-floating-label">
      			<span class="input-label">Nama Lengkap</span>
      			<input type="text" placeholder="Nama Lengkap">
      			</label>
      			<label class="item item-input item-floating-label">
      			<span class="input-label">Nama Panggilan</span>
      			<input type="text" placeholder="Nama Panggil">
      			</label>
      			<label class="item item-input item-floating-label">
      			<span class="input-label">ALamat Lengkap</span>
      				<textarea placeholder="Alamat lengkap"></textarea>
      			</label>
      		</ion-list>
      </ion-content>

Hasil Implementasinya:

Cara membuat form Ionic
membuat form Ionic

Form Inset Input

Hal ini untuk membuat inputan secara horizontal dan ada sebuah button disamping inputan untuk mengirimkan hasil inputan. Gunakan kode “list-inset” setelah “item-input-inset”. Contoh:

<div class="item item-input-inset">
      			<label class="item-input-wrapper">
      			<input type="text" placeholder="Email">
      			</label>
      			<button class="button button-small">Submit</button>
      			</div>

Hasil Implementasi :

Cara membuat form Ionic
Cara membuat form Inset Input

Form Input Icon

Inputan text disertai icon. Icon bisa diletakkan dibagian kiri atau kanan. Gunakan kode letak icon sebelum tag <input>. Secara default akan mengikuti warna bawaan textinput. Contoh :


<div class="list list-inset">
      			<label class="item item-input">
      			<i class="icon ion-search placeholder-icon"></i>
      			<input type="text" placeholder="Search">
      			</label>
      			</div>

Hasil Implementasi :

Cara membuat form Ionic
Cara membuat form Text icon

Form Header Input

Selanjutnya kita juga bisa meletakkan Inputan dibagian Header. Berikut Contoh nya :


<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="search" placeholder="Search">
  </label>
  <button class="button button-clear">
    Cancel
  </button>
</div>

Hasil Implementasinya:

Cara membuat form Ionic
Cara membuat form Header Input

Demikian sekilas tentang Cara membuat Inputan form melalui ionic. Sangat mudah untuk memahami kodenya.

Input Text HTML5

Seperti pembahasan sebelumnya, kita juga bisa gunakan Inputan menggunakan HTML5 kode. lebih menarik dan mudah dalam implementasinya. Tidak jauh berbeda denga kode sebelumnya. Berikut kita berikan beberapa contohnya:

Input Format E-Mail

      				<label class="item item-input">
      					<span class="input-label">Nama E-Mail</span>
      					<input type="email">
      				</label>

Hasil Implementasinya:

Cara membuat form Ionic
Cara membuat form HTML5

Input Format Nomor Telepon

Inputan dalam bentuk numeric (angka). berikut contohnya:

<label class="item item-input">
  <span class="input-label">Telephone</span>
  <input type="tel">
</label>

Hasil Implementasinya:

Cara membuat form ionic
membuat form HTML5

Input Format Search

Dibuat untuk inputan mode search (pencarian). Berikut Contohnya:

      				 <label class="item item-input">
      				 <i class="icon ion-search placeholder-icon"></i>
      				 <input type="search" placeholder="Search">
      				 </label>

hasil implementasinya:

Cara membuat form Ionic
Cara membuat form Search HTML5

Input Format Date

Digunakan ketika kita melakukan inputan tanggal, dan otomatis akan muncul kalender. Contoh:

      				 <label class="item item-input">
      				 <span class="input-label">Tanggal</span>
      				 <input type="date"></label>

Hasil Implementasinya:

Cara membuat form ionic
membuat form date HTML5

Inputan Format Password

Digunakan untuk melakukan inputan password, artinya inputan tidak ditampilkan. Berikut contohnya:

      				 <label class="item item-input">
      				 <span class="input-label">Password</span>
      				 <input type="password"></label>

Hasil Implementasi:

Cara membuat form Ionic
Cara membuat form Password Input

BERSAMBUNG……..

Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com