React ile form işlemleri oldukça önemlidir ve birçok input tipi kullanılabilmektedir Password inputu da, form işlemleri sırasında kullanıcının şifresini girmesine olanak tanır ve gizliliği korur
Password inputu oluşturmak için, yine input etiketi kullanılır Ancak, tipi password olarak belirtilmelidir Örneğin:
``` setPasswordetargetvalue} />```
Bu şekilde, kullanıcının girdiği şifre ekranın haricinde saklanacak ve state içinde kaydedilecektir Ayrıca, submit butonu da formun kontrolü için eklenmelidir
```Gönder```
Password inputu, form işlemleri sırasında sıklıkla kullanılması gereken bir input tipidir Kullanıcının şifresini korumak için gerekli bir öğedir

Number Inputu

React uygulamalarında form işlemleri oldukça önemlidir. Bu nedenle, bu yazıda React ile form işlemlerini adım adım öğrenmek isteyenler için rehber niteliğinde bir yazı hazırladık.

Bu rehberimizde, öncelikle React içinde nasıl bir form oluşturulacağına, form içinde ne tür inputlar kullanabileceğimize ve bu inputların nasıl kullanılacağına değineceğiz. Daha sonra, kullanıcıların doğru veri girdiğinden emin olmak için form validasyonu nasıl yapılacağına da göz atacağız.

Eğer React ile form işlemlerini öğrenmek istiyorsanız, bu rehberi adım adım takip ederek form işlemlerini öğrenmeniz mümkün olacaktır.

Form Oluşturma

React, vazgeçilmez bir kütüphane olarak web geliştirme alanında geniş kullanım alanına sahiptir. React kullanarak bir form oluşturmak oldukça basittir. Form oluşturmak için ilk önce form etiketi kullanılır. Form etiketi içinde input etiketleri kullanılarak formu oluşturabilirsiniz.

Form oluşturmak için öncelikle bir ana bileşen oluşturun ve içine form etiketi ekleyin. Ardından, input etiketleri içinde formunuzun gerekli özelliklerini ekleyebilirsiniz. Örneğin, kullanıcıdan ad, soyad, e-posta adresi vb. bilgileri almak için text inputlar ekleyebilirsiniz.

Bir form oluştururken, formun kullanılabilirliği önemlidir. Bu nedenle, her input etiketine gerekli özellikler eklenmelidir. Örneğin, kullanıcının hangi input etiketini doldurduğunu anlamak için for etiketi ekleyebilirsiniz veya kullanıcının şifresini görmemesini sağlamak için password inputu kullanabilirsiniz.

Formunuzu oluşturduktan sonra, kullanıcının verileri göndermek için bir submit butonu eklemelisiniz. Bu buton, kullanıcının formu göndermesini sağlayacak ve form verilerini bir veritabanına veya sunucuya kaydedebileceksiniz.

React ile form oluşturmak oldukça basittir. Her bir input etiketine özellikler eklemek mümkündür ve kullanım kolaylığı sağlayarak kullanıcının verileri doğru bir şekilde girmesini sağlar.

Form İnputları

React ile bir form oluşturduktan sonra, kullanıcıların form içerisinde veri girmelerini sağlamak için inputlar kullanılır. Inputlar, form içerisinde kullanıcının veri girebileceği alanlardır. Bu alanlar, farklı tiplerde ve stillerde olabilirler. React içinde en sık kullanılan input tipleri arasında text inputları, password inputları ve number inputları yer alır.

Text inputları, kullanıcının klavyesiyle yazı yazabileceği alanlardır. Örneğin, ad soyad, e-mail adresi, tel numarası gibi değerler text inputlarına girilir. Password inputları ise, kullanıcının şifre girmesini sağlar. Bu input tipleri, kullanıcının girdiği şifrenin gizliliğini koruyarak ekranın haricinde saklanmasını sağlar. Number inputları ise, kullanıcının numara girmesi için kullanılır. Bu input tipleri, form içerisinde kullanıcının sadece numara girmesini sağlayarak kaçtane numara girildiğinin kontrol edilmesini mümkün kılar.

Checkboxlar ise, seçenekler sunmak için kullanılır. Evet/hayır veya seçili/değil seçenekleri gibi seçimler için kullanılabilir. Kullanıcının seçeneği işaretlemesi durumunda, checkbox seçilmiş olarak işaretlenir.

Form inputları, bazen kullanıcının doğru verileri girmesini sağlamak için gereken kontrolleri yapmak zorunda kalır. Bu kontroller, form validasyonunu içerir. Form validasyonu, kullanıcının hatalı verileri girmesini önleyerek daha doğru veri toplamasını sağlar. Bu işlem için, React'ın kendi halinde bir validasyon sistemi olmadığı için dışarıdan bir kütüphane kullanmak gerekir.

Form validasyonu işlemi için, birçok kütüphane arasından en sık kullanılan React Hook Form'dur. Bu kütüphane, form validasyon işlemlerini kolaylaştırır ve kullanıcının doğru veri girmesini sağlar.

