Bu makalede, React form tasarımlarında kullanılan farklı input türleri ve örnekleri hakkında bilgi verilmektedir Normal inputlar, kullanıcılardan belirli bilgileri toplamak için en yaygın kullanılan input tipidir Checkbox ve radio butonlar ise seçenek sunmak için kullanılır Checkboxlar birden fazla seçeneği ayrı ayrı seçmek için, radio butonlar ise sadece bir seçenek arasından seçim yapmak için kullanılır Validation checkboxları, hata mesajlarını direkt olarak checkbox üzerinde gösterirken, switch checkboxları kaydırma butonları kullanır ve tasarımı daha modern hale getirir Bu özellikler, doğru ve eksiksiz bilgi toplamak için uzun formlarda yararlıdır

React, modern web uygulamaları geliştirirken en çok kullanılan araçlardan biridir. Formlar, kullanıcıların bilgi göndermesini ve veri toplamayı sağlayan önemli bir unsurdur. Formlar, kullanıcılar tarafından doldurulabilen alanlar ve öğeler içerir. Bu öğeler, text alanlarından radio butonlarına kadar değişen çeşitli form input türlerinden oluşur. Her bir input türü, belirli bir amaç için tasarlanmıştır.

Bu makalede, React formda kullanılan farklı input türleri ve bunların tasarım örneklerine yer verilecektir. Normal inputlardan checkbox ve radio butonlara, slider inputlardan file upload inputlarına kadar form alanları hakkında bilgi edinebileceksiniz. Ayrıca, custom input tasarımları hakkında da bilgi alabileceksiniz.

Normal Inputlar

Normal inputlar, kullanıcılardan belirli bir bilgiyi toplamak için en yaygın kullanılan input tipidir. Bu input alanları genellikle bir metin kutusu veya sayısal girdi alanı şeklinde tasarlanır ve kullanıcıların bilgiyi kolayca girmesini sağlar. Normal inputlar, isim, soyisim, e-posta adresi, şifre gibi gerekli bilgilerin alınmasında sıkça kullanılır.

Bu inputlar, kullanıcının girdiği bilgiyi bir dizi doğrulama işleminden geçirebilir. Örneğin, bir şifre girdisi, girdiğiniz karakterlerin sayısını, büyük harf/küçük harf kullanımını veya özel karakterlerin kullanımını gerektirebilir. Bu doğrulama işlemi, kullanıcının yanlış bilgi girmesini önler ve daha güvenli bir form deneyimi sunar.

Checkbox ve Radio Butonlar

React formda farklı input türleri tasarlama sürecinde, kullanıcılara seçenek sunmak için checkbox ve radio butonlar kullanılır. Checkboxlar, birden fazla seçenek arasından her birinin ayrı ayrı seçilebileceği durumlarda kullanılır. Örneğin, bir liste halinde sunulan ürünlerden kullanıcının birden fazlasını seçmesi gereken bir durumda tercih edilir.

Checkbox kullanırken, hata mesajları direkt checkbox üzerinde gösterilecekse validation checkboxları kullanılabilir. Bu şekilde, kullanıcının hangi seçeneklerin hatalı olduğunu kolayca anlaması sağlanır. Switch checkboxlar ise, on/off veya true/false gibi seçenekler sunmak için kullanılır.

Radio buttons ise, birden fazla seçenek arasından sadece birinin seçilebileceği durumlarda kullanılır. Örneğin, bir anket sorusunda sadece bir cevap tercihi yapılması gerektiği durumlarda tercih edilir. Radio button tasarlarken, seçeneklerin birbirine yakın olduğu durumlarda label ve input birleştirilerek kullanılabilir.

Checkbox

Birden fazla seçenek arasından, her birinin ayrı ayrı seçilebileceği durumlarda Checkbox input tipi kullanılır. Checkboxlar, Seçenek 1, Seçenek 2 gibi isimlerle belirtilen seçeneklerin yanlarında küçük kutucuklar şeklinde görüntülenir. Bu kutucuklara tıklanarak, kullanıcının her bir seçeneği ayrı ayrı seçmesi sağlanır. Checkboxlar, form işleme sırasında seçilen seçeneklerle birlikte gönderilir.

Checkboxların kullanımı, validation checkboxları ve switch checkboxları gibi özel ihtiyaçlar için de uyarlanabilir. Validation checkboxları, hata mesajlarının checkbox alanlarında doğrudan görüntülenmesi için tasarlanmıştır. Switch checkboxları ise, On/Off ya da True/False gibi seçenekler için kullanılır.

