HTML5 Form Doğrulamasının ve Kayan Giriş Etiketinin Ne Olduğunu Anlama

Form doğrulamanın uygulanması, kötü niyetli kullanıcıların form alanlarına anlamsız metinler girmesini önlemede hayati bir rol oynar. Ayrıca, deneyimsiz kullanıcıların forma yanlışlıkla yanlış bilgi girmesini engeller.

Elbette, güvenli olmayan bir şekilde kullanıcılardan yanlış veriler toplamak istemezsiniz. Bu nedenle, formlar için doğrulama kurallarını tanımlamanız zorunludur.

Yıllardır, istemci tarafında form doğrulaması uygulamak için karmaşık ve TL;DR (yani Çok uzun; okumadım) JavaScript kodunu kullanıyoruz. Neyse ki, "HTML5 form doğrulama"nın yayınlanmasıyla artık minimum JavaScript ile bir forma doğrulama ekleyebiliyoruz.

En son HTML sürümü sürümü çeşitli avantajlar sunarken, en önemlisi, karmaşık JS (JavaScript'in kısaltması) doğrulama kodu yazmaya gerek kalmadan bir formu doğrulamak için gerekli olan birçok yeni giriş alanı ve nitelikle birlikte gelmesidir.

Ancak, bir formu doldururken kullanıcıların kolayca hayal kırıklığına uğrayabileceğini, özellikle de girdikleri verilerin yanlış olduğunu öğrendiklerinde hayal kırıklıklarını daha da artırabileceğini unutmayın. Ancak HTML5 sayesinde, kayan girdi etiketleri eklemek, kullanıcılar formu doldururken aynı anda form verilerini doğrulayabilir. Bu şekilde kullanıcılar, giriş alanlarında herhangi bir hata yapmaları durumunda anında haberdar olurlar.

Örneğin, aşağıda Matt Smith tarafından Dribble'da yayınlanan ve bir forma uygulandığında kayan etiket modelinin nasıl çalıştığını gösteren bir resim bulunmaktadır:

Bu gönderi, bir HTML5 formuna doğrulama eklerken kayan giriş etiketlerini nasıl uygulayabileceğinizi kapsar.

Ama Başlamadan Önce

Çoğunuz önce bir HTML5 formunu doğrulama sürecini bilmek isteyebilirsiniz. Sonuçta, hepiniz bir HTML5 formu için doğrulama kodu yazma deneyiminiz olmayabilir. Ayrıca, HTML5'te yeni tanıtılan giriş alanları ve nitelikleri hakkında bilgi sahibi olmamanız da olasıdır.

HTML5 Form Doğrulamasına Ayrıntılı Bir Bakış

Bir formu doğrulamayı planladığınızda, önce sunucu tarafı doğrulamasıyla başlamanız önerilir. Ayrıca, iyi bir web tasarımcısıysanız, istemci tarafı doğrulama eklemeye devam edin ve kullanıcılarınızın formu doğru verilerle doldurup doldurmadıklarını anında geri bildirim almalarına yardımcı olun. Örneğin, kullanıcılara e-posta adresi alanına veri girerken anında geri bildirim sağlamak, girdikleri e-posta adresinin geçerli olduğunu bilmelerini sağlayacaktır.

Harika HTML5 özelliklerinden biri, komut dosyalarına bağlı olmadan istemci tarafı doğrulamanın uygulanmasına yardımcı olmasıdır. Bunun yerine, form öğelerinizdeki “doğrulama niteliklerini” kullanarak bu görevi gerçekleştirebilirsiniz. En önemlisi, geri kalanı tarayıcınız tarafından halledilirken, bir giriş alanı için "gerekli" özniteliği eklemeniz yeterlidir.

Bir giriş alanına doğrulama eklemek için gerekli özniteliğin kullanımını açıklayan bir örnek:

[php]
Ad: <input type="text" name="adınız" gerekli>
[/php]

Yukarıdaki kod satırı, tarayıcınızın, name INPUT alanının zorunlu olarak kabul edilmesi gerektiğini (yani boş bırakılamayacağını) bilmesini sağlar.

Gördüğünüz gibi, 'Adınız' giriş alanına karşılık gelen metin kutusunda kırmızı bir işaretleyici görüntülenir. Ancak ad giriş alanına bir metin girildiğinde, işaretçi, girilen değerin geçerli olduğunu belirten bir onay işaretine dönüşür.

<input type="text"> (yani metin giriş türleri) dışında, HTML5 artık arama, e-posta, tel, tarih saat vb. gibi birkaç yeni giriş seçeneğini desteklemektedir. Basit bir deyişle, HTML5 ile aşağıdaki kod satırını yazabiliriz. :

[php]
<input type="text" name="email">
[/php]

şöyle bir şeye:

[php]
<input type="email" name="email">
[/php]

Masaüstü tarayıcılar, yukarıdaki kodu tıpkı herhangi bir standart metin alanı gibi işleyecektir.

Dikkatinize sunmak istediğim bir diğer önemli şey ise şudur: CodePen demosunda gerekli veya input type=”email” gibi özellikleri herhangi bir içerik olmadan da girmeye çalıştığınızda, yine de bir hata alırsınız. geçerli bir e-posta adresi olmadan 'GÖNDER' düğmesine tıklandığında mesaj:

Yukarıda tartıştığımız örnekte, tarayıcının varsayılan olarak bir hata mesajı gösterdiğini görebilirsiniz. Ancak, giriş değerine kendi (yani özel) doğrulama kuralınızı uygulamak isterseniz ne olur? Regex modelinin kullanışlı olduğu yer burasıdır.

RegEx Kalıplarını Anlama

abc@a gibi bir e-posta adresi girerken kalıplar görmüş olabilirsiniz. Söylemeye gerek yok, kullanıcılarınızın gerçek bir e-posta adresi girmesini istersiniz. Ve verilerinizle eşleşen kendi kalıp seçiminizi belirterek, girilen değeri doğrulamanıza yardımcı olacaktır. Örneğin, e-postanın sonunda üç veya daha fazla karakter içeren kalıpla eşleşmesini sağlayabilirsiniz. Bunu yapmak için "Desen özniteliği" ve Normal İfadeler (RegEx) kullanmanız gerekir.

RegEx, temel olarak metni ayrıştırmak veya işlemek için kullanılan bir dildir. Çoğu zaman, metin verilerinin daha iyi oluşturulması için karmaşık işlemleri (arama ve değiştirme gibi) gerçekleştirmek için normal ifadeler kullanılır. Bugün, hemen hemen her programlama ve komut dosyası dilinde düzenli ifadelerin kullanımını bulabilirsiniz. RegEx, form alanlarına girilen verileri, kalıp özniteliğini aşağıdaki gibi kullanan giriş türlerine zorlayarak doğrulamak için kullanılabilir:

[php]
<input id="phone" placeholder="111-111-1111" title="Telefon numarası için kalıp iletmek için metin" gerekli kalıp="[0-9]{3}-[0-9]{3}-[ 0-9]{4}">
[/php]

Ayrıca, herhangi bir doğrulama hatası oluşursa, “Yanlış format!”ın yanı sıra bir mesaj atmak için doğrulama hatasıyla birlikte bir başlık niteliği belirlemeyi seçebilirsiniz. aşağıda verilen kod satırını kullanarak:

[php]
<input type="email" placeholder="Email" gerekli pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A- Za-z]{2,}$" title="Lütfen buraya geçerli bir e-posta adresi girin.">
[/php]

