Perlu formulir untuk proyek Anda berikutnya? Berikut cara membuat formulir dengan FormKit.
Formulir adalah pintu gerbang bagi pengguna untuk terlibat dengan aplikasi Anda dan menyediakan data penting untuk tugas-tugas seperti pembuatan akun, pemrosesan pembayaran, dan pengumpulan informasi. Tapi membangun formulir bisa menjadi tugas yang menakutkan, membutuhkan kode boilerplate ekstensif yang memakan waktu dan rawan kesalahan
FormKit menawarkan solusi dengan menyediakan komponen pra-bangun yang menghilangkan kebutuhan akan kode boilerplate. Berikut cara menggunakannya.
Apa itu FormKit?
FormKit adalah kerangka kerja pembuatan formulir sumber terbuka yang dikembangkan khusus untuk Vue 3, dirancang untuk menyederhanakan proses pembuatan formulir siap produksi berkualitas tinggi. Ini adalah versi yang disempurnakan dari yang populer Formulasi Vue perpustakaan dan menyediakan lebih dari 25 opsi input yang dapat disesuaikan dan diakses, bersama dengan seperangkat aturan validasi yang telah ditentukan sebelumnya.
FormKit juga menawarkan kemampuan untuk menghasilkan formulir melalui skema dinamis yang kompatibel dengan JSON, membuatnya mudah untuk membuat formulir kompleks dengan cepat. Selain itu, FormKit memiliki komunitas aktif di Discord, memberikan dukungan dan mendorong kolaborasi antar pengguna. Dengan fitur lengkap dan sistem pendukungnya, FormKit adalah alat yang andal dan efisien bagi pengembang yang ingin membuat formulir untuk proyek Vue 3 mereka.
Fitur Kerangka FormKit
Anda akan menemukan berbagai pilihan fitur pembuatan formulir di FormKit.
1. API Komponen Tunggal
Salah satu fitur menarik dari FormKit adalah API satu komponennya: komponen. Ini memberi Anda akses ke semua jenis input. Ini memberikan akses langsung dan mudah ke pembuatan elemen formulir alih-alih harus menggunakan elemen HTML asli.
2. Aturan Validasi yang Ditentukan Sebelumnya
Formkit menyederhanakan penanganan validasi formulir dengan memungkinkan Anda untuk langsung menerapkan seperangkat aturan ke input menggunakan alat validasi. Ini memiliki lebih dari 30 aturan yang telah ditentukan sebelumnya yang dapat Anda pilih tergantung pada preferensi Anda. Alternatifnya, Anda dapat membuat aturan khusus yang terdaftar secara global atau secara khusus pada masukan untuk pembatasan kompleks.
3. Opsi Gaya yang Dapat Disesuaikan
FormKit hadir tanpa opsi gaya default tetapi memiliki tema dasar opsional - Genesis. Anda perlu menginstal ini secara terpisah.
Dengan menginstal terlebih dahulu @formkit/tema kemasan.
instal npm @formkit/themesKemudian impor ke proyek Anda
impor'@formkit/tema/genesis'Opsi gaya lainnya termasuk penggunaan kelas khusus yang memungkinkan Anda menerapkan gaya dan kelas Anda sendiri ke markup yang disediakan FormKit.
4. Generasi Skema
Pembuatan skema FormKit adalah fitur luar biasa yang menyederhanakan proses pembuatan bidang formulir. Skema adalah larik objek, dengan setiap objek mewakili elemen HTML dan Anda hanya dapat mewakili dalam format JSON.
Array skema terdiri dari objek simpul FormKit yang sesuai dengan berbagai elemen, seperti elemen HTML, komponen, atau simpul teks. Objek-objek ini dapat mereferensikan variabel Vue yang sudah ada sebelumnya dan merender setiap markup atau komponen dengan atribut dan props yang dapat diedit, membuatnya menjadi metode yang efisien untuk membangun dan menyesuaikan formulir. Secara default, ini tidak terdaftar secara global, jadi Anda perlu mengimpornya.
impor { FormKitSchema } dari'@formkit/vue'Mengintegrasikan FormKit di Vue3
Untuk mulai menggunakan FormKit di aplikasi Vue 3, pertama-tama, instal di dalam proyek Anda. Bagian ini akan melibatkan demo menggunakan aplikasi vue baru dari awal.
Prasyarat untuk Menggunakan FormKit
Sebelum memulai, pastikan Anda memiliki yang berikut ini:
- Pemahaman dasar tentang Vue dan JavaScript
- Node.js dan npm disiapkan di komputer Anda
Setelah Anda siap, Anda siap untuk membuat aplikasi pertama Anda.
Membuat Aplikasi Vue Baru
Pertama, jalankan perintah di bawah ini di terminal Anda untuk menginisialisasi aplikasi Vue baru:
npm init vue@terbaruKemudian ikuti langkah-langkah yang ditentukan dalam prompt sesuai dengan preferensi Anda. Setelah proyek selesai diinstal, lanjutkan untuk menginstal FormKit di aplikasi.
instal npm @formkit/vue Selanjutnya, di main.js mengajukan.
impor { buatAplikasi } dari'vue'
impor'./style.css'
impor Aplikasi dari'./App.vue'
// Setup Formkit
impor { plugin, defaultConfig } dari"@formkit/vue";
// Impor tema Genesis
impor"@formkit/tema/genesis";
buatAplikasi (Aplikasi).gunakan(plugin, defaultConfig).mount('#aplikasi')Paket @formkit/vue dibundel dengan plugin Vue dan pengaturan yang dikonfigurasi secara default untuk instalasi yang lancar. Setelah Anda menyelesaikan penyiapan, Anda siap untuk menggabungkan komponen ke dalam aplikasi Vue 3 Anda. Juga, Anda dapat menambahkan pengaturan untuk tema Genesis seperti yang disebutkan sebelumnya.
Membuat Formulir yang Dapat Digunakan Kembali Dengan FormKit
Bagian ini menunjukkan cara memanfaatkan FormKit dalam membuat formulir yang fungsional dan dapat disesuaikan dengan membuat formulir pendaftaran sederhana.
Untuk struktur kode yang lebih baik, ada baiknya membuat file terpisah untuk komponen ini: Formulir Pendaftaran.vue
Pertama, tentukan elemen input menggunakan format ini
jenis="teks"
label="Nama depan"
placeholder="Abiola"
validasi="wajib|panjang: 4"
membantu = "Masukkan minimal 4 karakter"
<FormKit/>Kode ini menunjukkan cara menggunakan FormKit untuk menghasilkan input teks menggunakan jenis teks. Prop validasi memisahkan aturan menggunakan simbol pipa "|". Prop bantuan memposisikan teks kecil tepat di bawah elemen masukan.
Selain itu, Anda dapat menjelajahi jenis input lain seperti di bawah ini.
jenis="teks"
label="Nama keluarga"
placeholder="Ester"
validasi="wajib|panjang: 4"
membantu = "Masukkan minimal 4 karakter"
/>
jenis="surel"
label="Alamat email"
awalan-ikon="surel"
validasi="wajib|email"
placeholder="[email protected]"
/>
jenis="tanggal"
label="Tanggal lahir"
membantu="Masukkan tanggal lahir Anda dalam format- DD/MM/YYYY"
validasi="diperlukan"
/> v-model="nilai"
jenis="radio"
label="Jenis kelamin"
: pilihan="['Pria', 'Wanita']"
membantu="Pilih jenis kelamin Anda"
/>
jenis="mengajukan"
label="Unggah Foto Anda"
terima=".jpg,.png,.jpeg"
membantu="Pilih gambar Anda"
/>
Kode menunjukkan cara menggunakan beberapa elemen masukan lainnya dan menetapkan aturan validasi.
FormKit menyertakan prop tipe yang disebut "form" yang membungkus semua elemen input. Ini memantau status validasi formulir dan memblokir pengguna untuk mengirimkannya jika ada input yang tidak valid. Selain itu, secara otomatis menghasilkan tombol kirim.
jenis="membentuk"
membentuk-kelas="wadah luar"
kirim-label="Daftar"
@kirim="Daftar">
Menggabungkan semuanya bersama-sama menyajikan bentuk yang lengkap, seperti yang ditunjukkan pada gambar di bawah ini.
Pembuatan Formulir Menggunakan Skema FormKit
Dengan skema JSON, dimungkinkan untuk menghasilkan bentuk yang mirip dengan elemen masukan, seperti yang dilakukan sebelumnya. Untuk menghasilkan formulir, cukup berikan susunan skema Anda ke komponen dengan memanfaatkan skema menopang.
Susunan Skema
const skema = [
{
$formkit: "surel",
nama: "surel",
label: "Alamat email",
pengganti: "Masukkan email Anda",
validasi: "wajib|email",
},
{
$formkit: 'kata sandi',
nama: 'kata sandi',
label: 'Kata sandi',
validasi: 'wajib|panjang: 5,16'
},
{
$formkit: 'kata sandi',
nama: 'Konfirmasi password',
label: 'Konfirmasi sandi',
validasi: 'wajib|konfirmasi',
label validasi: 'konfirmasi kata kunci',
},
];Ini kemudian diteruskan ke prop di komponen FormKit.
"membentuk" membentuk-kelas="wadah luar"kirimlabel="Gabung">
<FormKitSchema:skema="skema" />
FormKit> Ini adalah hasil akhir yang dihasilkan:
Pendekatan Lebih Cepat untuk Membangun Formulir di Vue3
FormKit menyediakan pendekatan yang lebih cepat dan lebih efisien untuk membangun formulir di Vue 3. Dengan FormKit, Anda dapat meniadakan kebutuhan untuk membuat templat boilerplate dari awal, memungkinkan Anda untuk fokus menerapkan logika secara langsung. Proses yang disederhanakan ini tidak hanya menghemat waktu tetapi juga meningkatkan produktivitas.
Selain itu, FormKit memungkinkan rendering dinamis formulir melalui rendering bersyarat. Fitur ini memungkinkan Anda membuat antarmuka yang interaktif dan ramah pengguna untuk pengguna, di mana elemen formulir ditampilkan atau disembunyikan berdasarkan kondisi tertentu.