Genel olarak, React ile form işlemleri oldukça kolaydır. Inputların kullanımı, form validasyonu ve diğer işlemler için farklı kütüphaneler bulunsa da, bu işlemlerin hepsi basit bir şekilde yapılabilmektedir. React ile form işlemlerinin nasıl yapılabileceği hakkında önemli adımlar attık.

Text Inputlar

React kullanarak bir form oluştururken, kullanıcıdan veri almak için text inputlar kullanılır. Text inputlar, kullanıcının metin girmesini sağlar.

Bir text input oluşturmak için, input etiketi kullanılır. Bu etiketin tipi "text" olmalıdır. Örneğin:

``````

Bu şekilde oluşturulan input, basit bir şekilde kullanıcıdan metin girmesini sağlar. Ancak, inputların değerlerini kullanıcıdan almaya ve kaydetmeye ihtiyacımız var. Bunun için, inputa bir isim vermemiz gerekir.

Örneğin:

``````

Bu şekilde inputun adı "firstName" olarak belirlenmiş oldu. Bu inputun değerini almak için, state kullanırız.

```const [firstName, setFirstName] = useState("");```

Bu state, boş bir string ile başlatılır ve inputa verilen değerleri kaydeder.

``` setFirstName(e.target.value)} />```

Bu şekilde, inputa girilen her değer state içinde kaydedilir ve daha sonra kullanılmak üzere saklanır.

Ayrıca, formun kontrolü için submit butonu eklenmelidir. Bu buton, kullanıcının veriyi göndermesini sağlar.

```Gönder```

Bu şekilde, text inputlar kullanılarak kullanıcılardan veri almak kolay bir şekilde yapılabilir. Ancak, tek başına text inputlar yeterli değildir. Form işlemleri için farklı input tipleri de kullanılmalıdır.

Password Inputu

Password inputu, kullanıcıların girmiş oldukları şifreleri maskeleyen bir özelliktir. Bu özellik, form işlemlerinde kullanıldığında özellikle kullanıcıların gizliliği açısından önemli bir gerekliliktir. React içinde password input kullanımı oldukça basittir. Öncelikle formun içinde yer alan input elementine type="password" değeri atanmalıdır. Password alanı, diğer input alanları ile aynı şekilde FormControl componenti içinde yer alır.

Örneğin;

``````

Yukarıdaki örnekte olduğu gibi input elementine type="password" değeri atanarak password inputu oluşturulmuştur. Kullanıcı girdiği şifre bu input alanında yıldız (*) veya noktalama işareti gibi karakterlerle maskeleme işlemi gerçekleştirilir.

Password inputunun önemli özelliklerinden birisi de şifrenin gösterilip-gösterilmemesini kontrol eden "Show Password" butonudur. Bu buton sayesinde kullanıcılar, yazmış oldukları şifrelerini görme imkanına kavuşurlar. Bu butonu kullanmak için "eye" iconu kullanılmaktadır.

```Show Password ```

Yukarıda yer alan Javascript kodunda, input alanının tipi değiştirilerek şifrenin görüntülenmesi sağlanmıştır.

React içinde password inputu oluşturma işlemi oldukça basittir. Kullanıcıların girdiği şifreleri maskeleyen password inputu ile form işlemleri daha güvenli hale getirilir.

Number Inputu

Formlar, kullanıcılardan bilgi almanın en yaygın yollarından biridir. Bu nedenle form yapısını React'ta öğrenmek oldukça önemlidir. Form oluştururken text, checkbox, number, password gibi alanlara ihtiyaç duyulur. Bu yazıda, kullanıcının numara girmesini sağlayan number inputu kullanımı incelenecektir.

Number input, kullanıcının sadece numara girmesine izin veren bir input alanıdır. Bu özellik sayesinde kullanıcıların sayı dışındaki verileri girmesi engellenir. React içerisinde number input kullanmak oldukça basittir. Öncelikle bir form oluşturulur ve içerisine input alanları eklenir.

<form> <label>Numara:</label>    <input type="number" /></form>

Ayrıca input alanının minimum, maksimum, ve adım özellikleri de belirlenebilir. Bu belirlemeler sayesinde kullanıcının gireceği numaraların sınırlandırılması sağlanır.

<form> <label>Numara:</label>    <input type="number" min="0" max="100" step="5" /></form>

Bu özellikler, kullanıcıların sadece belirlenen aralıkta ve adımlarda numara girmelerini sağlayarak yanlış veri girişlerinin engellenmesine yardımcı olur.

React'ta number input kullanımı bu kadar basittir. Kullanıcıların sadece numara girmelerine izin veren bu özelliği, form yaparken kullanabilirsiniz.

Checkboxlar

Checkboxlar, kullanıcının evet/hayır ya da seçili/seçili değil gibi seçenekler için tercih edilen input türlerinden biridir. Bu input türü, React içinde de oldukça kullanışlıdır.

