<input type="submit">

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

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

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

<input type="submit" />

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

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

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

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

application/x-www-form-urlencoded

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

multipart/form-data

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

text/plain

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

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

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

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

get

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

post

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

dialog

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

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

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

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

Строка, которая указывает имя или ключевое слово, обозначающее, где отобразить ответ после отправки формы. Строка должна быть именем контекста просмотра (то есть, вкладкой, окном или <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=usertext, где «usertext» — текст, введенный пользователем, закодированный для сохранения специальных символов. То, куда и как данные отправляются, зависит от настроек <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>
• Совместимость свойств CSS