Проверка формы с помощью HTML

автор Крис Эбубе Роланд

Вы когда-нибудь разочаровывались при заполнении онлайн-формы, и, потратив около 2–3 минут на то, чтобы сделать это и, наконец, отправить, вас отправили обратно, потому что в форме был раздел, который не был заполнен в нужном формате или в обязательном поле. что вы случайно пропустили… тогда вам придется начинать весь трудовой процесс сначала? То есть проблема не слишком идеально спроектированной формы.

В этом аспекте вмешивается проверка формы. Можно сказать, что проверка веб-формы — это «техническая процедура, при которой проверяется точность данных, введенных пользователем».

Либо форма уведомит пользователя о том, что он допустил ошибку и должен исправить ее, прежде чем продолжить, либо форма будет проверена, и пользователь сможет завершить процесс регистрации.

Например, если вы заполняете форму, для которой требуется действительный адрес электронной почты в неправильном формате, надлежащая форма не отправит форму и выдаст вам сообщение об ошибке, когда вы введете адрес электронной почты в неправильном формате;

Но когда вы вводите свой адрес электронной почты в правильном формате, он работает, и сообщение об ошибке исчезает;

По сути, проверка проверяет, соответствует ли отправленный контент соответствующему формату, например, является ли это электронное письмо [email protected], и соответствует ли он требованиям для приемлемого ввода.
например, электронная почта еще не зарегистрирована или пароль соответствует требуемому формату.

В этой статье мы обсудим, что такое валидация, какие существуют типы валидации, и покажем примеры форм и валидации.

Типы проверки формы

Чтобы наши браузеры могли интерпретировать веб-форму, она должна быть проверена. Проверка, выполняемая в браузере, называется проверкой на стороне клиента, а проверка, выполняемая на сервере, называется проверкой на стороне сервера. Они являются основным средством проверки; мы кратко обсудим их.

Проверка на стороне клиента

Проверка на стороне клиента — это предварительная проверка и ключевой компонент положительного пользовательского опыта. Выявляя ошибочные данные на стороне клиента, пользователи получают возможность сразу их исправить. Значительная задержка возникает из-за циклического обращения к серверу, которое затем отклоняется и отправляется обратно клиенту, чтобы уведомить пользователя о необходимости исправить свои данные. Более быстрый отклик браузера обеспечивает лучшее взаимодействие с пользователем. Все вводимые пользователем данные проверяются в браузере при использовании проверки на стороне клиента. Проверка на стороне клиента устраняет необходимость обращения к серверу, уменьшая сетевой трафик и повышая производительность сервера. Проверка на стороне клиента существует во внешнем интерфейсе и является частью требований к безопасному кодированию внешнего интерфейса. Этот тип проверки выполняется на стороне браузера с использованием языков сценариев, таких как атрибуты VBScript, JavaScript или HTML5.

Вот пример проверки данных на стороне клиента с использованием только HTML:

<form>
  <div>
    <label for="number">Number</label>
    <input type="number" id="number" pattern="[-+]?[0-9]" />
  </div>

  <div>
    <label for="numberfloat">Numbers with Decimals</label>
    <input
      type="number"
      id="numberfloat"
      step="any"
      pattern="[-+]?[0-9]*[.,]?[0-9]+"
    />
  </div>

  <div>
    <label for="numberrange">Number with a Min and Max Range (3-42)</label>
    <input
      type="text"
      id="numberrange"
      min="3"
      max="42"
      pattern="\[3-9]|[1-3\][0-9]|4[0-2]"
    />
  </div>

  <input type="submit" class="button" value="Submit" />
</form>

Проверка на стороне сервера

При использовании проверки на стороне сервера вводимые пользователем данные передаются на сервер и проверяются с использованием одного из языков сценариев на стороне сервера, например Python или Node.js. Новая динамически созданная веб-страница используется для отправки отзыва клиенту после процедуры проверки на стороне сервера. Чтобы указать типы данных, которые может принимать свойство, атрибуты присоединяются над объявлением свойства в классе модели/сущности для выполнения проверки на стороне сервера. Спецификации могут включать широкий диапазон параметров, чтобы гарантировать принятие только уточненных данных.

В то время как проверка ввода на стороне клиента обрабатывается интерфейсным кодом, проверка ввода на стороне сервера обрабатывается внутренним кодом. Внутренний код действует как мост между внешним кодом (который видит пользователь) и базой данных, в которой хранятся пользовательские данные, так как она находится ближе всего к базе данных.

Чтобы принять меры, защищающие от недобросовестных пользователей, которые могут быстро обойти ваш язык сценариев на стороне клиента и отправить потенциально опасную информацию на сервер, предпочтительно проверять вводимые пользователем данные на стороне сервера.

