<input type="submit">

Елементи <input> типу submit (подати) візуалізуються як кнопки. Коли трапляється подія click (зазвичай у зв'язку з тим, що користувач клацнув кнопку), то користувацький агент намагається подати форму на сервер.

Значення

Атрибут value елемента <input type="submit"> містить рядок, що виводиться як підпис кнопки. Без нього кнопка не матиме фактичного значення. Цей атрибут забезпечує кнопку доступним описом.

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

<input type="submit" value="Надіслати запит" />

Пропуск атрибута value

Якщо не задати value, то кнопка матиме усталений підпис, обраний користувацьким агентом. Такий підпис, імовірно, буде чимось схожим на "Submit" або "Submit Query". Ось приклад кнопки подання з усталеним підписом у вашому браузері:

<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 задано, то його значення відкидає атрибут action форми-власника.

Цей атрибут також доступний на елементах <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="submit"> і <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>, то така кнопка працює як кнопка "submit" (подання). Тож слід мати звичку явно задавати те, яка кнопка є кнопкою подання.

Базова кнопка подання

Почнімо зі створення форми з базовою кнопкою подання:

<form>
  <div>
    <label for="example">Подаймо трохи тексту</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="Надіслати" />
  </div>
</form>

Це візуалізується так:

Спробуйте ввести в текстове поле трохи тексту, а потім подати форму.

При поданні пара ім'я-значення надсилається на сервер. У цьому прикладі ця пара буде text=user-text, де "user-text" – це текст, введений користувачем, закодований для збереження спеціальних символів. Те, де і як подаються дані, залежать від налаштувань <form>; дивіться більше деталей в Надсиланні даних форми.

Додавання до кнопки подання комбінації клавіш

Комбінації клавіш, також відомі як клавіші активації або клавіатурні еквіваленти, дають користувачам змогу активувати кнопку за допомогою клавіші або комбінації клавіш клавіатури. Щоб додати до кнопки подання комбінацію клавіш, як і до будь-якого іншого <input>, для якого це має зміст, використовується глобальний атрибут accesskey.

У цьому прикладі s задано як клавішу активації (необхідно натиснути s плюс певні клавіші-модифікатори, відповідні щодо комбінації браузера та ОС). Щоб уникнути конфліктів зі власними комбінаціями клавіш користувацького агента, використовуються інакші клавіші-модифікатори, ніж в інших комбінаціях на комп'ютері. Дивіться більше деталей в accesskey.

Ось попередній приклад, до якого додана клавіша активації s:

<form>
  <div>
    <label for="example">Введіть трохи тексту</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="Надіслати" accesskey="s" />
  </div>
</form>

Наприклад, у Firefox для Mac натискання Control-Option-S активує клавішу "Надіслати", а Chrome на Windows використовує Alt+S.

Проблема з прикладом вище полягає в тому, що користувач не може дізнатися про комбінацію клавіш! Це особливо важливо, оскільки модифікатори зазвичай є нестандартними, аби уникати їхніх конфліктів. При розробці сайту слід обов'язково подати цю інформацію в формі, що не шкодить дизайну сайту (наприклад, шляхом надання легкодоступного посилання, що веде до інформації про комбінації клавіш на сайті). Додавання підказки до кнопки (за допомогою атрибута title) також може допомогти, попри те, що у зв'язку з потребами доступності, таке рішення не є повним.

Вимикання та вмикання кнопки подання

Щоб вимкнути кнопку подання, необхідно задати на ній атрибут disabled, отак:

<input type="submit" value="Надіслати" disabled />

На ходу вмикати та вимикати кнопки можна шляхом присвоєння disabled зі значенням true або false; у JavaScript це має вигляд btn.disabled = true або btn.disabled = false.

[!NOTE] Більше ідей щодо вмикання та вимикання кнопок дивіться на сторінці <input type="button">.

Валідація

Кнопки не беруть участі в валідації обмежень; вони не мають значення, котре можна було б обмежити.

Приклади

Базові приклади наведено вище. Насправді про кнопки подання більше нічого додати. Контрольний елемент іноді зветься "простою кнопкою" не просто так.

Технічний підсумок

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

Сумісність із браузерами

Дивіться також

• <input> та інтерфейс HTMLInputElement, що його реалізовує.
• Форми та кнопки
• Форми HTML
• Елемент <button>
• Сумісність властивостей CSS