Otomatik Sonraki Form Alanına Geçiş Yapma nedir? Form tasarımlarınızda kullanabileceğiniz bu özellik sayesinde kullanıcılarınız formda sonraki alana otomatik olarak yönlendirilirler Siz de kullanıcı deneyimini artırmak için Otomatik Sonraki Form Alanına Geçiş Yapma özelliğini deneyin!
İnternet dünyasında, bir kullanıcı form doldurma sırasında birçok sayfa veya alana giriş yapmak zorunda kalabilir. Bu durum kullanıcıların form doldurmayı bırakmasına ve web sitesinin terk edilmesine neden olabilir. Ancak otomatik sonraki form alanına geçiş yapma, kullanıcı deneyimini artırmak için oldukça yararlı bir yöntemdir.
Bu makalede, bir form alanındaki verileri doldurduktan sonra otomatik olarak bir sonraki form alanına geçmek için kullanabileceğiniz yöntemler ele alınacaktır. JavaScript, HTML5, Tabindex, Autofocus, jQuery ve AngularJS gibi teknolojileri kullanarak, kullanıcılara kolay bir form doldurma deneyimi sağlayabilirsiniz.
- JavaScript Kullanarak Otomatik Geçiş Yapma: Bir form alanına tamamlanan verilerin, otomatik olarak bir sonraki form alanına geçmesi sağlanabilir. Bu özellik sayesinde, kullanıcı formun tamamını daha kolay doldurabilecek ve form doldurma işlemi daha hızlı tamamlanacaktır.
- HTML5 Otomatik Geçiş Özelliği: HTML5, otomatik geçiş özelliği ile bir form alanındaki verileri doldurduktan sonra bir sonraki alana otomatik olarak geçiş yapmanızı sağlar. Bu özellik, form doldurma sürecini kolaylaştırarak kullanıcı deneyimini artırır.
- Tabindex Kullanarak Sırayı Belirleme: TAB tuşu kullanılarak form alanları arasında gezinmek zor olabilir. Ancak tabindex özelliği kullanılarak, form alanlarının geçiş sırası belirlenebilir ve kullanıcıların form alanları arasında rahatça gezinmeleri sağlanabilir.
- Autofocus Özelliğini Kullanarak Otomatik Geçiş Yapma: Autofocus özelliği, sayfa yüklendiğinde veya bir form alanının doldurulduğunda otomatik olarak bir sonraki form alanına geçişi sağlar. Bu yöntem ile, kullanıcılar form alanları arasında gezinmek için hiçbir tuşa basmak zorunda kalmazlar.
- jQuery Kullanarak Otomatik Geçiş Yapma: jQuery, bir form alanındaki verileri doldurduktan sonra otomatik olarak bir sonraki form alanına geçmek için kullanılabilir. Kullanıcılar daha hızlı bir şekilde formu doldurarak, vakitlerinden tasarruf edebilirler.
- AngularJS Kullanarak Otomatik Geçiş Yapma: AngularJS, bir form alanındaki verileri doldurduktan sonra otomatik olarak bir sonraki form alanına geçiş yapmanızı sağlar. Bu yöntem ile, form doldurma işlemi daha akıcı ve hızlı tamamlanır.
- ngKeydown Directives Kullanarak Otomatik Geçiş Yapma: ngKeydown direktifleri kullanılarak, Enter tuşuna basıldığında bir sonraki form alanına otomatik olarak geçmek mümkündür. Kullanıcılar, bir sonraki form alanına geçiş yapmak için sadece bir tuşa basmak zorunda kalırlar.
- ngSubmit Kullanarak Otomatik Geçiş Yapma: ngSubmit kullanılarak, bir form alanındaki verileri doldurduktan sonra otomatik olarak bir sonraki form alanına geçiş yapabilirsiniz. Bu yöntem ile form doldurma işlemi daha hızlı tamamlanır ve kullanıcı deneyimi artar.
JavaScript Kullanarak Otomatik Geçiş Yapma
Eğer bir web formu geliştiriyorsanız, kullanıcıların giriş yapmaları gereken çok sayıda veri alanı ile karşılaşabilirsiniz. Kullanıcılara hareketlilik sağlayan otomatik alan geçişi, formunuzu kullanıcı dostu bir hale getirebilir. İşte JavaScript kullanarak otomatik geçişi gerçekleştirmenin birkaç yolu.
İlk yöntem, bir önceki form alanının uzunluğundan yararlanarak çalışır. Kullanıcı, bir form alanına maksimum karakter sayısına ulaştığında, otomatik olarak bir sonraki alana yönlendirilir. Bunun için, aşağıdaki kodu kullanabilirsiniz:
| HTML | JavaScript |
|---|---|
| <input type="text" maxlength="10" onkeyup="moveToNext(this, 'nextInput')" /> <input type="text" id="nextInput" maxlength="10" /> | function moveToNext(input, nextInput) { if (input.value.length == input.maxLength) { document.getElementById(nextInput).focus(); } } |
Bir sonraki yöntem, form alanlarının numaralandırılmasıdır. Numaralandırma yapılması, kodun daha okunaklı hale gelmesine yardımcı olacaktır. Aşağıdaki örnekte, birinci alandan sonra ikinci alana otomatik olarak geçişi sağlamak için tabIndex özelliğini kullanıyoruz:
| HTML | JavaScript |
|---|---|
| <input type="text" tabindex="1" /> <input type="text" tabindex="2" /> | document.addEventListener("keydown", function(e) { if (e.keyCode === 13) { e.preventDefault(); var next = document.activeElement.tabIndex + 1; document.querySelector("[tabindex='" + next + "']").focus(); } }); |
Burada, form alanına Enter tuşuna basıldığında hangi alana geçmek gerektiği addEventListener kullanılarak belirlenir.
JavaScript kullanarak otomatik geçiş yapmak, kodunuzun okunaklılığını arttırabilir ve kullanıcılar için daha rahat bir deneyim sağlayabilir. Bu nedenle, form alanlarınızda otomatik geçişi kullanmayı düşünebilirsiniz.
HTML5 Otomatik Geçiş Özelliği
HTML5’in bir diğer form alanı özelliği de, otomatik geçiş özelliğidir. Bu özellik, bir kullanıcının bir form alanındaki verileri doldurduktan sonra otomatik olarak bir sonraki form alanına geçiş yapmasını sağlar.
Bu özelliği kullanmak için, sadece form alanlarına “tabindex” özelliği eklemeniz gerekir. Bu özellik, sayfanın sıralamasını belirler ve kullanıcının form alanları arasında daha rahat bir şekilde geçiş yapmasına olanak tanır.
Tabindex özelliği eklemek için, her form alanına ayrı ayrı eklemeniz gerekir. Örneğin, e-posta adresi alanı, tabindex=”1” olacak şekilde ayarlanmalıdır. Şifre alanı, tabindex=”2” olarak ayarlanmalıdır vb. Ardından, bir kullanıcı form alanlarını doldurduğunda, otomatik olarak bir sonraki form alanına geçilecektir.
Bu özellik kullanıcı deneyimini daha kolaylaştırdığı için web geliştiricileri tarafından sıkça kullanılmaktadır. Tabindex özelliği ile birlikte kullanıldığında, bir formun doldurulması daha hızlı ve daha kolay hale gelir.
Tabindex Kullanarak Sırayı Belirleme
Tabindex özelliği, form alanlarının kullanıcılar tarafından kolayca gezinilmesini sağlayan bir HTML özelliğidir. Bu özellik sayesinde, bir formda belirlediğiniz sıraya göre form alanlarına geçiş yapabilirsiniz. Tabindex özelliği, kullanıcının form alanlarını klavye kullanarak gezinmesine de olanak tanır.
Tabindex özelliğini kullanmak için, form alanlarına bir tabindex değeri atamanız gerekir. Tabindex değeri, bir form alanının sırasını belirler. Örneğin, bir formda ilk önce kullanıcının adını girmesi gerekiyorsa, o form alanına tabindex="1" değeri atanabilir. Sonraki form alanına da tabindex="2" değeri atanabilir ve böylece form alanlarına sırayla geçiş yapılabilir.
Ayrıca, tabindex özelliği, form alanlarının yanı sıra diğer HTML öğelerine de uygulanabilir. Örneğin, bir sayfada bir menü varsa ve menü öğelerine klavye ile erişilebilsin istiyorsanız, her menü öğesine bir tabindex değeri atayabilirsiniz.
Tabindex özelliği, özellikle engelli kullanıcılar için faydalıdır. Engelli kullanıcılar, klavye kullanarak web sayfalarında gezinir ve tabindex özelliği sayesinde form alanları arasında kolayca geçiş yapabilirler.
Sonuç olarak, tabindex özelliği, form alanları arasında dolaşmayı kolaylaştırır ve engelli kullanıcıların web sayfalarında gezinmesine yardımcı olur. Tabindex değerleri atanarak, kullanıcıların bir formu daha hızlı ve kolay doldurması sağlanır.
Tabindex Sıralamasını Algılama
Tabindex özelliği, kullanıcıların form alanları arasında gezinmesine olanak tanır. Ancak, kullanıcının Enter tuşuna bastığında hangi form alanına geçmesi gerektiğini belirlemek için kepress olayı kullanılabilir.
Bir örnekle açıklamak gerekirse, aşağıdaki formda "Ad" alanından "Soyad" alanına Enter tuşuna basıldığında geçiş yapılması isteniyor.
| Ad: | |
| Soyad: |
Bu örnekte, "Ad" alanına tabindex = 1 ve "Soyad" alanına tabindex = 2 atanmıştır. Keypress olayını kullanarak Enter tuşuna basıldığında "Soyad" alanına geçmek için aşağıdaki kod kullanılabilir:
Bu kod, tuşa basıldığında mevcut form alanının tabindex değerine 1 ekleyerek bir sonraki form alanını bulur ve odaklanır. Bu, tabindex sıralamalarının dinamik olarak algılanmasına olanak tanır ve kod değişikliklerine ihtiyaç duyulmadan form alanı sıralamaları değiştirilebilir.
AutoFocus Özelliğini Kullanarak Otomatik Geçiş Yapma
Form alanlarına otomatik geçiş yapmak, kullanıcılar tarafından oldukça tercih edilen bir özelliktir. Autofocus özelliği de bu özelliklerden biridir. AutoFocus özelliği, sayfa yüklendiğinde veya bir form alanı doldurulduğunda, otomatik olarak bir sonraki form alanına geçer.
AutoFocus özelliği, HTML5 ile birlikte gelir ve kullanımı oldukça basittir. Sadece form alanına autofocus özelliği eklemeniz yeterlidir.
| Kod Örneği: |
|---|
<input type="text" name="username" autofocus> |
Yukarıdaki kod örneğinde, autofocus özelliği kullanılır ve sayfa yüklendiğinde bu form alanı otomatik olarak seçilir. Aynı zamanda, kullanıcı bu alana veri girdiğinde, bir sonraki form alanına otomatik olarak geçilir.
Autofocus özelliği, kullanıcıların daha hızlı bir şekilde form doldurmalarına olanak tanır. Ayrıca, bu özellik sayesinde kullanıcıların bir sonraki form alanına geçmek için ek bir tıklama veya klavye tuşuna basma ihtiyacı da ortadan kalkar.
jQuery Kullanarak Otomatik Geçiş Yapma
Bir form alanındaki verileri doldurduktan sonra otomatik olarak bir sonraki alanına geçiş yapmak için jQuery kullanabilirsiniz. Bu, kullanıcının formu daha hızlı tamamlamasına yardımcı olabilir.
Bunun için, her bir form alanının "id" özelliğine sahip olması gerekir. Sonra, jQuery ile "keypress" fonksiyonunu kullanarak bir sonraki form alanını belirleyebiliriz.
| Örnek Kod |
|---|
$("id-of-current-input").keypress(function(event) { if (event.keyCode === 13) { $("id-of-next-input").focus(); } }); |
- "id-of-current-input" şu anki form alanının "id" özelliğidir.
- "id-of-next-input" bir sonraki form alanının "id" özelliğidir.
- "event.keyCode === 13" Enter tuşuna basıldığında gerçekleşir.
- "$("id-of-next-input").focus();" bir sonraki form alanına geçiş yapar.
Bu kod, kullanıcının Enter tuşuna basması durumunda otomatik olarak bir sonraki form alanına geçiş yapacaktır. Bu da formun daha hızlı ve kullanıcı dostu bir şekilde tamamlanmasına yardımcı olabilir.
AngularJS Kullanarak Otomatik Geçiş Yapma
AngularJS, modern web uygulamaları geliştirmek için kullanılan bir JavaScript çatısıdır. Bu çerçeve, form alanları arasındaki otomatik geçişi kolaylaştırmak için çeşitli yöntemler sunar. AngularJS kullanarak bir form alanındaki verileri doldurduktan sonra otomatik olarak bir sonraki form alanına geçiş yapmak oldukça kolaydır.
ngKeydown Directives kullanarak, Enter tuşuna basıldığında bir sonraki form alanına otomatik olarak geçiş yapmak mümkündür. Bu işlem için öncelikle formun kontrol edileceği controller dosyasına ngKeydown direktifi eklenmelidir. Daha sonra, Enter tuşuna basıldığında çağrılacak bir fonksiyon yazılmalıdır. Bu fonksiyon içinde ise, bir sonraki form alanının ID'si alınarak, focus() yöntemi kullanılarak otomatik geçiş yapılabilir.
ngSubmit kullanarak da bir form alanındaki verileri doldurduktan sonra otomatik olarak bir sonraki form alanına geçiş yapmak mümkündür. Bu yöntemde öncelikle formun kontrol edileceği controller dosyasına ng-submit direktifi eklenmelidir. Daha sonra, submit fonksiyonuna argüman olarak, form elemanının ID'si verilerek, elementByID() ve focus() yöntemleri kullanılarak otomatik geçiş yapılabilir.
AngularJS, form alanları arasındaki otomatik geçiş işlemini kolaylaştıran birçok yöntem sunar. Bu yöntemler sayesinde, kullanıcılar formu daha hızlı ve kolay bir şekilde doldurabilirler. Ayrıca, AngularJS kullanarak geliştirilen uygulamalar, performanslı ve kullanımı kolay olduğu için tercih edilmektedir.
ngKeydown Directives Kullanarak Otomatik Geçiş Yapma
Bir formda, Enter tuşuna bastıktan sonra bir sonraki form alanına otomatik olarak geçmek isteyebilirsiniz. AngularJS ile, ngKeydown direktifleri kullanarak bu işlemi çok kolay bir şekilde yapabilirsiniz. Bu direktifler, belirli bir tuşa basıldığında gerçekleşecek olayları tetikler ve form alanları arasında geçiş yapmak için kullanılabilir.
Öncelikle, ngKeydown direktifini kullanarak form alanları arasında geçiş yapmak istediğiniz alanı tanımlamanız gerekir. Bunun için, ilgili form alanına bir id verin ve ngKeydown direktifini kullanarak Enter tuşuna basıldığında bir sonraki form alanına geçiş yapılmasını sağlayın. Örnek kod şu şekildedir:
<input type="text" id="first" ng-keydown="($event.keyCode === 13) && document.getElementById('second').focus();"><input type="text" id="second">Bu kod, Enter tuşuna basıldığında ngKeydown direktifinin tetiklendiğini ve eğer tuşun kodu 13 ise (yani Enter tuşuna basıldığında), ikinci form alanına odaklandığını gösterir. Kodu kendi form alanlarınıza göre düzenleyebilirsiniz.
ngKeydown direktifleri, Enter tuşu kadar diğer tuşlar için de kullanılabilir. Örneğin, Tab tuşuna basıldığında bir sonraki form alanına geçmek istiyorsanız, keyCode değerini 9 olarak değiştirebilirsiniz.
ngKeydown direktifleri, Enter veya diğer tuşlara basıldığında bir sonraki form alanına otomatik olarak geçmek için kullanışlı bir yöntemdir. Bu sayede, kullanıcıların formu daha hızlı ve kolay bir şekilde doldurmasına olanak tanıyarak kullanıcı deneyimini artırabilirsiniz.
ngSubmit Kullanarak Otomatik Geçiş Yapma
ngSubmit Kullanarak Otomatik Geçiş Yapma
AngularJS framework'ü ile bir formu oluşturduğunuzda, bir form alanından sonra otomatik olarak diğer form alanına geçişi kontrol etmek için ngSubmit direktifini kullanabilirsiniz. Bu yöntem, tamamlanan bir form alanındaki verinin doğrulanabilmesi açısından önemlidir.
ngSubmit, bir formun gönderildiğini algılar ve bu sinyal üzerine bir fonksiyon çağırır. Anahtar kelime ngSubmit ile bir form etiketini işaretleyebilirsiniz. Bunun ardından form.submit() kodunu kullanarak, bir sonraki form alanına geçebilirsiniz.
Örneğin, aşağıdaki kod örneğinde, bir formun ikinci alanına doğru otomatik bir şekilde geçiş yapılır. Fakat öncelikle form.submit() yöntemi kullanmak için $event.preventDefault() aracılığıyla formun varsayılan işlemini iptal etmek zorundasınız.
<form ng-submit="submitForm()"> <label for="name">Adınız:</label> <input type="text" name="name" ng-model="formData.name" required><br> <label for="surname">Soyadınız:</label> <input type="text" name="surname" ng-model="formData.surname" required><br> <!-- Form alanından sonra otomatik olarak diğer form alanına geçmek için ng-Submit kullanarak kod örneği --></form>
$scope.submitForm = function() { $event.preventDefault(); // varsayılan işlemi iptal etmek için kullanılan kod document.getElementsByName('surname')[0].focus(); // ikinci form alanına odaklanma işlemi gerçekleştirdik};Yukarıdaki örnek, ikinci form alanına doğru otomatik olarak geçilmesini sağlamak için document.getElementsByName metodundan faydalanmaktadır. Bu metot, belirtilen isime göre bir dizi eleman döndürür. Bizim örneğimizde surname olan ikinci form alanını, önceden tanımlanmış bir fonksiyon çağrısında odak noktasına almamız gerekiyor. Bu sayede, otomatik geçiş işlemi gerçekleştirilmiş olur.