ПРИМЕЧАНИЕ. Проверка на стороне клиента не должна считаться исчерпывающей мерой безопасности! Ваши приложения должны всегда выполнять проверки безопасности для любых данных, отправленных из формы, как на серверной, так и на клиентской стороне, потому что проверку на последней слишком легко обойти, поэтому злоумышленники могут легко отправлять неверные данные. через ваш сервер. В основном проверка на стороне клиента зависит от JavaScript, поэтому, если пользователи могут отключить JavaScript в браузере, его можно легко обойти и отправить опасные данные на сервер. Таким образом, проверка на стороне клиента не может защитить ваше приложение от злонамеренных атак на ресурсы вашего сервера и базы данных.
Поскольку оба метода проверки важны, рекомендуется использовать обе проверки для максимальной безопасности.

Элемент <input>

Тег <input> — важный элемент HTML-формы. Атрибут 'type' элемента ввода может быть разных типов, что определяет информационное поле.
Можно также сказать, что этот тег является элементом управления вводом, который предоставляет пользователям интерактивный элемент управления для ввода данных. Традиционно тег находится внутри тега <form> и может представлять собой текстовые поля, флажки, раскрывающиеся списки, кнопки и другие элементы ввода, просто установив соответствующий атрибут type. Пример, такой как <input type="text" name="name">, дает текстовое поле.

Атрибуты по умолчанию, доступные для проверки элемента ввода.

  • <input type="checkbox"> - Флажок, позволяющий выбирать/отменять выбор отдельных значений.
  • <input type="email"> - Поле для редактирования адреса электронной почты. Он выглядит как ввод text, но имеет параметры проверки и соответствующую клавиатуру для поддержки браузеров и устройств с динамической клавиатурой.
  • <input type= "button"> — кнопка без поведения по умолчанию, отображающая значение атрибута value, по умолчанию пустое.
  • <input type= "color"> - Элемент управления для задания цвета; открытие палитры цветов, когда она активна в поддерживаемых браузерах.
  • <input type="date"> - Элемент управления для ввода даты (год, месяц и день, без времени). Он открывает средство выбора даты или числовые колеса для года, месяца и дня, когда он активен в поддерживающих браузерах.
  • <input type="datetime-local"> — используется для ввода даты и времени без часового пояса. Он открывает средство выбора даты или числовые колеса для компонентов даты и времени, когда он активен в браузерах, которые его поддерживают.

Существуют также различные элементы, похожие на тег ввода, который также используется при проверке формы.
Вот некоторые из них:

  • метка: несколько элементов формы имеют метки, определенные элементом <label>. Пользователи программ чтения с экрана могут извлечь выгоду из элемента <label>, потому что программа чтения с экрана будет читать метку вслух, когда пользователь фокусируется на элементе ввода. Поскольку текст внутри элемента <label> переключает переключатель или флажок, когда пользователь щелкает его, элемент <label> также помогает пользователям, у которых возникают проблемы с нажатием на крошечные области (например, переключатели или флажки).
  • select: элемент <select> можно использовать для добавления выпадающего списка в вашу форму; он в основном определяет раскрывающийся список. Элементы <option> определяют вариант, который можно выбрать. По умолчанию выбран первый элемент в раскрывающемся списке. Вот пример:
<label for="cars">Select car:</label>
<select id="cars" name="cars">
  <option value="Mercedes">Mercedes</option>
  <option value="Ford">Ford</option>
  <option value="Subaru">Subaru</option>
  <option value="Audi">Audi</option>
</select>
  • textarea: элемент <textarea> создает большую область для ввода текста, чем текстовое поле по умолчанию; он определяет многострочное поле ввода (текстовая область). Атрибут cols определяет ширину текстовой области, тогда как атрибут rows указывает количество строк, видимых в текстовой области. Элемент <textarea> также принимает несколько атрибутов, часто используемых в форме <input>, таких как autocomplete, autofocus, disabled, placeholder, readonly и required.
<textarea name="message" rows="20" cols="40">
The dog was rolling in the grass.
</textarea>
  • fieldset: в форме связанные данные группируются с помощью элемента <fieldset>. Часть формы HTML сгруппирована элементом <fieldset>, который сопровождается заголовком, обеспечиваемым вложенным элементом <legend>. Для этого требуется несколько атрибутов, два наиболее примечательных из которых <form> и <disabled> могут содержать <id> другого <form> на той же странице, что позволяет вам сделать <fieldset> частью этого <form>, даже если он не вложен в него, а <disabled> позволяет вам чтобы отключить <fieldset> и все его содержимое одновременно.
<form action="/action_page.php">
  <fieldset>
    <legend>Details:</legend>
    <label for="firstN">First name:</label><br />
    <input type="text" id="firstN" name="firstN" value="John" /><br />
    <label for="lastN">Last name:</label><br />
    <input type="text" id="lastN" name="lastN" value="Doe" /><br /><br />
    <input type="submit" value="Submit" />
  </fieldset>
