Formulir (form) adalah salah satu elemen terpenting dalam interaksi pengguna dengan sebuah situs web. Foundation menyediakan berbagai kelas yang memudahkan kita untuk membuat formulir yang rapi, responsif, dan mudah diakses. Pada tutorial ini, kita akan mempelajari cara memanfaatkan fitur-fitur form Foundation.

Konsep Dasar

Foundation memberikan styling dasar untuk elemen form HTML standar seperti <input>, <textarea>, <select>, <label>, dan <button>. Anda tidak perlu menambahkan kelas khusus pada elemen input itu sendiri. Cukup pastikan elemen-elemen tersebut berada di dalam tag <form>.

Struktur Dasar Formulir

Untuk membuat formulir dasar, Anda bisa menggunakan struktur HTML biasa dan menggabungkannya dengan sistem grid Foundation untuk tata letak yang responsif.

<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="cell small-12 medium-6">
      <label>Nama Depan
        <input type="text" placeholder="Masukkan nama depan Anda">
      </label>
    </div>
    <div class="cell small-12 medium-6">
      <label>Nama Belakang
        <input type="text" placeholder="Masukkan nama belakang Anda">
      </label>
    </div>
  </div>
</div>

Pada contoh di atas:

• <label>: Memberikan deskripsi untuk input. Pastikan for pada label mengarah ke id yang sesuai pada input untuk meningkatkan aksesibilitas.
• <input>: Elemen input teks. Foundation akan memberikan gaya default untuk membuatnya terlihat profesional.
• placeholder: Memberikan petunjuk teks di dalam input.

Menggunakan Kelas Form Foundation

Foundation juga menyediakan beberapa kelas khusus untuk menyesuaikan tampilan form Anda:

• form-error: Gunakan kelas ini pada <label> atau elemen form untuk menyoroti input yang tidak valid.
  HTML

  <label class="form-error">Email tidak valid
    <input type="email" placeholder="contoh@domain.com">
    <small class="form-error">Silakan masukkan alamat email yang benar.</small>
  </label>
  

  Kelas form-error akan menambahkan warna merah atau oranye untuk menarik perhatian pengguna.

• form-success: Serupa dengan form-error, kelas ini digunakan untuk menunjukkan bahwa input berhasil divalidasi.
  HTML

  <label class="form-success">Nama Pengguna
    <input type="text" value="john.doe">
    <small class="form-success">Nama pengguna tersedia!</small>
  </label>
  

Komponen Form Lanjutan

Foundation menyediakan komponen form yang lebih canggih, seperti:

1. Checkboxes dan Radio Buttons:

   Foundation memberikan gaya yang seragam untuk checkbox dan tombol radio, sehingga terlihat konsisten di semua browser.

   HTML

   <fieldset class="grid-x grid-padding-x">
     <legend>Pilih Opsi</legend>
     <div class="cell shrink">
       <input id="checkbox1" type="checkbox"><label for="checkbox1">Opsi 1</label>
     </div>
     <div class="cell shrink">
       <input id="checkbox2" type="checkbox"><label for="checkbox2">Opsi 2</label>
     </div>
   </fieldset>
   

2. select dan Dropdown:

   Elemen <select> juga secara otomatis diberi gaya yang menarik. Untuk membuat dropdown yang lebih interaktif, Anda bisa memanfaatkan plugin JavaScript Foundation.

3. Tombol:

   Tombol pada form adalah bagian dari komponen tombol Foundation. Anda bisa menggunakan kelas seperti button, success button, alert button, dll.

   HTML

   <button type="submit" class="button expanded">Kirim Formulir</button>
   

   Kelas expanded akan membuat tombol mengambil lebar penuh dari wadahnya.

Tips Desain Form dengan Foundation

• Gunakan Grid: Selalu gunakan sistem grid untuk menata elemen form. Ini akan memastikan formulir Anda responsif dan terlihat rapi di berbagai perangkat.
• Perhatikan Aksesibilitas: Selalu gunakan tag <label> dengan atribut for yang mengarah ke id input yang sesuai. Ini penting untuk pengguna yang menggunakan teknologi bantuan.
• Berikan Umpan Balik Visual: Manfaatkan kelas form-error dan form-success untuk memberikan umpan balik yang jelas kepada pengguna tentang status validasi input mereka.
• Tetap Sederhana: Usahakan formulir Anda tetap singkat dan to the point. Jangan meminta terlalu banyak informasi yang tidak perlu.

Dengan mengikuti panduan ini, Anda bisa membuat formulir yang tidak hanya berfungsi dengan baik, tetapi juga terlihat profesional dan mudah digunakan berkat bantuan Foundation. Pada tutorial selanjutnya, kita akan membahas lebih banyak komponen UI yang disediakan oleh Foundation.