Ключевая фраза input type submit: кнопка отправки формы — тег input и атрибут type="submit"

Кнопки отправки форм являются важным элементом веб-интерфейсов. Они позволяют пользователям инициировать отправку данных на сервер. В этой статье мы подробно разберем, как с помощью HTML и JavaScript реализовать функциональность кнопки отправки формы.

Основы работы с элементом input type="submit"

Элемент input с атрибутом type="submit" предназначен специально для создания кнопок отправки форм. По умолчанию такая кнопка при нажатии отправляет данные формы на указанный обработчик на сервере.

Синтаксис элемента input c типом submit выглядит так:

<input type="submit" value="Отправить">

Рассмотрим основные атрибуты такого элемента.

Атрибут value

Атрибут value задает текст, который будет отображаться на кнопке. Например:

<input type="submit" value="Отправить">

Если не указать атрибут value, на кнопке по умолчанию будет текст "Отправить" или "ОК", в зависимости от браузера и языка интерфейса.

Атрибут name

Как и у большинства элементов форм, у кнопки отправки можно задать атрибут name. Он позволяет идентифицировать элемент на стороне сервера после отправки формы:

<input type="submit" name="my_submit_button">

Значение атрибута name вместе с данными формы будет передано на сервер.

Форматирование кнопки

Для изменения внешнего вида кнопки отправки используются стандартные средства CSS, такие как:

• color
• background
• border
• padding

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

Использование кнопки в форме

Поместим элемент input type="submit" в типичную HTML-форму:

<form action="/handling-form">
<input type="text" name="username"> <input type="submit" value="Отправить"> </form>

При нажатии на такую кнопку браузер отправит данные формы на указанный обработчик /handling-form на сервере. Рассмотрим особенности использования элемента input type="submit" в форме более подробно.

Поведение по умолчанию: отправка формы

Кнопка типа submit по умолчанию инициирует отправку формы методом GET на URL, заданный в атрибуте action формы.

Чтобы отправить данные методом POST, необходимо явно указать его в атрибуте method формы:

<form method="post" action="/handling-form"> <input name="username" /> <input type="submit" value="Отправить" /> </form>

Блокировка и разблокировка кнопки

Чтобы заблокировать кнопку отправки и сделать ее неактивной, используется атрибут disabled:

<input type="submit" disabled>

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

В JavaScript кнопку можно заблокировать так:

document.querySelector('input[type="submit"]').disabled = true;

А разблокировать:

document.querySelector('input[type="submit"]').disabled = false;

Изменение параметров отправки

У кнопки отправки есть возможность переопределить некоторые параметры отправки формы, заданные по умолчанию:

• URL обработчика
• HTTP-метод
• Цель для результата отправки

Это пригодится, если нужно реализовать нестандартную логику при нажатии на конкретную кнопку отправки.

Обработка отправки формы

Отправку формы можно гибко настроить с помощью события submit и метода Form.submit() в JavaScript.

Событие submit на форме позволяет "перехватить" отправку и выполнить нужные действия перед или вместо нее:

form.addEventListener('submit', event => { // код обработчика });

В обработчике можно, например, проверить данные формы или отменить отправку методом event.preventDefault().

Отправка формы вручную

Метод Form.submit() позволяет отправить форму под управлением JavaScript:

form.submit();

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

Пример: форма обратной связи

Рассмотрим пример реализации формы обратной связи с валидацией полей и асинхронной отправкой данных на сервер.

Схема работы:

1. Проверка введенных данных перед отправкой
2. Отображение сообщения пользователю
3. Отправка данных формы методом POST
4. Обработка ответа сервера

Под капотом будет использоваться JavaScript для гибкой настройки работы формы и кнопки отправки.

Проверка полей перед отправкой

При событии submit на форме можно выполнить проверку введенных данных на корректность перед отправкой:

form.addEventListener('submit', e => { if (!validateFields()) { e.preventDefault(); // блокируем отправку showValidationError(); } });

Функция validateFields() проверит значения полей на соответствие требованиям, например, к формату email. При ошибке валидации мы блокируем отправку e.preventDefault() и показываем сообщение пользователю.

Отображение сообщений

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

Например, так можно изменить текст кнопки после успешной отправки данных на сервер:

btn.value = 'Форма отправлена!';

Отправка данных на сервер

Для асинхронной отправки данных формы используем Fetch API:

fetch('/contact', { method: 'POST', body: new FormData(form) }) .then(response => { // обработка ответа });

Метод FormData автоматически соберет все данные из полей формы и закодирует для передачи на сервер.

Обработка ответа сервера

В обработчике ответа сервера можно проанализировать код состояния HTTP и при необходимости показать сообщение:

if (response.ok) { showSuccess(); } else { showError(); }

Также ответ сервера может содержать данные, например JSON с результатами обработки формы.

Добавление иконок и изображений

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

С помощью CSS свойства background можно установить фон кнопки:

input[type="submit"] { background: url(send.svg); }

Также возможно использование тега <img> внутри кнопки:

<input type="submit" value="<img src='send.svg'> Отправить">

Но такой подход имеет недостатки с точки зрения доступности и CSS-стилизации. Поэтому предпочтительнее решение с фоном.

Анимация кнопки

Для повышения привлекательности интерфейса можно добавить анимацию к кнопке отправки формы.

Например, при наведении курсора мыши:

input[type="submit"]:hover { transform: scale(1.1); }

Или эффекты при клике на кнопку:

input[type="submit"]:active { box-shadow: inset 5px 5px 10px rgba(0, 0, 0, .2); }

Анимация должна быть минималистичной, чтобы не отвлекать пользователя от основных задач.

Сочетания клавиш

Для быстрого доступа к кнопке отправки с клавиатуры можно назначить горячую клавишу:

<input type="submit" accesskey="s">

Теперь пользователь может отправить форму, нажав Ctrl/Alt/Shift + S в зависимости от браузера и ОС.

Не забудьте подсказать пользователю о наличии этой возможности на странице!