Kuika’nın Form elementi, kullanıcıların veri girişi yapmasını sağlayan temel bileşenlerden biridir. Veriler doğrudan bir veri kaynağına (Data Table, Excel, Action, Custom) bağlanabileceği gibi, sıfırdan oluşturulan formlar aracılığıyla da toplanabilir. Böylece uygulamalarınızda kayıt, güncelleme ve işlem tetikleme gibi işlevler kolayca hayata geçirilir.

Form elementi hem web hem de mobil uygulamalarda desteklenir.

Kullanım Alanları

• Kullanıcı kayıt ve giriş formları,
• Anket ve bilgi toplama formları,
• Departman / rol atama süreçleri,
• Sipariş, rezervasyon veya talep toplama ekranları vb. 

Kullanım Senaryosu – Kullanıcı Kayıt Formu

Bir üyelik sistemi geliştiren uygulamada, kullanıcıların Ad Soyad, E-posta, Şifre bilgilerini girerek hesap oluşturabilmeleri için Form elementi kullanılır.

1. Form Yapısı
   
   • Formda tipik olarak şu alanlar yer alır:
   • Your Email → Kullanıcının e-posta adresi (zorunlu alan).
   • Your Password → Kullanıcının şifresi (zorunlu alan).
   • Confirm Password → Şifre doğrulaması (zorunlu alan).
   • Checkbox → Kullanıcının kullanım koşullarını kabul ettiğini belirtmesi için.
   • Sign in / Create Account butonu → Formu gönderip verileri kaydeder.
   • Sosyal giriş butonları → Kullanıcıların Apple veya Google hesaplarıyla hızlı giriş yapabilmesi için eklenmiştir.
   • Login linki → Zaten hesabı olan kullanıcıları giriş sayfasına yönlendirir.
2. Veri Kaynağı Bağlama
   
   • Formu oluştururken bağlanabileceğiniz veri kaynağı türleri:
   • Data Table
     
     • Managed DB üzerinde User tablosu seçilir.

• Alanlar otomatik olarak tablo kolonlarıyla eşleştirilir (örn. Email, Password).

• Excel
  
  • .xls/.xlsx formatında dışarıdan yüklenen dosyadaki kolonlar form alanına dönüşür.
  • Örn. FirstName, LastName, Email kolonlarıyla hızlı prototip form yapılabilir.
• Action
  
  • Örneğin CreateUser aksiyonunun parametreleri (Email, Passworduser, Role) otomatik olarak form alanı olur.
  • Form gönderildiğinde doğrudan bu aksiyon çalıştırılır.

INSERT INTO Users (Id, FirstName, LastName, Email, Passworduser, CreatedDate)VALUES (NEWID(), 'John', 'Doe', 'john.doe@email.com', 'EncryptedPassword', GETDATE());

‍

• Custom
  
  • Hiçbir tabloya bağlı olmadan tamamen özel alanlar tanımlanır.
  • Prototip veya API entegrasyonu senaryolarında kullanılabilir.

3. Özelliklerin Senaryo Bağlamında Kullanılması
   
   • Label
     
     • Form alanının görünen adı.
     • Örn. Your Email, Your Password.
   • Field Type
     
     • Veri türünü tanımlar.
     • Örn. E-posta için String, Şifre için String ama Encrypted.
   • Element Type
     
     • UI tipini belirler.
     • Örn. TextInput, PasswordInput, Checkbox.
   • Required (Req)
     
     • E-posta ve şifre alanları için işaretlenir.
     • Kullanıcı bu alanları boş bıraktığında form gönderilemez.
   • Section Layout
     
     • Masaüstünde 2 kolonlu, mobilde 1 kolonlu görünüm ayarlamak için kullanılır.
     • Görseldeki form tek kolon üzerine tasarlanmıştır.
       
       
   • Detach
     
     • Form elementleri bağımsız hale getirilebilir.
     • Örneğin sadece Email inputunu ayrı bir ekranda göstermek isterseniz kullanılabilir.

Senaryo Adımı Tamamlandığında

• Kullanıcı Email, Password, Confirm Password alanlarını doldurur.
• “I agree to the terms and conditions” kutusunu işaretler.
• Sign in / Create Account butonuna basıldığında bilgiler veri kaynağına kaydedilir.
• Kullanıcı isterse Apple veya Google ile giriş yapabilir.
• Eğer zaten hesabı varsa alt kısımdaki Login here linkine tıklayarak giriş ekranına yönlendirilir.

İpuçları ve Best Practices

Email alanı için Unique işaretlenmeli → aynı e-posta ile ikinci kayıt engellenir.

• Password alanı maskeli (PasswordInput) kullanılmalı.
• Mobil ekranlarda formun okunabilirliği için Section Layout tek kolon yapılmalı.
• Kullanıcı sözleşmesi checkbox’ı zorunlu alan yapılmalı → işaretlenmeden kayıt tamamlanmamalı.
• Sosyal giriş butonlarını en alta koymak kullanıcı deneyimini artırır.