Форма - это элемент HTML, потому что это то, что позволяет нам вводить данные и, следовательно, также взаимодействовать с сетью и ее базой данных, поэтому для нее требуются элементы управления с точки зрения безопасности, поскольку из формы мы можем отправлять файлы на сервер, обрабатывать заказ или платеж, выбирая различные элементы и элементы управления формы, которые затем обрабатываются событием javascript или каким-либо другим языком веб-программирования.
Много раз разработчики должны использовать разные библиотеки для выполнения задач в формах для управления событиями, а в некоторых случаях мы должны прибегать к некоторым нежелательным методам кода для отправки данных, контроля за тем, что вводится, предотвращения внедрения кода или XSS-атак.
Если мы хотим выполнить все эти элементы управления и события, мы можем найти большое количество файлов javascript, которые значительно увеличивают вес сети в килобайтах и замедляют страницу. Это также небезопасно, потому что если кто-то отключит использование Javascript, все элементы управления перестанут работать.
Элементы форм и атрибутов в HTML5 обеспечивают большую степень контроля и семантической разметки, чем его предыдущая версия, были добавлены атрибуты и свойства, которые позволяют исключить необходимость использования внешних элементов управления с использованием сценариев. Функции форм в HTML5 обеспечивают лучший контроль, и это не зависит от того, включен ли Javascript в вашем браузере.
Атрибуты формы HTML5 - заполнитель
Через свойство placeholder мы можем указать пример типа данных, которые должны быть зарегистрированы, это позволяет нам предоставлять информацию пользователю в качестве руководства. Этот текст, который мы указываем внутри элемента управления, исчезнет после того, как пользователь введет символ.
Атрибут placeholder можно использовать только в текстовых полях или в текстовых областях.
Шаблоны с регулярными выражениями на формах
Атрибут pattern позволяет нам определять наши правила для проверки данных, которые пользователь вводит с помощью регулярных выражений. Регулярное выражение - это последовательность символов, которая определяет шаблон данных, например, шаблон [az] указывает, что пользователь может вводить только строчные буквы, или шаблон [0-9] указывает, что можно вводить только цифры.
HTML5 позволяет использовать шаблоны, поэтому, если введенные символы не соответствуют автоматически определенному шаблону, это приведет к ошибке.
Мы собираемся определить некоторые правила с помощью шаблонов и таблиц стилей, чтобы изменить цвет границы, если происходит недопустимое событие, то есть введенное пользователем не соответствует тому, что определено в конкретном шаблоне.
Мы создаем файл Example01.html и пишем следующий код:
ввод: недействителен {граница: 1px сплошной красный; } input: valid {border: 1px solid green; } span {width: 100px; поле: 5px; дисплей: встроенный блок; }Шаблоны с регулярными выражениями
пользователь
ключ:
Электронная почта:
дата
цена
Если мы отправим форму, она проверит каждое поле по отношению к определенному шаблону и, если оно не будет выполнено, отобразит сообщение, которое мы определили в теге title, оно также будет использовать стили, определенные в правиле, и свойства CSS недопустимого класса, который использует HTML5.
Например, мы вводим неправильный адрес электронной почты:
Мы также вводим неправильную дату и видим, что вы не можете отправить форму. Если мы хотим улучшить или добавить визуальный эффект, мы можем использовать CSS, чтобы добавить фоновую иконку в элемент управления, где происходит ошибка. Например, мы добавляем следующие стили CSS к тем, которые у нас уже были, мы меняем ввод на input [type = 'text'], чтобы таблицы стилей влияли только на текстовые поля, а не на кнопку.
ввод: недействителен {граница: 1px сплошной красный; } input: valid {border: 1px solid green; } span {width: 100px; поле: 5px; дисплей: встроенный блок; } input: invalid {background-image: url (novalido.webp); background-position: справа вверху; повторение фона: без повтора; } input: valid {background-image: url (valid.webp); background-position: справа вверху; повторение фона: без повтора; } input [type = 'submit'] {background-image: none; граница: сплошная 1px # 000000; } Мы используем следующие значки:
Рядом с каждым элементом управления мы добавляем обязательное свойство, например:
При выполнении примера мы видим, что если мы отправим форму с пустыми полями, они покажут нам обязательные и действительные поля.
Преимущество шаблонов состоит в том, что мы не используем JQuery или любой другой тип проверки, и если эта опция деактивирована в браузере, определенные нами ограничения и правила будут работать. Это не означает, что при отправке формы мы избегаем контроля при обработке данных, чтобы либо сохранить их в базе данных, либо отправить их по почте, либо выполнить какую-либо операцию.
$config[ads_text6] not foundФорма с несколькими отправлениями
Что-то, что было сложно сделать, это отправить одну и ту же форму на две разные страницы, предположим, что одна форма входа в систему, которая при нажатии кнопки будет переходить на разные страницы, где изменяются запросы и информационный процесс. Это делается путем определения свойства formaction, где мы указываем другой параметр процесса для действия по умолчанию.
span {width: 100px; поле: 5px; дисплей: встроенный блок; }Форма с несколькими отправлениями
пользователь:
ключ:
Нет никаких сомнений в том, что взаимодействие с такими типами свойств и атрибутов значительно облегчает разработку веб-сайтов без использования внешних библиотек и сложных кодов JavaScript.
$config[ads_text5] not foundКак дизайнеры и разработчики, мы обычно обнаруживаем, что скрипт имеет определенную монотонную структуру html и validate, особенно для написания правил проверки и последующего показа пользователю в случае сбоя. HTML 5 вводит эти новые атрибуты, типы ввода и другие элементы, так что мы должны писать меньше кода и сосредоточиться больше на семантике, чем на синтаксисе.
Эти правила работают во всех браузерах, независимо от операционной системы, и нам не нужно использовать другие библиотеки или хаки для адаптации к различным системам или устройствам. Мы видели несколько атрибутов форм, которые помогают улучшить взаимодействие с пользователем и сэкономить время разработки. Есть некоторые атрибуты, которые все еще не работают во всех браузерах.
$config[ads_text6] not found
СТАТЬИ