Формы — неотъемлемая часть HTML-страниц, и разработчики обычно используют JavaScript для разработки того, как они работают. Вы можете лучше всего понять преимущества использования JavaScript с формами HTML, сначала изучив, как формы работают с чистым HTML. Суть формы состоит в том, чтобы принять ввод от пользователя, а затем отправить его на какой-либо сервер. Сервер может быть серверной частью, сгенерировавшей HTML, но не обязательно.
Жизненный цикл простой HTML-формы позволяет пользователю вводить данные в ее поля, затем отправлять данные и перезагружать страницу. JavaScript позволяет нам создать более плавную альтернативу этому неуклюжему потоку событий. Мы можем взять информацию из формы и незаметно отправить ее разными способами; например, мы можем обновлять данные постепенно, когда пользователь обновляет форму.
Этот метод является частью подхода Ajax (асинхронный JavaScript и XML), который имел большое значение, когда он впервые появился. Механизмы совершенствовались с годами, но основная идея осталась прежней. Возможность динамической обработки данных и обмена данными произвела революцию во внешних интерфейсах веб-приложений и по-прежнему позволяет создавать одностраничные и многостраничные веб-интерфейсы в стиле приложений.
Использование JavaScript в HTML-формах
Помимо использования JavaScript для изменения жизненного цикла данных формы, мы можем использовать его для множества других сервисов, таких как проверка ввода и включение более сложных функций на наших страницах форм, таких как ползунки и челноки.
Начнем с HTML-формы и небольшого количества ванильного JavaScript, как показано в листинге 1. Вы также можете увидеть этот пример, работающий в live fiddle.
Листинг 1. Простая HTML-форма с JavaScript
<form name="myForm" action="" method="GET">
Enter something in the box: <br>
<input type="text" name="inputbox" value="">
<input type="button" name="button" value="Click" onClick="testResults(this.form)">
</form>
function testResults (form) {
var inputValue = form.inputbox.value;
alert ("You typed: " + inputValue);
}
Листинг 1 очень прост, но в нем есть все основные элементы HTML-формы с JavaScript. В этом случае JavaScript принимает входное значение и отображает его во всплывающем окне с предупреждением. Вот обзор частей страницы:
- <форма> объявляет новую форму:
name="myForm"называет форму. В другом месте JavaScript вы можете ссылаться на эту форму по имениmyForm. Имя, которое вы даете своей форме, зависит от вас, но оно должно соответствовать стандартным правилам JavaScript для именования переменных и функций (без пробелов, без странных символов, кроме подчеркивания и т. д.).action=""определяет, куда вы хотите, чтобы браузер отправлял информацию формы. Это поле будет URL-адресом при определении. В данном случае оно пустое, потому что мы фактически никуда не отправляем форму.method="GET"определяет, как данные метода передаются в место назначения действия. Возможные значенияGETиPOSTчто означает URL-кодирование или кодирование тела соответственно.
- <ввод> запускает элемент ввода:
type="text"определяет тип ввода.name = “inputbox”дает имя входу, которое мы будем использовать позже для доступа к нему.
- <тип ввода="кнопка"> определяет объект кнопки. Если бы тип был «отправить», кнопка автоматически отправила бы форму:
onClick="testResults(this.form)"является обработчиком событий. Он говорит браузеру вызывать данную функцию JavaScript при нажатии кнопки, а затем передавать объект, представляющий форму.- Также можно создать вход с
type=”submit”затем захватитеonSubmitсобытие, предотвратите поведение отправки по умолчанию, а затем действуйте как обычно.
- результаты теста() функция определена в нашем JavaScript. Он получает значение в поле ввода, принимая форму, которая была передана в качестве аргумента, а затем просматривая
inputbox.value. Это стандартная объектная модель браузера (BOM) для объекта формы: форма имеет поле с именем каждого ввода, а значение содержит значение для этого ввода.
Действие формы в JavaScript
Давайте уделим минуту обсуждению атрибута действия в форме. При обработке поведением браузера по умолчанию поле действия представляет собой URL-адрес, сообщающий браузеру, куда отправлять данные. Когда мы получаем контроль над данными с помощью JavaScript и Ajax, мы вручную указываем, куда мы собираемся отправлять информацию (один из способов — использовать поле данных с fetch вызов, который я продемонстрирую в ближайшее время).
Иногда вы увидите URL-адрес, установленный в форме, а затем JavaScript программно извлечет значение из поля действия формы, чтобы использовать его в качестве места назначения для запроса Ajax. Вы всегда можете найти действие формы, взглянув на поле действия; например: document.getElementById(myForm).action.
Использование Ajax в HTML-форме
Теперь давайте сделаем что-нибудь более интересное с данными в нашей форме. Для начала мы можем отправить его на удаленный API для какого-нибудь простого Ajax. Мы будем использовать конечную точку https://echo.zuplo.io, который берет все, что получает, и возвращает это обратно. Мы изменим наш JavaScript, чтобы он выглядел как в листинге 2, и нам вообще не нужно менять HTML. (Вы также можете проверить живую версию здесь.)
Листинг 2. Обработка формы с удаленным эхом
function testResults (form) {
var inputValue = form.inputbox.value;
fetch("https://echo.zuplo.io/", {
method: "PUT",
body: "Very interesting: " + inputValue
}).then((response) => response.text())
.then((responseText) => {
alert(responseText);
})
.catch((error) => {
console.error("foo: " + error)
})
}
В листинге 2 мы сначала делаем то же самое, беря значение из ввода формы. Однако вместо того, чтобы просто отображать его в предупреждении, мы используем Fetch API для отправки его в нашу удаленную службу. Затем мы используем fetch обещания (через .then fluent chain), чтобы что-то сделать с ответом. В нашем случае мы просто открываем оповещение. Но здесь мы увидели суть Ajax и асинхронной обработки данных формы. Возможность точного управления данными и сетью, как это, является определяющей функцией, позволяющей использовать современные интерфейсы.
API извлечения
Fetch API и его fetch() Метод встроен в браузеры. Подходя к этому как к новичку, название «выборка» немного вводит в заблуждение. Этот API не просто извлекает; он выполняет практически любой вид связи, который вам нужен, включая использование HTTP PUT метод, как мы делаем здесь. Fetch API является современным преемником более раннего XMLHttpRequest(). Он не только хорошо заменяет этот API, но и достаточно мощен, чтобы во многих случаях избежать необходимости в сторонней библиотеке, такой как Axios.
Работа с форматами данных в HTML
Когда мы отправляем запрос по сети с помощью fetch или любого другого механизма в браузере, мы можем выбрать, как форматировать данные, которые мы получаем из формы.
На практике распространенным подходом является использование JSON, особенно с сервисами RESTful. При таком подходе вы маршалируете JSON, преобразовывая поля и их значения в объект JavaScript, а затем отправляете его в виде строки в теле запроса. (Можно включить некоторую информацию в URL-адрес в качестве параметров запроса, где она должна быть закодирована в URL-адресе, но для сложных данных более полезен текст запроса.)
Предполагая, что мы определились с телом JSON, возникает вопрос: как нам преобразовать форму в JSON? Мы могли бы преобразовать его вручную, но это быстро становится кропотливым и подверженным ошибкам. Два подхода к ванильному JavaScript заключаются в использовании FormData объект, чтобы обернуть форму или использовать Object.fromEntries() метод. Оба варианта показаны в листинге 3, а рабочая версия находится здесь. (Обратите внимание, что в дальнейшем я не буду показывать фактическую отправку данных, поскольку вы уже знаете, как это сделать. Мы поместим маршалированный JSON в тело запроса.)
Листинг 3. Использование FormData или Object.fromEntries для преобразования формы в JSON
<form name="myform" action="https://echo.zuplo.io/" method="POST">
<input type="text" name="inputbox" value="" />
<input type="range" name="range" min"0" max="100">
<input type="color" name="color">
<input type="button" name="button" value="Click" onClick="testResults(this.form)" />
</form>
function testResults (form) {
let inputValue = form.inputbox.value;
let formData = new FormData(form);
let object = {};
formData.forEach(function(value, key){
object[key] = value;
});
var json = JSON.stringify(object);
alert(json);
alert(JSON.stringify(Object.fromEntries(formData)));
}
Вы могли заметить, что в листинге 3 я добавил пару новых элементов управления — диапазон и палитру цветов — чтобы сделать JSON более интересным. Если вы нажмете кнопку сейчас, вы получите оповещения с таким текстом: {"inputbox":"Merry Christmas","range":"50","color":"#000000"}.
Эти подходы создают действительный JSON с минимальными усилиями, но сталкиваются с проблемами при работе с более сложными формами. Например, входы с множественным выбором будут прерываться с помощью Object.fromEntriesи они требуют дополнительной обработки с использованием FormData. См. Stack Overflow для хорошего обсуждения этих вопросов.
Вы также можете столкнуться с проблемами при загрузке файлов. Файловые входы фактически отправляют двоичные данные в свои поля. Также возможно иметь множественный выбор файла, который отправляет массив двоичных фрагментов. См. Как легко преобразовать HTML-форму в JSON для получения хорошего описания решения этой проблемы и других подобных проблем (например, нескольких полей с одинаковым именем) при ручном создании JSON из FormData.
Проверка
Вы почувствовали вкус работы с данными в формах. Раньше проверка форм была одним из главных призваний JavaScript. С тех пор браузеры внедрили довольно надежную проверку форм, но все еще есть место для использования JavaScript. Например, браузер может обрабатывать многие потребности проверки, такие как электронная почта, числовые диапазоны или даже регулярные выражения произвольной формы. Но как насчет чего-то более сложного? Допустим, мы хотели поддерживать числовой ввод, максимальное значение которого определялось другим полем? Мы могли бы справиться с таким требованием с помощью JavaScript.
Что еще более важно, браузер не может выполнять внутренние проверки. То есть, что, если у нас есть поле имени пользователя, проверка которого говорит, что оно не может повторно использовать существующее имя пользователя? Такого рода вещи требуют обращения к серверу, что мы можем выполнить с помощью Ajax-запроса. Пользователь вводит значение, мы отправляем с ним запрос, и сервер сравнивает значение с тем, что есть в базе данных, а затем отправляет ответ, сообщающий нам, действительно ли имя пользователя.
Мы могли бы выполнить такую проверку в нескольких местах. Мы могли бы сделать это, когда пользователь отправляет форму, или когда поле имени пользователя размыто (что означает, что оно теряет фокус), или даже когда пользователь вводит текст (для этого мы использовали бы какое-то регулирование или устранение отказов, чтобы гарантировать, что это не был хриплым). Листинг 4 и живая версия кода на скрипке дадут вам представление о том, как работает простая проверка.
Листинг 4. Простая проверка текстового поля при вводе
// HTML
Enter something in the box: <br>
<input type="text" name="inputbox" id="inputBox" value="" />
<p id="msg"></p>
// JS
let inputBox = document.querySelector('#inputBox');
inputBox.addEventListener('input', (event) => {
if (["frodo","bilbo","sam"].includes(event.target.value)){
document.querySelector('#msg').innerHTML="Already have that Hobbit";
} else {
document.querySelector('#msg').innerHTML="";
}
})
В листинге 4 представлены несколько новых идей. Теперь есть элемент абзаца с идентификатором «msg”, который мы будем использовать для отображения сообщения об ошибке, если пользователь выберет существующее имя пользователя. В JavaScript мы присоединяем прослушиватель к inputBox поле программно с помощью addEventListener, тогда как раньше мы делали это декларативно в HTML. Прослушивая событие ввода, мы будем получать уведомления каждый раз, когда пользователь вводит текст (если бы мы использовали событие изменения, мы были бы уведомлены, когда пользователь фиксирует изменение, нажав Enter). Вместо отправки значения ввода (event.target.value) на сервер, чтобы проверить наличие повторяющегося имени пользователя, мы можем просто проверить его здесь по массиву (в нашем случае у нас уже зарегистрировано три имени хоббитов). Если мы находим имя уже в нашем массиве, мы устанавливаем сообщение в пользовательском интерфейсе, находя «msg” и установка его текста, или удаление сообщения об ошибке, если имя не является дубликатом. (Опять же, на практике мы будем ограничивать события, чтобы предотвратить заикание в пользовательском интерфейсе, когда на сервер отправляются запросы туда и обратно.)
Опережающий ввод, автозаполнение и автодополнение
Вы только что видели простой пример внутренней проверки. Теперь давайте на мгновение обратим наше внимание на общее требование ввод текста (также известный как автоматическое предложение или автозаполнение). Включение Google этой функции сделало ее чрезвычайно популярной. Пример проверки из листинга 4 на самом деле довольно близок к основам реализации опережающего ввода. Вместо того, чтобы проверять повторяющиеся имена пользователей, мы искали результаты, которые могли бы соответствовать тому, что было введено до сих пор, а затем представляли их в раскрывающемся списке или непосредственно в текстовом поле.