</form>

Повтор сеанса с открытым исходным кодом

OpenReplay – это пакет для воспроизведения сеансов с открытым исходным кодом, который позволяет вам видеть, что пользователи делают в вашем веб-приложении, помогая вам быстрее устранять неполадки. OpenReplay размещается на собственном сервере для полного контроля над вашими данными.

Начните получать удовольствие от отладки — начните использовать OpenReplay бесплатно.

Проверка формы в HTML

Чтобы предотвратить передачу данных с ошибками на сервер, проверка формы HTML включает просмотр содержимого страницы формы HTML. Эта процедура имеет решающее значение для создания веб-приложений на основе HTML, поскольку она улучшает веб-страницы и приложения. Для проверки формы можно использовать как JavaScript, так и встроенные функции HTML5.

Проверка формы HTML5

Везде, где упоминается проверка формы, JavaScript — это первый язык, который приходит на ум для создания полностью интерактивной формы. Однако в HTML5 предусмотрены встроенные функции проверки формы без использования JavaScript. К элементам формы будут добавлены атрибуты проверки, которые автоматически активируют проверку формы. Различные атрибуты делают это возможным в HTML5; они позволяют нам размещать различные инструкции в наших элементах формы, таких как pattern, minlength/ maxlength и required, которые позволяют нам устанавливать определенные правила в нашей форме.

Когда следует использовать HTML для проверки формы? Проверка формы с помощью HTML должна рассматриваться как начальный базовый уровень безопасности для добавления JavaScript. Как мы упоминали ранее в статье, оба должны быть реализованы для обеспечения максимальной защиты от случаев, когда пользователь может отключить JavaScript и оставить вашу форму уязвимой.

Как проверить форму в HTML5? Используя тег проверки формы required, который делает данные в этом поле обязательными для ввода, ниже приведен пример проверки формы с использованием атрибута проверки HTML5. Без тега required форма не может быть отправлена.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .formData {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 10px;
        background-color: rose;
      }
      form {
        font-size: 30px;
      }
      form input {
        margin-left: 10px;
        font-size: 15px;
      }
    </style>
  </head>
  <body>
    <div class="formData">
      <form action="#">
        Name: <input type="text" name="name" required />
        <input type="submit" />
      </form>
    </div>
  </body>
</html>

Результатом приведенного выше кода является простая веб-форма с одним полем ввода данных — Имя.

Теперь, если мы попытаемся отправить форму без указания какой-либо информации в области имени, мы получим сообщение об ошибке «Пожалуйста, заполните это поле» после отправки, и форма не будет отправлена ​​на сервер.

Выше показано сообщение об ошибке, отображаемое из-за отправки формы без ввода каких-либо данных в обязательное поле.

Проверка ограничений

Проверку ограничений можно легко объяснить, сказав, что каждое поле в форме служит определенной цели. Ограничения или рекомендации, диктующие, что следует и не следует вводить в каждое поле формы, часто используются для этой цели.

Алгоритм, используемый браузерами для оценки валидности формы после отправки, составляет основную часть проверки ограничений. Например, поле <email> потребует ввода правильного адреса электронной почты, прежде чем его можно будет отправить. Поле <password> может иметь минимальное количество обязательных символов и определенные требования к символам; текстовое поле может иметь ограничение по количеству символов.

Современные браузеры могут следить за тем, чтобы пользователи соблюдали эти ограничения, и предупреждать пользователей, когда эти правила только что были нарушены. Проверка ограничений и элемент <input> теперь имеют новые семантические типы, которые были добавлены в HTML5, чтобы упростить проверку содержимого формы на стороне клиента.

Вводя новые атрибуты, можно тестировать простые повседневные ограничения без использования JavaScript. Алгоритм достигает этого результата путем объединения текущих атрибутов type и maxlength с новыми свойствами HTML5 min, max, step, pattern и required.

Заключение

В этой статье мы подробно обсудили проверки форм и то, как они работают. Затем мы разобрались и объяснили стороны проверки в браузере (на стороне клиента и на стороне сервера) с примерами и иллюстрациями. Вкратце, мы рассмотрели элемент <input> и некоторые его атрибуты по умолчанию, которые помогают при проверке.
Мы также объяснили проверку формы с помощью HTML, как использовать HTML для проверки формы и когда ее следует реализовать. Наконец, мы обсудили проверку ограничений и ее назначение в форме.

СОВЕТ ОТ РЕДАКТОРА. Чтобы узнать больше о проверке формы, не пропустите нашу статью Проверка формы с помощью JavaScript Constraint Validation API.

Первоначально опубликовано на blog.openreplay.com 29 сентября 2022 г.