Her giriş için saçma sapan bir kalıp yazmanıza gerek olmadığını unutmayın. Bunun yerine, çoğu durumda belirli bir veri tipine gerekli niteliği atamanız yeterli olacaktır. Örneğin, 8'den büyük bir sayı şöyle görünecektir:

[php]
<input type="number" min="8" gerekli>
[/php]

Ayrıca, tüm tarayıcıların mevcut tüm doğrulama öznitelikleri için destek sağlamadığını unutmayın. Örneğin, Firefox tarayıcısının "minlength" modeliyle uyumlu olmadığını ele alalım.

HTML5 Form Validation Kullanmanın Faydası

HTML5 form doğrulamasını uygulamanın en büyük avantajı anında geri bildirimdir. Çoğunlukla, kullanıcılar bir formdaki bazı alanları doldururken, girilen değerin geçerli olup olmadığını bildirmek için bir tür gösterge vurgulanacaktır.

Şimdi, metin kutusuna bir şey girdiğinizde, kenarlık rengi aşağıdaki gibi yeşile döner:

Ancak, gördüğünüz gibi, bu yaklaşımın bir dezavantajı var. 'First Name' alanına geçersiz (veya eksik) bir değer eklerken bile kullanıcı, değerin doğru olduğuna dair bir gösterge alır. Belki de koda :invalid:not(:empty) eklemeyi düşünebilirsiniz. Ne yazık ki böyle bir mantık, tarayıcılarda genellikle form öğelerinin boş olduğunu düşündükleri için çalışmayacaktır.

