Form

Menyediakan sistem penanganan form yang powerful dan mudah digunakan. Dengan menggunakan class Ngorei, Anda dapat dengan mudah mengelola input form, validasi, dan pengiriman data. Framework ini mendukung berbagai jenis input seperti teks, password, email, file, dan lainnya, serta dilengkapi dengan fitur validasi bawaan dan penanganan event yang fleksibel.

Demo:

Penjelasan Penggunaan Event Handling Form

Inisialisasi Form

Event handling form di NexaUI menggunakan class Ngorei. Untuk memulai, kita perlu membuat instance baru:

const nexaUi = new Ngorei();

Konfigurasi Form

Method createForm() digunakan untuk menginisialisasi form dengan parameter berikut:

formid: ID dari element form (wajib)
submitid: ID dari tombol submit (wajib)
fileInput: Boolean untuk menentukan apakah form memiliki input file (opsional)

Penanganan Data

Data form dapat ditangani menggunakan callback function yang diberikan sebagai parameter kedua:

Event Handling

const nexaUi = new Ngorei();
const results = await nexaUi.createForm({
    formid: 'formInput',
    submitid: 'submitForm',
    fileInput: false
}, (data) => {
    console.log('Data form yang dikirim:', data);
});

<form id="formInput">   
<div class="form-nexa">
  <label for="normalInput">Input Normal</label>
  <input type="text" class="form-nexa-control" id="Input" placeholder="Input">
</div>
<button type="button" id="submitForm" class="nx-btn-dark full-width rounded-full">Submit Data</button>
</form>

<form id="formInput">
    <TextInput 
      label="Basic Inputs"
      type="text"
      name="name"
      placeholder="Input Normal"
    />
    <button type="button" id="submitForm" class="nx-btn-dark full-width rounded-full">Submit Data</button>
</form>

Fitur Tambahan

Framework ini secara otomatis akan:

Mencegah pengiriman form default
Mengumpulkan semua data input dalam format JSON
Memberikan validasi dasar untuk input yang required
Untuk menyimpan data pelajari fungsi Network