Setiap aplikasi yang kompleks pasti membutuhkan cara untuk berinteraksi dengan pengguna, dan cara paling umum adalah melalui form. Baik itu halaman login, formulir pendaftaran, halaman pengaturan, atau kolom pencarian, form adalah komponen vital untuk mengumpulkan data dari pengguna.

Ionic menyediakan serangkaian komponen input yang dirancang khusus untuk mobile, lengkap dengan styling dan interaksi yang sudah disesuaikan untuk setiap platform (iOS dan Android). Dalam tutorial ini, kita akan membahas cara membuat form menggunakan berbagai komponen input Ionic. Mari kita mulai! 📝

Struktur Dasar Form

Untuk mengelola input dengan baik, biasanya kita membungkus semua komponen input di dalam sebuah ion-list dan setiap input diletakkan di dalam ion-item. Ini memberikan struktur visual yang rapi dan konsisten.

Komponen-komponen utama yang akan sering kita gunakan adalah:

• ion-item: Bertindak sebagai baris untuk setiap input.
• ion-label: Memberikan label teks yang jelas untuk setiap input.
• ion-input: Komponen utama untuk berbagai jenis input teks.
• ion-button: Tombol untuk mengirimkan (submit) form.

Mari kita buat form login sederhana sebagai contoh pertama.

<form>
  <ion-list>
    
    <ion-item>
      <ion-label position="floating">Alamat Email</ion-label>
      <ion-input type="email" placeholder="contoh@email.com"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>

  </ion-list>

  <ion-button expand="block" type="submit" class="ion-margin-top">
    Login
  </ion-button>
</form>

Analisis Kode:

• ion-label position="floating": Atribut position ini memberikan efek yang sangat bagus. Label akan berukuran kecil di dalam input, dan saat pengguna mulai mengetik, label akan “mengambang” ke atas. Opsi lain adalah stacked (selalu di atas) dan fixed (di samping).
• ion-input type="...": Atribut type sangat penting. Menggunakan type="email" akan menampilkan keyboard khusus email di perangkat mobile. Menggunakan type="password" akan menyembunyikan karakter yang diketik.

Jenis-Jenis Input Lainnya

Selain input teks standar, Ionic menyediakan banyak komponen lain untuk berbagai jenis data.

Textarea untuk Teks Panjang

Jika Anda membutuhkan input untuk teks yang lebih panjang, seperti kolom komentar atau alamat, gunakan ion-textarea.

<ion-item>
  <ion-label position="floating">Alamat Lengkap</ion-label>
  <ion-textarea auto-grow="true"></ion-textarea>
</ion-item>

Atribut auto-grow="true" akan membuat area teks membesar secara otomatis saat pengguna mengetik lebih banyak baris.

Toggle untuk Opsi Ya/Tidak

Untuk pilihan biner (misalnya, mengaktifkan notifikasi), ion-toggle adalah pilihan yang tepat.

<ion-item>
  <ion-label>Aktifkan Notifikasi</ion-label>
  <ion-toggle slot="end"></ion-toggle>
</ion-item>

Checkbox untuk Pilihan Ganda

Gunakan ion-checkbox jika pengguna bisa memilih lebih dari satu opsi.

<ion-item>
  <ion-checkbox slot="start"></ion-checkbox>
  <ion-label>Saya menyetujui syarat dan ketentuan</ion-label>
</ion-item>

Radio Button untuk Pilihan Tunggal

Jika pengguna hanya boleh memilih satu dari beberapa opsi, gunakan ion-radio yang dibungkus di dalam ion-radio-group.

<ion-list>
  <ion-radio-group value="perempuan">
    <ion-list-header>
      <ion-label>Jenis Kelamin</ion-label>
    </ion-list-header>

    <ion-item>
      <ion-label>Laki-laki</ion-label>
      <ion-radio slot="start" value="laki-laki"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Perempuan</ion-label>
      <ion-radio slot="start" value="perempuan"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

Select (Dropdown) untuk Pilihan dari Daftar

Untuk daftar pilihan yang panjang, ion-select (dropdown) adalah solusi yang lebih ringkas.

<ion-item>
  <ion-label>Pilih Kota</ion-label>
  <ion-select placeholder="Pilih satu">
    <ion-select-option value="malang">Malang</ion-select-option>
    <ion-select-option value="surabaya">Surabaya</ion-select-option>
    <ion-select-option value="jakarta">Jakarta</ion-select-option>
  </ion-select>
</ion-item>

Kesimpulan

Mengumpulkan input dari pengguna adalah inti dari aplikasi interaktif. Dengan rangkaian komponen form Ionic, Anda dapat membuat formulir yang tidak hanya fungsional tetapi juga memiliki tampilan dan pengalaman pengguna (UX) yang dirancang khusus untuk perangkat mobile.

Poin Kunci untuk Diingat:

• ✅ Bungkus input Anda dalam ion-list dan ion-item untuk struktur yang rapi.
• ✅ Gunakan ion-input dengan atribut type yang sesuai untuk mengoptimalkan keyboard mobile.
• ✅ Manfaatkan ion-label dengan position="floating" untuk efek visual yang modern.
• ✅ Pilih komponen yang tepat untuk setiap jenis data: ion-textarea, ion-toggle, ion-checkbox, ion-radio, dan ion-select.

Di tutorial selanjutnya, kita akan membahas cara menavigasi antar halaman menggunakan sistem Routing di Ionic. Selamat membuat form yang interaktif!