Формата е елемент в HTML, защото тя ни позволява да въвеждаме данни и следователно също така взаимодействат с мрежата и нейната база данни, което изисква контроли от гледна точка на сигурността, тъй като от формуляр можем да изпращаме файлове на сървър, да обработваме поръчка или плащане, като избираме различни елементи и контроли на формуляр, които след това ще бъдат обработени от javascript събитие или от някой друг език за уеб програмиране.
Много пъти разработчиците трябва да използват различни библиотеки, за да могат да изпълняват задачи във формуляри, за да контролират събития, а в някои случаи трябва да прибягваме до някои нежелани кодови методи за изпращане на данни, контрол на въведеното, избягване на инжектиране на код или XSS атаки.
Ако искаме да извършим всички тези контроли и събития, можем да намерим голям брой javascript файлове, които значително увеличават теглото на мрежата в kb и забавят страницата. Също така е несигурно, защото ако някой забрани използването на Javascript, всички контроли ще спрат да работят.
Елементите на форми и атрибути в HTML5 осигуряват по -голяма степен на контрол и семантично маркиране от предишната му версия, добавени са атрибути и свойства, които премахват необходимостта от извършване на контроли отвън чрез скриптове. Функциите на формулярите в HTML5 осигуряват по -добър контрол и не зависят от това дали Javascript е активиран или деактивиран във вашия браузър.
Атрибути на HTML5 формуляр - Заместител
С помощта на запазена собственост Можем да посочим пример за типа данни, които трябва да бъдат регистрирани, това ни позволява да предоставим информация на потребителя, която да служи като ръководство. Този текст, който посочваме в контролата, ще изчезне, след като потребителят въведе знак.
Атрибутът на заместител може да се използва само в текстови полета или в текстови области.
Модели с регулярни изрази във форми
Атрибутът модел ни позволява да дефинираме правилата си за валидиране на данните, които потребителят въвежда с помощта на регулярни изрази. Регулярният израз е поредица от знаци, която определя модел на данни, например моделът [a-z] показва, че потребителят може да въвежда само малки букви или шаблонът [0-9] показва, че могат да се въвеждат само цифри.
HTML5 ви позволява да използвате шаблони, така че ако въведените знаци не съвпадат с автоматично дефинирания модел, той ще генерира грешка.
Ние ще дефинирайте някои правила с шаблони и стилови таблици за промяна на цвета на рамката, ако възникне невалидното събитие, тоест въведеното от потребителя не съответства на това, което е определено в определен модел.
Създаваме файл Example01.html и пишем следния код:
Модели с регулярни изрази
Потребител
Ключ:
Електронна поща:
Дата
Цена
Ако изпратим формуляра, той ще потвърди всяко поле по отношение на дефинирания модел и ако не е изпълнено, ще покаже съобщението, което дефинираме в заглавния маркер, ще използва и стиловете, определени в правилото и CSS свойствата на невалидния клас, който HTML5 използва.
Например въвеждаме неправилен имейл:
Въвеждаме и неправилна дата и виждаме, че тя не позволява изпращането на формуляра. Ако искаме да подобрим или добавим визуален ефект, можем да използваме CSS, за да добавим икона за фон в контролата, където възниква повредата. Например добавяме следните css стилове към тези, които вече сме имали, променяме въвеждането на input [type = 'text'], така че стиловите листове да влияят само на текстовите полета, но не и на бутона.
Използваме следните икони:
До всяка контрола добавяме необходимото свойство, например:
При изпълнение на примера можем да видим, че ако изпратим формуляра с празни полета, те ще ни покажат задължителните и валидни полета.
Предимството на шаблоните е, че не използваме JQuery или друг вид валидиране и ако тази опция е деактивирана в браузъра, ограниченията и правилата, които дефинираме, ще продължат да работят. Това не означава, че чрез изпращането на формуляра избягваме контролите при обработката на данните, дали да ги запишем в база данни или да ги изпратим по пощата или да извършим каквато и да е операция.
Формуляр с множество подавания
Нещо, което беше сложно да се направи, е изпратете същия формуляр на две различни странициДа предположим, че един формуляр за вход, който при натискане на бутон ще отиде на различни страници, където заявките и процесът на информация се променят. Това става чрез дефиниране на формационна собственост, където посочваме друга опция за обработка на действието по подразбиране.
Формуляр с множество подавания
Потребител:
Ключ:
Няма съмнение, че взаимодействието с тези типове свойства и атрибути значително улеснява разработването на уебсайтове, без да се налага да се използват външни библиотеки и сложни JavaScript кодове.
Като дизайнери и разработчици обикновено откриваме, че скриптът има известна монотонност за структуриране на html и валидиране, особено за писане на правила за валидиране и след това показване на потребителя, когато има грешка. HTML 5 въвежда тези нови атрибути, входни типове и други елементи, така че трябва да пишем по -малко код и да се фокусираме повече върху семантиката, отколкото върху синтаксиса.
Тези правила работят във всички браузъри, независимо от операционната система и не е необходимо да използваме други библиотеки или хакове, за да се адаптираме към различни системи или устройства. Видяхме няколко атрибута на формуляр, които помагат за подобряване на потребителското изживяване и спестяват време за разработка. Има някои атрибути, които все още не работят във всички браузъри.