Checkbox	Validation Checkbox	Switch Checkbox
Seçenek 1	Seçenek 1
Seçenek 2	Seçenek 2

Yukarıda örnek olarak gösterilen Table kodu, Switch Checkbox tasarımına örnektir. Bu örnek tasarım, checkbox yerine kaydırma butonlarının kullanılmasını sağlar ve tasarım daha modern bir hale getirir.

Validation Checkboxları

Validation checkboxları, bir formda belirli bir seçeneği işaretledikten sonra direkt olarak hata mesajlarının checkbox üzerinde gösterildiği özel checkbox türleridir. Böylelikle kullanıcı, formu submit etmeden önce hatalı girişlerini düzeltme imkanı bulur.

Bu tür checkbox tasarımları, özellikle uzun form alanları için oldukça kullanışlıdır çünkü kullanıcı formu submit etmeden önce hataları görebilir ve gerekli değişiklikleri yapabilir. Ayrıca, bu tür tasarımlar form verilerinin doğru ve eksiksiz toplanmasını sağlar, böylece form submission sürecinde daha az hata ortaya çıkabilir.

Bu özel checkboxlar, HTML ve CSS kullanarak kolayca tasarlanabilir. Ayrıca, farklı hata mesajlarını göstermek için de tercih edilebilirler. Örneğin, bir checkbox 'Ad' alanının boş bırakıldığında 'Bu alan boş bırakılamaz' gibi bir hata mesajı gösterebilir. Bu, ilgili alanları doldurmak için kullanıcının direkt olarak belirlenmiş hata mesajlarına bakmasını ve formu yalnızca doğru bilgilerle submit etmesini sağlar.

• Bu checkboxların dezavantajı, her bir alan için özel bir tanımlama gerektirmeleridir.
• Bununla birlikte, kullanıcılara doğru ve eksiksiz bilgi toplama imkanı sağladıkları için, uzun formlar için oldukça yararlıdırlar.

Switch Checkboxları

React form tasarımlarında kullanılan switch checkboxlar, on/off veya true/false gibi seçenekler için idealdir. Kullanıcıların kolayca seçim yapabilmesi için tasarlanmış olup, anahtar benzeri yapısıyla dikkat çekmektedir.

Switch checkboxları, kaydırmalı yapıları sayesinde kullanıcıların seçim yapmasını kolaylaştırır ve çekici bir tasarım sunarlar. Bu sayede, kullanıcıların dikkati form alanına çekilir ve formun amacına uygun bir şekilde kullanılmaları sağlanır.

Radio Buttons

Radio buttons, bir formda birden fazla seçenek arasından sadece birinin seçilebileceği durumlarda kullanılan input türüdür. Örneğin, bir anket formunda kullanıcının en sevdiği renk seçeneğini sorarken, seçenekler arasından sadece birinin seçilebilmesi için radio buttons kullanılabilir.

Radio buttons tasarımı, checkbox'lara benzer şekilde olabilir. Seçenekler yan yana veya alt alta olabilir. Label'lar, kutucukların yanına veya üzerine gelebilir. Ayrıca, radio buttons tasarımında renkler, simgeler ve animasyonlar da kullanılabilir.

Eğer radio buttons'a bir default value atanacaksa, formun açılışında zaten seçili olacaktır. Kullanıcının herhangi bir seçim yapmadığı durumda seçeneklerden biri default olarak seçili kalacaktır.

Radio buttons'un en önemli özelliklerinden biri, herhangi bir seçeneğin açık/ kapalı olduğuna dair visual bir indikatör olmasıdır. Bu indikatör, seçeneğin seçili olduğunu belirleyen bir imge ya da metin olabilir. Ayrıca, radio buttons'lar için gerektiğinde validation kuralları da oluşturulabilir.

Radio Button Tasarım Örneği

Seçenek 1
Seçenek 2
Seçenek 3

Yukarıdaki örnekte, radio buttons tasarımı yan yana seçenekler ile gösterilmiştir. Seçeneklere ayrıca, anlamlarını belirten label'lar da eklenmiştir.

Slider Inputlar

Slider inputları, belirli bir aralıkta bir değer seçmek için kullanılır. Bu tür inputlar genellikle bir çubuk şeklinde ve kaydırma özelliği ile birlikte tasarlanır. Kullanıcılar, değer aralığının neresinde tutmak istedikleri noktayı kaydırarak belirledikleri bir değeri seçerler. Slider inputları, özellikle sayısal değerlerin belirtilmesi gereken durumlarda sıklıkla kullanılır.