Ne yapacağını merak mı ediyorsun?

Kodda “:placeholder-shown” adlı yeni sözde seçiciyi aşağıdaki gibi eklemeyi deneyebilirsiniz:

[php]
<form>
<etiket>
<span>Ad</span>
<input type="text" pattern=".{4,}" placeholder=" " gerekli title="En az 4 karakter girin.">
</label>

<button>Gönder</button>

</form>
[/php]

Ancak tarayıcıların çoğu, gösterilen yer tutucu desteği sağlamıyor gibi görünüyor, bu nedenle giriş alanı boşken veya boşken bir sınıf arasında geçiş yapmak için bir komut dosyası yazmanız sizin için daha iyi olur. İşte aynı JavaScript kodu:

[php]
$('giriş:boş, textarea:boş').addClass('boş');

$('giriş').keyup(işlev () {

if ($(this).val().trim() !== ”) {

$(bu).removeClass('boş');

} Başka {

$(bu).addClass('boş');

}

});
[/php]

NOT : Yukarıdaki HTML işaretlemesinden yer tutucu öğeyi kaldırmayı unutmayın.

Şimdi, yukarıdaki kod parçacığını HTML5 işaretlemesiyle birlikte çalıştırdığınızda, çıktı şöyle görünecektir:

Gördüğünüz gibi metin kutusunun rengi, alana uygulanan doğrulama yerine getirilinceye kadar kırmızı kalır. Ve Gönder'e tıklamak, eksik bir ad girildiğinde bir hata mesajı görüntüler.

Ancak, kullanıcı tam (3 karakterden uzun) girer girmez metin kutusu kenarlığının rengi yeşile döner.

HTML5'te Kayan Giriş Etiketini Nasıl Ekleyebilirsiniz?

Şimdi, HTML5 formunuzu doğrularken kayan girdi etiketi ekleme yaklaşımını tartışalım. Bunu yapmak, formun görünümünü ve verdiği hissi geliştirmeye yardımcı olur. İşte HTML işaretlemesi.

Kayan etiket desenini uygulamak için etiketi HTML işaretlemenizde <input> öğesinin hemen altına itmeniz gerekir:

[php]
<form>
<etiket>
<input type="text" pattern=".{4,}" gerekli title="Karakterler 4'ten az olmamalıdır.">
<span>Adınız</span>
</label>
<etiket>
<input type="email" gerekli pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{ 2,}$" title="Lütfen geçerli bir e-posta giriniz.">
<span>E-postanız</span>
</label>
<button>Gönder</button>

</form>
[/php]

CSS şöyle görünecek:

