Любопытный случай с формами HTML

Формы являются неизбежной частью любого приложения, если мы создаем интерактивное приложение, которое зависит от ввода данных пользователем.
А с ростом чувствительности данных работа с формами становится критически важной.
Поэтому давайте поговорим о формах HTML.

<form action="https://www.something.com" method="get">
        <label><input type="text" placeholder="text"/></label>
        <button type="submit" >Submit</button>
    </form>
Вход в полноэкранный режим Выход из полноэкранного режима

Базовая структура HTML-формы
Атрибут action элемента FORM определяет, куда отправлять данные формы, а атрибут method определяет метод HTTP (т.е. GET, POST) для отправки данных формы.
URL внутри действия, вероятно, будет конечной точкой API, но если это URL, а метод — get, есть шанс, что вы будете перенаправлены на страницу. Попробуйте выполнить приведенный выше код, и вы будете перенаправлены на https://www.something.com, который (как ни смешно) является реальным веб-сайтом с «чем-то», в буквальном смысле.

Одним из менее вредных вариантов использования этого может быть использование вместо ссылок кнопок формы для перенаправления, чтобы пользователь не знал, куда его перенаправят, просто наведя курсор. (PS:- это не лучшая практика a11y (доступность), но может быть несколько вариантов использования).

Основной риск создания подобных форм внутри HTML может сделать ваш сайт уязвимым к атаке под названием XSS (Cross Site Scripting), которая представляет собой тип инъекции, при которой вредоносные скрипты внедряются в безопасные и надежные сайты. Атаки XSS происходят, когда злоумышленник использует веб-приложение для отправки вредоносного кода, обычно в виде сценария на стороне браузера, другому конечному пользователю.

Один из крупнейших сайтов электронной коммерции E-bay неоднократно становился жертвой такого рода атак в прошлом, и по сей день XSS-атаки встречаются довольно часто.

(Объяснение XSS выходит за рамки данной статьи, для дальнейшего чтения вы можете посетить сайт

https://brightsec.com/blog/xss-attack/)

Совет: Всегда проверяйте URL страницы, если вы вводите какую-либо личную информацию.

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

Валидация

HTML предоставляет способ проверки данных, вводимых в элементы ввода.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" required><br>
  <label for="age">Age:</label><br>
  <input type="number" id="age" name="age" required>
</form>
Вход в полноэкранный режим Выйти из полноэкранного режима

Приведенный выше код подтвердит, что имя и фамилия указаны в текстовом формате, а возраст должен быть числом, и оба эти параметра необходимы, если пользователь хочет отправить форму.

<input type="text" id="uname" name="uname" pattern="[a-zA-Z0-9]+" minlength="4" maxlength="10">
Войти в полноэкранный режим Выйти из полноэкранного режима

Например, приведенный выше код будет проверять, что текст содержит только буквы от a-z A-Z и от 0-9, что делает недействительными другие вводимые данные. Это может показаться правильным решением, и в какой-то степени так оно и есть, но написание сильных reg-ex может быть очень утомительным, и еще одной проблемой может быть отправка данных непосредственно на бэкенд с помощью таких методов, как curl или wget.

Следовательно, проверка данных, отправленных на backend, также важна, и для этого существуют такие инструменты, как joi и strip-js.

Хорошо, это было все о проверке, но как нам отправить форму?

Вы можете отправить форму с помощью кнопки типа submit и выполнить некоторый код, используя событие onsubmit, предоставляемое формами.

onsubmit

<form action="https://api.server.com" method="post" onsubmit="someFunction()">
        <label><input type="text" placeholder="text"/></label>
        <button type="submit" >Submit</button>
    </form>
Вход в полноэкранный режим Выйти из полноэкранного режима

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

Как же решить эту проблему?

Используя объект event,
onsubmit дает нам доступ к объекту события, который может быть использован для выполнения различных действий, таких как предотвращение действия по умолчанию, доступ к данным, на которых произошло событие и многое другое.

<script>
    function someFunction(e){
        e.preventDefault();
    }
</script>

<form action="https://api.server.com" method="post" onsubmit="someFunction(e)">
        <label><input type="text" placeholder="text"/></label>
        <button type="submit" >Submit</button>
    </form>
Вход в полноэкранный режим Выйти из полноэкранного режима

Это предотвратит перезагрузку страницы, но вот что интересно, это также предотвратит отправку формы, потому что, вопреки заблуждению новичков, preventDefault делает то, что он предотвращает поведение по умолчанию события, а не просто предотвращает перезагрузку, а отправка также является поведением по умолчанию onsubmit.

Итак, что же нам делать,

использовать лучший язык программирования для спасения, JavaScript

Возьмите данные формы и URL действия и отправьте их на сервер с помощью The Fetch API.

async function handleFormSubmit(event) {
    event.preventDefault();

    const form = event.currentTarget;
    const url = form.action;

    try {
        const formData = new FormData(form);
        const responseData = await postFormDataAsJson({ url, formData });

        console.log({ responseData });
    } catch (error) {
        console.error(error);
    }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

(Согласно MDN, The Fetch API предоставляет интерфейс для получения ресурсов (в том числе по сети), подробнее о Fetch и API позже).

Приведенный выше код может показаться незнакомым, если вы новичок в Javascript, вы можете прочитать о Fetch, try-catch и других вещах в MDN.

Эта статья ни в коем случае не может служить исчерпывающим руководством по формам и отправке, здесь просто показаны некоторые подводные камни и способы их избежать. Почему валидация важна и почему важно узнать о fetch и способах валидации данных.

Заключение: Разработчикам стоит обратить внимание на формы и пользовательские вводы и их валидацию.
Как javascript решает важную проблему, позволяя нам получить доступ к Fetch API (который, кстати, вопреки массовому заблуждению, не является частью javascript, а скорее API браузера).

Но это все функциональность, а как насчет стиля, ведь он тоже должен хорошо выглядеть.

Что ж, CSS предоставляет множество способов стилизации формы, и некоторые удивительные способы, которые мы рассмотрим в другой статье, а пока Ciao.

Оцените статью
devanswers.ru
Добавить комментарий