Birçok slider input tasarımı, minimum ve maksimum değerleri gösteren bir bar ile birlikte gelir. Bunun yanı sıra, kullanıcılara belirli aralıklarda değer seçme imkanı da sunulabilir. Slider inputların kullanımı oldukça kolaydır ve çoğu kullanıcı tarafından hızlı bir şekilde anlaşılabilir.

Bu tür inputlar ayrıca grafiksel elementlerle birleştirilerek görsel olarak daha ilgi çekici hale getirilebilirler. Örneğin, bir resim galerisi içinde kullanılan slider input tasarımı, kullanıcıların resimler arasında geçiş yapmasına yardımcı olabilir. Ayrıca, bazı e-ticaret siteleri de slider input kullanarak, kullanıcıların fiyat aralığına göre ürünleri filtrelemesine imkan sağlarlar.

• Slider inputlar özellikle sayısal değerlerin belirtilmesi gereken durumlarda kullanılabilir
• Slider input tasarımları, minimum ve maksimum değerleri gösteren bir bar ile birlikte gelir
• Kullanıcılara belirli aralıklarda değer seçme imkanı da sunulabilir
• Slider inputların kullanımı oldukça kolaydır ve çoğu kullanıcı tarafından hızlı bir şekilde anlaşılabilir
• Slider inputların görsel olarak daha ilgi çekici hale getirilmesi için grafiksel elementlerle birleştirilebilirler

Tarih Inputları

React formda tarih inputları, kullanıcının tarih seçmesini sağlayan bir input türüdür. Bu input tipi, bir takvim takımının kullanılmasıyla kullanıcının tarih seçmesine olanak tanır. Tarih inputlarının tasarımları genellikle girdi kutusunun yanında bir takvim simgesi bulunur ve kullanıcı bu simgeye tıklayarak takvimi açabilir.

Tarih inputlarının kullanımı oldukça basittir. Kullanıcı, takvimde seçtiği gün, ay ve yılı doğru girdi kutusuna gönderebilir. Bu sayede doğru bir şekilde tarih bilgisi toplanmış olur. Tarih inputlarında ayrıca, belirli tarih aralıklarının seçilebilmesi için min ve max özellikleri de kullanılabilir.

Örneğin, bir otel rezervasyon sitesinde, kullanıcının giriş ve çıkış tarihlerini belirlemesi gerekiyorsa, tarih inputları kullanılabilir. Kullanıcı, takvim yardımıyla giriş ve çıkış tarihlerini belirleyerek doğru rezervasyon yapabilir.

Tarih inputlarına özelleştirilmiş stiller de uygulanabilir. Özelleştirilmiş stiller, sitenin tasarımına uygun olarak oluşturulabilir ve kullanıcıya daha iyi bir deneyim sunabilir. Tarih inputlarını özelleştirmek için CSS kodları kullanılır. Bu kodlar, belirli stil ve özellikleri input üzerine uygulamayı sağlar.

Tarih inputları, kullanıcının belirli bir tarih seçmesine olanak tanıyan harika bir input türüdür. Bu inputların tasarımları değiştirilebilir ve özelleştirilebilir. Siz de web sitenize tarih inputları ekleyebilir ve kullanıcı deneyimini artırabilirsiniz.

Time Inputları

React form tasarımlarında kullanılan bir diğer input türü de time inputlarıdır. Bu input türü ile kullanıcıların kolayca saat ve dakika seçmesi sağlanır. Time inputları özellikle randevu almak veya bir toplantı saati belirlemek gibi durumlarda oldukça faydalıdır.

Time inputları HTML5 standardıyla kullanıma sunulmuş olup, farklı tarayıcılarda da desteklenmektedir. Kullanıcılar time inputlarına tıkladıklarında, bir saat seçicisi açılır ve kullanıcılar buradan saat ve dakikaları kolayca seçebilirler. Bunun yanı sıra, özelleştirilebilir seçenekler de mevcuttur. Kullanıcılar özelleştirilmiş saat aralıkları veya saniye seçeneği gibi özellikleri seçebilirler.

Özellik	Açıklama
step	Belirtilen adımlarla saat ve dakika seçimi yapılmasını sağlar.Örneğin, step="900" şeklinde belirtilirse, 15 dakikalık adımlarla seçim yapılabilir.
min	Belirtilen saat ve dakikadan öncesinin seçilmesini engeller.
max	Belirtilen saat ve dakikadan sonrasının seçilmesini engeller.

