Form, HTML'de bir öğedir çünkü veri girmemize izin verir. ve bu nedenle, bir formdan bir sunucuya dosya gönderebileceğimiz, bir sipariş veya ödemeyi işleme koyabileceğimiz, bir formun farklı öğelerini ve kontrollerini seçebileceğimiz için güvenlik açısından kontroller gerektiren web ve veritabanı ile etkileşime girer, bu daha sonra bir javascript olayı veya başka bir web programlama dili tarafından işlenecektir.
Çoğu zaman geliştiriciler, olayları kontrol etmek için formlardaki görevleri yerine getirebilmek için farklı kütüphaneler kullanmalı ve bazı durumlarda veri göndermek, girilenleri kontrol etmek, kod enjeksiyonlarından veya XSS saldırılarından kaçınmak için bazı istenmeyen kod yöntemlerine başvurmalıyız.
Tüm bu kontrolleri ve olayları yapmak istersek, web'in kb cinsinden ağırlığını önemli ölçüde artıran ve sayfayı yavaşlatan çok sayıda javascript dosyası bulabiliriz. Ayrıca güvensizdir, çünkü birisi Javascript kullanımını devre dışı bırakırsa tüm kontroller çalışmayı durdurur.
unsurları HTML5'teki formlar ve nitelikler önceki sürümünden daha fazla kontrol ve anlamsal işaretleme sağlar, komut dosyaları aracılığıyla harici olarak kontrol gerçekleştirme ihtiyacını ortadan kaldıran nitelikler ve özellikler eklenmiştir. HTML5'teki form özellikleri daha iyi kontrol sağlar ve tarayıcınızda Javascript'in etkin veya devre dışı olmasına bağlı değildir.
HTML5 Form Nitelikleri - Yer Tutucu
aracılığıyla yer tutucu özelliği Kaydedilecek veri türünün bir örneğini gösterebiliriz, bu, kullanıcıya bir rehber olarak hizmet etmesi için bilgi vermemizi sağlar. Kontrol içerisinde belirttiğimiz bu yazı, kullanıcı bir karakter girdikten sonra kaybolacaktır.
Yer tutucu özelliği yalnızca metin kutularında veya metin alanlarında kullanılabilir.
Formlarda düzenli ifadeler içeren desenler
Model niteliği, kullanıcının normal ifadeler kullanarak girdiği verileri doğrulamak için kurallarımızı tanımlamamızı sağlar. Normal ifade, bir veri düzenini tanımlayan bir karakter dizisidir; örneğin, [a-z] düzeni kullanıcının yalnızca küçük harf girebileceğini veya [0-9] düzeni yalnızca sayıların girilebileceğini belirtir.
HTML5, kalıpları kullanmanıza izin verir, bu nedenle girilen karakterler otomatik olarak tanımlanan kalıpla eşleşmezse bir hata oluşturur.
Gidiyoruz desenler ve stil sayfaları ile bazı kurallar tanımlayın Geçersiz olay meydana gelirse, yani kullanıcı tarafından girilenler, belirli bir desende tanımlanana uymuyorsa, kenarlığın rengini değiştirmek.
Example01.html dosyasını oluşturuyoruz ve aşağıdaki kodu yazıyoruz:
Normal İfadeli Desenler
kullanıcı
Anahtar:
E-posta:
Tarih
Fiyat
Formu gönderirsek, her alanı tanımlanan kalıba göre doğrular ve yerine getirilmezse, başlık etiketinde tanımladığımız mesajı gösterir, ayrıca kuralda tanımlanan stilleri ve CSS özelliklerini kullanır. HTML5'in kullandığı geçersiz sınıfın.
Örneğin, yanlış bir e-posta giriyoruz:
Ayrıca yanlış bir tarih giriyoruz ve formun gönderilmesine izin vermediğini görüyoruz. Görsel bir efekt geliştirmek veya eklemek istersek, hatanın oluştuğu kontrolde arka plan simgesi eklemek için CSS kullanabiliriz. Örneğin, halihazırda sahip olduğumuz stillere aşağıdaki css stillerini ekleriz, girişi [type = 'text'] input olarak değiştiririz, böylece stil sayfaları düğmeyi değil yalnızca metin kutularını etkiler.
Aşağıdaki simgeleri kullanıyoruz:
Her kontrolün yanına gerekli özelliği ekliyoruz, örneğin:
Örneği çalıştırırken, formu boş alanlar ile gönderirsek, bize gerekli ve geçerli alanları göstereceklerini görebiliriz.
Kalıpların avantajı, JQuery veya başka bir doğrulama türü kullanmamamızdır ve tarayıcıda bu seçenek devre dışı bırakılırsa, tanımladığımız kısıtlamalar ve kurallar çalışmaya devam eder. Bu, formu göndererek, verileri işlerken, bir veritabanına kaydetme veya posta yoluyla gönderme veya herhangi bir işlem yürütme gibi kontrollerden kaçındığımız anlamına gelmez.
Birden çok gönderi içeren form
Yapması karmaşık olan bir şey aynı formu iki farklı sayfaya gönderDiyelim ki tek bir giriş formu, bir butona tıklandığında, sorguların ve bilgi sürecinin değiştiği farklı sayfalara gidecek. Bu, tanımlanarak yapılır. oluşum özelliği, burada varsayılan olarak eyleme başka bir işleme seçeneği belirtiriz.
Birden çok gönderi içeren form
kullanıcı:
Anahtar:
Bu tür özellikler ve niteliklerle etkileşimin, harici kütüphaneler ve karmaşık javascript kodları kullanmak zorunda kalmadan web sitelerinin geliştirilmesini büyük ölçüde kolaylaştırdığına şüphe yoktur.
Tasarımcılar ve geliştiriciler olarak, genellikle bir betiğin html'yi yapılandırmak ve doğrulamak, özellikle doğrulama kuralları yazmak ve ardından bir hata olduğunda kullanıcıya göstermek için belirli bir monotonluğu olduğunu görürüz. HTML 5, bu yeni nitelikleri, girdi türlerini ve diğer öğeleri sunar, böylece daha az kod yazmamız ve söz diziminden çok anlambilime odaklanmamız gerekir.
Bu kurallar, işletim sisteminden bağımsız olarak tüm tarayıcılarda çalışır ve farklı sistemlere veya cihazlara uyum sağlamak için başka kütüphaneler veya hack'ler kullanmamız gerekmez. Kullanıcı deneyimini iyileştirmeye ve geliştirme süresinden tasarruf etmeye yardımcı olan birkaç form özelliği gördük. Henüz tüm tarayıcılarda çalışmayan bazı özellikler var.