[css]
etiket {
pozisyon: göreceli;
ekran: satır içi blok;
}
etiket aralığı {
konum: mutlak;
sol: 20 piksel;
üst: -2em;
yazı tipi boyutu: .75em;
imleç: metin;
renk: #f27853;
geçiş: tüm 150ms kolaylığı;
}
girdi {
kenarlık: 1px düz #f2f2f2;
anahat: yok;
}
girdi:odak {
kenarlık rengi: #d9d9d9;
}
giriş:geçerli {
kenarlık rengi: #42d142;
}
giriş: geçersiz {
kenarlık rengi: #ff8e7a;
}
girdi.boş {
kenarlık rengi: #d9d9d9;
}
input.empty + aralık {
üst: %50;
dönüştürmek: çevirY(-50%);
yazı tipi boyutu: 1em;
arka plan: yok;
renk: #cccccc;
}
gövde {
ekran: esnek;
min-yükseklik: 100vh;
arka plan: #f1f1f1;
yazı tipi ailesi: 'Lato', sans-serif;
yazı tipi boyutu: %150;
}
form {
kenar boşluğu: otomatik;
}

giriş, düğme {
dolgu: 15 piksel 20 piksel;
sınır yarıçapı: 1 piksel;
kenarlık: 2 piksel katı #bdbdbd;
}

düğme {
sınır rengi: #363636;
arka plan: #363636;
renk: #FFFFFF;
}
[/css]

Ve son olarak, JavaScript kodunu yazın:

[kod]
$('giriş:boş, textarea:boş').addClass('boş');
$('giriş').keyup(işlev () {
if ($(this).val().trim() !== ”) {
$(bu).removeClass('boş');
} Başka {
$(bu).addClass('boş');
}
});
[/kod]

Çıktı:

HTML5'te kayan giriş etiketlerini kullanırken aşağıdakiler gibi çeşitli efektler uygulayabilirsiniz:

• Bir HTML5 formunu doğrularken solma etkisine sahip simgeler ekleyin.
• Girilen veriler geçersizse girişi sallayın.
• Doğru doldurulduklarında girişlerin rengini karartın.

Düşünülmesi gereken şeyler

Doğrulamaları bir HTML5 formuna uygulamaya çalışırken şunlara aşina olmanız gerekir:

1. Tarayıcı Desteği : HTML5 formları modern tarayıcılarda ve IE10+'da mükemmel bir şekilde çalışır. IE sürüm 9 ve daha eski sürümler, sizi formu şekillendirmekten alıkoyan doğrulama sözde seçicilerini desteklemese de, yine de doğru şekilde çalışacaktır.
2. Uyarı : Bir HTML5 formuna doğrulama uygularken gerçekleştiremeyeceğiniz bir şey, doğrulama mesajlarını biçimlendirmektir. Bunun nedeni, bu tür işlevlerin tarayıcılar tarafından devre dışı bırakılmasıdır.

Son sözler

Bir forma doğrulama uygulamak, sitenize fazladan bir güvenlik katmanı eklemek için çok önemlidir. Bunun nedeni, kötü niyetli kullanıcıların form alanlarınıza değer olarak kötü amaçlı metin eklemesini engellemesidir. Ayrıca, formun doğrulanmış bir giriş alanına bazı girdiler girerken kullanıcılara anında geri bildirim sağlamak, deneyimlerini geliştirmeye yardımcı olacaktır. Sonuçta, formu doldururken hata yaptıklarını kabul etmek için zaman harcamak zorunda kalmayacaklar. Ancak, yalnızca JavaScript kullanarak bir formu doğrulamak zor olabilir. Burası HTML5 form doğrulamasının imdadınıza yetiştiği yerdir.

HTML5 kullanan bir forma doğrulama uygularken, uzun satırlar halinde karmaşık JS kodu yazmanız gerekmez. Bunun yerine, minimum JavaScript kodlaması ile form doğrulama kurallarını uygulayabilirsiniz. En önemlisi, HTML5 form doğrulamasında, bir formun harika görünmesini sağlayan ve kullanıcıları form gönderme işlemini gerçekleştirmeye teşvik eden kayan giriş etiketi gibi birçok yeni özellik mevcuttur.