Time input tasarımları genellikle sade ve minimalist olur. Önemli olan kullanılabilirliktir. Saat ve dakika seçimi yapmak için kullanıcının fazla düşünmesi gerektiğinde, kullanıcı deneyimi bozulur. Bu nedenle, time inputları tasarlarken kullanıcılara sadece gerekli seçenekleri sunmak önemlidir.

Search Inputları

React formda Search inputları, kullanıcıların web sayfasında arama yapabilmesi için tasarlanmıştır. Bu tür inputlar, çoğunlukla bir arama kutusu veya arama butonu şeklinde olabilir.

Search inputlarının HTML yapısı basittir, ancak birkaç özellik kullanılabilir. Arama kutusu genellikle tipi "text" olan bir input elemanıdır. Ayrıca, autofocus özelliği kullanılarak sayfa yüklendiğinde doğrudan arama kutusuna odaklanabilirsiniz.

Search input tasarlarken, kullanıcıların kolaylıkla arama yapabilmeleri için tasarımı basit ve anlaşılır tutmak önemlidir. Ayrıca, input alanı yanında bulunan bir arama düğmesi de kullanıcı için kolaylık sağlar.

• Arama kutusu için uzunluk ve genişlik ayarlanabilir.
• Kullanıcı arama yaparken, sonuçların anında görüntülenmesi için özellikle AJAX kullanılır.
• Arama kutusu ayrıca, arama terimleri için otomatik tamamlama özelliği ile de donatılabilir.

Search inputları, birçok web sitesinde arama yapmak için en önemli araçlardan biridir. Tasarımı doğru yapıldığında, bu input türü kolay navigasyon sağlayarak, kullanıcı deneyimini geliştirebilir.

File Upload Inputları

React formda kullanılan farklı input türleri arasında yer alan File Upload Inputları, kullanıcıların belirtilen dosya türlerini yüklemesine olanak sağlar. Örneğin, bir web sitesinde üyelik oluşturma sürecinde kullanıcıların profil fotoğrafı yüklemesi için bu tür bir input kullanılabilir. Bu sayede site, kullanıcıların belirtilen boyut, format ve özelliklere sahip dosyaları yüklemesini kolaylaştırır.

File Upload Inputları, yükleme işlemini gerçekleştirmek için bir buton içerir. Bu butona tıklayarak, kullanıcı belirtilen dosya türünü seçip yükleyebilir. Bu tür inputların özelleştirilmesi de mümkündür. Örneğin, butonun rengi veya yazısını değiştirmek kullanıcı deneyimine katkı sağlayabilir.

File Upload Inputları, güvenlik açısından da özel önem taşır. Kullanıcının yükleyebileceği dosya türleri ile ilgili sınırlamalar getirilerek, istenmeyen dosya türleri yüklenmesine engel olunabilir. Bunun yanı sıra, yüklenen dosyanın depolanacağı sunucunun güvenliği de önemlidir. Bu nedenle, yüklenen dosyaların önceden taranarak zararlı içeriklerinin tespit edilmesi ve engellenmesi gerekir.

File Upload Inputları oluşturmak için ReactJs kütüphanesinde birçok farklı paket bulunmaktadır. Bunların arasında en popüler olanları React-Dropzone, React-Filepond ve React-Bootstrap'tır. Bu paketler sayesinde, dosya yükleme işlemini kolayca gerçekleştirebilir ve sayfanızın performansını etkilemeden özelleştirilebilir bir tasarım oluşturabilirsiniz.

Custom Input Tasarımları

Standard input tasarımlarının ihtiyacınıza tam olarak uygun gelmemesi durumunda custom input tasarımları kullanabilirsiniz. Örneğin, bir renk seçici tasarım için tek satır input yerine renk paleti sunan bir custom input tasarlanabilir. Ya da bir dosya yükleme inputu yerine, özelleştirilmiş bir dosya yükleme alanı tasarlanabilir.

Custom inputlar ayrıca marka bilinirliği açısından da faydalı olabilir. Markanıza uygun bir tasarım oluşturarak, kullanıcıların markanızı hatırlamalarını sağlayabilirsiniz.

Custom input tasarımları oluştururken, kullanılabilirlik ve erişilebilirlik gibi önemli faktörleri de göz önünde bulundurmanız önemlidir. Custom tasarımların kullanıcı dostu olması ve tüm kullanıcılara erişilebilir olması gerekmektedir.

Bir diğer faydalı özellik ise, custom inputların veri toplama ve analizi açısından fayda sağlamasıdır. Farklı tasarımlar kullanarak, hangi inputların daha fazla ya da daha az kullanıldığına dair bilgiler toplanabilir ve bu bilgileri kullanarak form tasarımınızı geliştirebilirsiniz.