<input type="submit"> — значение атрибута HTML

Элементы <input> типа submit отображаются в виде кнопок. Когда происходит событие click (обычно из-за щелчка пользователя по кнопке), пользовательский агент пытается отправить форму на сервер.

Значение

Атрибут value элемента <input type="submit"> содержит строку, отображаемую в качестве подписи кнопки. В противном случае у кнопок нет фактического значения. value задаёт доступное описание кнопки.

Задание атрибута value

<input type="submit" value="Send Request" />

Если атрибут value не указан

Если не указать value, кнопка получит стандартную подпись, выбранную пользовательским агентом. Скорее всего, это будет что-то вроде «Отправить» или «Отправить запрос». Ниже приведён пример кнопки отправки со стандартной подписью в вашем браузере:

<input type="submit" />

Дополнительные атрибуты

Помимо атрибутов, общих для всех элементов <input>, кнопки submit поддерживают следующие атрибуты.

formaction

Строка, указывающая URL, на который следует отправить данные. Она имеет приоритет над атрибутом action элемента <form>, которому принадлежит <input>.

Этот атрибут также доступен для элементов <input type="image"> и <button>.

formenctype

Строка, указывающая способ кодирования данных формы при отправке на сервер. Допустимы три значения:

application/x-www-form-urlencoded

Значение по умолчанию. Данные формы отправляются в виде строки после процентного кодирования текста с помощью такого алгоритма, как encodeURI().

multipart/form-data

Для обработки данных используется API FormData, что позволяет отправлять на сервер файлы. Этот тип кодирования необходимо использовать, если форма содержит элементы <input> с типом type file (<input type="file">).

text/plain

Обычный текст; в основном полезен для отладки, так как позволяет легко просмотреть отправляемые данные.

Если указан, атрибут formenctype переопределяет атрибут enctype родительской формы.

Этот атрибут также доступен для элементов <input type="image"> и <button>.

formmethod

Строка, указывающая HTTP-метод, используемый для отправки данных формы; это значение переопределяет атрибут method, заданный для родительской формы. Допустимые значения:

get

URL формируется следующим образом: сначала берётся URL, указанный в атрибуте formaction или action, затем добавляется вопросительный знак («?»), после чего добавляются данные формы, закодированные способом, описанным для formenctype или в атрибуте enctype формы. Затем этот URL отправляется на сервер с помощью HTTP-запроса get. Этот метод хорошо подходит для форм, содержащих только символы ASCII и не имеющих побочных эффектов. Это значение по умолчанию.

post

Данные формы включаются в тело запроса, который отправляется на URL, указанный в атрибуте formaction или action, с использованием HTTP-метода post. Этот метод поддерживает сложные данные и вложения файлов.

dialog

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

Этот атрибут также доступен для элементов <input type="image"> и <button>.

formnovalidate

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

Этот атрибут также доступен для элементов <input type="image"> и <button>.

formtarget

Строка, задающая имя или ключевое слово, указывающее, где отображать ответ, полученный после отправки формы. Строка должна содержать имя контекста просмотра (то есть вкладки, окна или <iframe>). Указанное здесь значение переопределяет значение атрибута target элемента <form>, которому принадлежит этот элемент.

Помимо имён вкладок, окон или встроенных фреймов, можно использовать несколько специальных ключевых слов:

_self

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

_blank

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

_parent

Загружает ответ в родительский контекст просмотра текущего контекста. Если родительского контекста нет, поведение совпадает с _self.

_top

Загружает ответ в контекст просмотра верхнего уровня — контекст, являющийся самым верхним предком текущего контекста. Если текущий контекст и есть контекст верхнего уровня, поведение совпадает с _self.

Этот атрибут также доступен для элементов <input type="image"> и <button>.

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

Кнопки <input type="submit"> используются для отправки форм. Если нужно создать собственную кнопку и настроить её поведение с помощью JavaScript, используйте <input type="button"> или, что ещё лучше, элемент <button>.

Если вы решите использовать элементы <button> для создания кнопок в форме, помните: если <button> находится внутри элемента <form>, эта кнопка будет считаться кнопкой «отправки». Поэтому всегда явно указывайте, какая кнопка является кнопкой отправки.

Простая кнопка отправки

Для начала создадим форму с простой кнопкой отправки:

<form>
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="Send" />
  </div>
</form>

Она отображается следующим образом:

Попробуйте ввести текст в текстовое поле, а затем отправить форму.

При отправке пара «имя/значение» передаётся на сервер. В этом случае строка будет text=user-text, где «user-text» — это введённый пользователем текст, закодированный для сохранения специальных символов. Место и способ отправки данных зависят от настроек <form>; подробнее см. в статье Отправка данных формы.

Добавление сочетания клавиш для кнопки отправки

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

В этом примере в качестве клавиши доступа задана s (нужно нажать s вместе с соответствующими клавишами-модификаторами для вашего браузера и ОС). Чтобы избежать конфликтов с собственными сочетаниями клавиш пользовательского агента, для клавиш доступа используются модификаторы, отличные от тех, что применяются для других сочетаний клавиш на компьютере. Подробнее см. в статье accesskey.

Вот предыдущий пример с добавленной клавишей доступа s:

<form>
  <div>
    <label for="example">Let's submit some text</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="Send" accesskey="s" />
  </div>
</form>

Например, в Firefox для Mac нажатие Control-Option-S активирует кнопку «Отправить», а в Chrome для Windows используется сочетание Alt+S.

Проблема приведённого выше примера в том, что пользователь не узнает, какая клавиша доступа используется! Особенно это важно потому, что во избежание конфликтов обычно применяются нестандартные клавиши-модификаторы. При создании сайта обязательно предоставьте эту информацию так, чтобы она не мешала дизайну (например, добавьте легкодоступную ссылку на информацию о клавишах доступа сайта). Также может помочь подсказка для кнопки (с помощью атрибута title), хотя для обеспечения доступности этого недостаточно.

Отключение и включение кнопки отправки

Чтобы отключить кнопку отправки, укажите для неё атрибут disabled следующим образом:

<input type="submit" value="Send" disabled />

Кнопки можно включать и отключать во время выполнения, присваивая disabled значение true или false; в JavaScript это выглядит как btn.disabled = true или btn.disabled = false.

Проверка

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

Примеры

Выше приведены простые примеры. О кнопках отправки больше особо нечего сказать. Не зря этот тип элемента управления иногда называют «простой кнопкой».

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• <input> и реализующий его интерфейс HTMLInputElement.
• Формы и кнопки
• HTML-формы
• Элемент <button>