Checkbox oluşturmak için öncelikle form içinde bir elementi oluşturmalısınız. Bu elementin “type” özellik değeri “checkbox” olmalıdır. Örneğin;

```htmlKullanım Şartlarını Kabul Ediyorum```

Yukarıdaki kodda, “name” ve “id” özellikleri aynı değere sahiptir. Bu özellikler sayesinde, “label” elementinin “htmlFor” özelliği ile “input” elementine label ekleyebilirsiniz.

Checkbox’ların checked özelliği sayesinde seçili olup olmadığını anlayabilirsiniz. Örneğin;

```html```

Yukarıdaki kodda, onChange() methodu sayesinde checkbox’ın checked durumu kontrol edilir. Bu method, fonksiyonu tetikleyerek checked durumunu günceller.

Form Validasyonu

Bir form oluşturduktan sonra, kullanıcıların doğru veri girmesi için form validasyonu yapılması gereklidir. Form validasyonu, verilerin doğru formatta ve gerekli alanların doldurulduğunu kontrol ederek, kullanıcının hatalı veri girmesini önler. React kullanarak form validasyonunu yapmak oldukça kolaydır.

React Hook Form, validasyon için kullanabileceğimiz bir kütüphanedir. İlk olarak, formun kullanılması için useForm() fonksiyonunu kullanarak formu tanımlarız. Daha sonra, input alanlarına validationSchema adında bir prop ekleyebiliriz. Bu prop sayesinde, her input alanı için ayrı ayrı validation işlemi yapabiliriz.

• Örneğin, username input alanı için gereken validation kurallarını aşağıdaki şekilde belirleyebiliriz;
• required: "Kullanıcı adı boş bırakılamaz", minLength: {value: 3, message: "Kullanıcı adı en az 3 karakter içermelidir"}, maxLength: {value: 20, message: "Kullanıcı adı en fazla 20 karakter içermelidir"}
• Bu kurala göre, kullanıcı adının boş olmaması, en az 3 karakter ve en fazla 20 karakter içermesi gerekmektedir.
• Form validasyonu için, validation kurallarını tanımladıktan sonra input alanlarına ref prop'u eklemeliyiz.
• Son olarak, formun submit edilmesi durumunda validation kurallarına uygun veri girilip girilmediğini kontrol edebiliriz.

React ile form validasyonu işlemleri, kullanıcıların doğru veri girmesi için oldukça önemlidir. React Hook Form kütüphanesi sayesinde, kolayca form validasyonu yapabilir ve kullanıcıların yanlış veri girmesini önleyebilirsiniz.

React Hook Form

React Hook Form, react içinde birçok form validasyonu işlemini basit ve kolay bir şekilde gerçekleştirmeyi sağlayan bir kütüphanedir. React Hook Form kullanarak state veya işlevsel bileşenler oluşturmadan form validasyonlarını yapabilirsiniz.

React Hook Form kurulumunun ardından, validationSchema'da belirtilen şema doğrultusunda form'da atanmış olan inputların doğru verileri alıp almadığı kontrol edilir. Eğer veriler geçerliyse onSubmit() event'i tetiklenir. Bağlaması düzenlendikten sonra form ve inputlarına uygulanabilir.

React Hook Form'un diğer bir avantajı, form validasyonu kuru kullanabilmenizdir. Bu kütüphane, "FormProvider" bileşeni ile tüm bileşenleri form yapısına erişebilir. Bu sayede tek bir giriş yapının quezcsidicaik bilgilendirmesi için tek bir doğrulayıcısını kullanabilirsiniz.

React Hook Form'un bazı özellikleri şunlardır:

• Zengin hata bilgisi
• Bir ton test
• Formlara erişim
• Nesne olarak hata mesajları

React Hook Form, kolay kullanımı, performansı, zengin hata mesajları ve referansın kolay olması gibi özellikleriyle, kullanıcılara form işlemlerini hızlı ve kolay bir şekilde gerçekleştirmeleri için birçok avantaj sunar. Bu sayede React ile form işlemlerini daha kolay gerçekleştirmek isteyenler, React Hook Form kullanarak bileşenlerine form validasyonları yapabilirler.

Sonuç

Bu rehberde, React kullanarak form işlemlerinin nasıl yapılabileceğini adım adım öğrendik. Form oluşturmak için hangi kodların kullanılabileceğini, inputlar nasıl kullanılacağını ve farklı input türlerinin (text, password, number, checkbox) nasıl kullanılabileceğini öğrendik. Form validasyonuna nasıl önem verileceği ve React Hook Form kullanarak nasıl form validasyon işlemleri yapabileceğimiz hakkında bilgi sahibi olduk.

Bu rehber, React form işlemlerine dair temel bilgilere sahip olmak isteyenler için yararlı olacaktır. React form işlemlerinin nasıl yapılacağına dair önemli ipuçları vermektedir. Ayrıca, React kullanırken HTML, CSS ve JavaScript programlama dillerinin kullanılması konusunda da bilgi sahibi olmanız gerekir. İyi çalışmalar!