Значение submit
Тип submit (от англ. «submit» ‒ «отправить») создаёт кнопку отправки данных формы. При активации данной кнопки происходит отправка всех данных формы на сервер.
Внешний вид
‒ кнопка отправки;
‒ фокус;
‒ наведение курсора;
‒ активация.
Примечание
- В форму может быть включено несколько кнопок отправки;
- Если кнопке отправки указать атрибут « name », то тогда она будет содержать пару « имя=значение », которая включается в отправляемые данные.
Поддержка браузерами
Спецификация
| Верс. | Раздел | |
|---|---|---|
| HTML | ||
| 2.0 | Submit Button: INPUT TYPE=SUBMIT | Перевод |
| 3.2 | INPUT text fields, radio buttons, check boxes, . | |
| 4.01 | 17.4.1 Control types created with INPUT submit buttons. DTD: Transitional Strict Frameset |
|
| 5.0 | 4.10.5.1.15 Submit Button state (type=submit) | |
| 5.1 | 4.10.5.1.18. Submit Button state (type=submit) | |
| XHTML | ||
| 1.0 | Extensible HyperText Markup Language DTD: Transitional Strict Frameset |
|
| 1.1 | Extensible HyperText Markup Language | |
Сопутствующие атрибуты
autofocus Автоматческая фокусировка на кнопке после полной загрузки страницы. disabled Блокировка кнопки отправки.
disabled=»disabled»
form Присоединение кнопки отправки к форме. formaction Задаёт URL-адреса обработчика формы. formenctype Устанавливает способ кодирования данных отправляемых на сервер. formmethod Определяет HTTP-метод передачи данных на сервер. formnovalidate Отменяет проверку данных формы перед отправкой на сервер. formtarget Указывает фрейм или окно в которое будет загружен ответ с сервера. name Присваивает имя кнопке отправки. (Создаёт пару « имя=значение ».) value Указывает текст кнопки отправки.
value=»Текст»
Создание кнопок
Элемент универсальный и в зависимости от значения атрибута type создаёт разные элементы формы: кнопки, переключатели, текстовые поля и др. Для кнопок зарезервировано три значения type , которые позволяют создать кнопки с разным функционалом:
Следует помнить, что все три варианта создают кнопки, по своему виду никак не различающиеся между собой. Разница лишь в их поведении.
Обычная кнопка
Такая кнопка применяется, как правило, в сочетании с JavaScript и при щелчке по кнопке выполняет заложенные в неё действия.
Здесь используются следующие атрибуты:
- type=»button» — создаёт кнопку;
- value — определяет надпись на кнопке;
- onclick — событие JavaScript, отвечающее за щелчок по кнопке.
В примере 1 при щелчке по кнопке вызывается пользовательская функция changeColor() , которая переключает цвет текста у класса .color с чёрного на красный и обратно.
Пример 1. Создание кнопки
Если забыть добавить не обязательный атрибут value , то кнопка получится «пустой» без всяких надписей на ней.
Кнопка для отправки формы на сервер
Такая кнопка позволяет пользователю отправить заполненную форму на сервер. Для этого сперва создаётся форма через элемент , внутри неё добавляется кнопка с атрибутом type и значением submit (пример 2).
Пример 2. Отправка формы
При щелчке по кнопке произойдёт отправка текста, введённого в поле, на адрес handler.php. После чего серверная программа вернёт HTML-файл.
Если атрибут value у кнопки не указан, то браузер сам подставит текст, например, Chrome напишет «Отправить», а Firefox — «Отправить запрос».
Кнопка для очистки формы
Такая кнопка при щелчке по ней возвращает все поля формы в их исходное значение. Обычно применяется для быстрой очистки формы от введённых пользователем данных (пример 3). Попробуйте написать в поле произвольный текст и щёлкнуть по кнопке сброса. После этого введённый в поле текст будет удалён.
Пример 3. Очистка формы
Для этой кнопки браузер так же подставляет текст самостоятельно, если атрибут value не указан. К примеру, Chrome напишет «Сбросить», а Firefox — «Сброс».
Использование
Пример 4. Виды кнопок
Размер кнопки подстраивается под её содержимое. Так, если внутрь вставить картинку большого размера, то и кнопка станет больше.
Кнопка для отправки формы на сервер
По умолчанию используется для отправки формы на сервер, поэтому атрибут type указывать не обязательно. Главное, поместить кнопку внутрь формы (пример 5). Если требуется обычная кнопка, то к добавляется атрибут type со значением button .
Пример 5. Отправка формы
Здесь в форме встречается две кнопки — первая, без атрибута type , используется для отправки формы на сервер, а вторая, с type=»button» , обычная кнопка, которая проверяет, пустое текстовое поле или нет. Если поле пустое, к нему добавляется класс .wrong, меняющий цвет фона на коралловый.
Кнопка для очистки формы
Для создания кнопки сброса формы до исходных значений к элементу добавляется атрибут type со значением reset . Чтобы кнопка работала правильно, её следует поместить внутрь формы (пример 6).
Пример 6. Очистка формы
Итоги
- Кнопка создаётся с помощью элемента или элемента .
- Внутрь можно вставить текст, изображение, а также другие элементы HTML.
- Атрибут type со значением submit создаёт кнопку для отправки формы на сервер.
- Атрибут type со значением reset создаёт кнопку для очистки формы.
Как сделать кнопку внутри input
Атрибут значения элементов elements’ value содержит строку DOMString , которая используется в качестве метки кнопки.
input type="button" value="Нажми на меня" />
Если вы не укажете value , вы получите пустую кнопку:
input type="button" />
Использование кнопок
Элементы не имеют поведения по умолчанию (их двоюродные братья, (en-US) и (en-US) используются для отправки и сброса форм соответственно). Чтобы кнопки делали что-либо, вы должны написать код JavaScript для выполнения работы.
Простая кнопка
Мы начнём с создания простой кнопки с обработчиком события click (en-US) , который запускает наш компьютер (ну, он переключает value кнопки и текстовое содержимое следующего абзаца):
form> input type="button" value="Запустить ПК" /> form> p>ПК выключен.p>
const button = document.querySelector("input"); const paragraph = document.querySelector("p"); button.addEventListener("click", updateButton); function updateButton() if (button.value === "Запустить ПК") button.value = "Выключить ПК"; paragraph.textContent = "ПК запущен!"; > else button.value = "Запустить ПК"; paragraph.textContent = "ПК выключен."; > >
Сценарий получает ссылку на объект HTMLInputElement (en-US), представляющий в DOM, сохраняя этот параметр в переменной button . Затем addEventListener() используется для установки функции, которая будет запускаться, когда на кнопке происходят события click (en-US) .
Добавление сочетаний клавиш на кнопки
Сочетания клавиш, также известные как клавиши доступа и их эквиваленты на клавиатуре, позволяют пользователю активировать кнопку с помощью клавиши или комбинации клавиш на клавиатуре. Чтобы добавить сочетание клавиш к кнопке — точно так же, как вы сделали бы с любым , для которого это имеет смысл, — вы используете глобальный атрибут accesskey .
В этом примере, s это специфичная клавиша доступа (ты должен нажать s плюс конкретные клавиши-модификаторы для вашей комбинации браузера и операционной системы; вы можете увидеть полный список на странице accesskey).
form> input type="button" value="Включить ПК" accesskey="s" /> form> p>ПК выключен.p>
const button = document.querySelector("input"); const paragraph = document.querySelector("p"); button.addEventListener("click", updateButton); function updateButton() if (button.value === "Включить ПК") button.value = "Выключить пк"; paragraph.textContent = "ПК включён!"; > else button.value = "Включить ПК"; paragraph.textContent = "ПК выключен."; > >
Примечание: Проблема с приведенным выше примером, конечно, заключается в том, что пользователь не будет знать, что такое ключ доступа! На реальном сайте вам пришлось бы предоставлять эту информацию таким образом, чтобы это не противоречило дизайну сайта (например, путем предоставления легкодоступной ссылки, которая указывает на информацию о том, что такое ключи доступа к сайту).
Выключенные / Включённые кнопки
Чтобы выключить кнопку необходимо просто добавить на неё глобальный атрибут disabled , вот так:
input type="button" value="Я выключена" disabled />
Вы можете включать и отключать кнопки во время выполнения, просто установив disabled вместо true или false . В этом примере наша кнопка изначально включена, но если вы нажмете ее, она будет отключена с помощью button.disabled = true . А setTimeout() затем функция используется для возврата кнопки обратно в ее включённое состояние через две секунды.
input type="button" value="Enabled" />
const button = document.querySelector("input"); button.addEventListener("click", disableButton); function disableButton() button.disabled = true; button.value = "Выключена"; window.setTimeout(function () button.disabled = false; button.value = "Включена"; >, 2000); >
Если атрибут disabled не указан, то кнопка наследует своё disabled состояние из своего родительского элемента. Это позволяет включать и отключать группы элементов одновременно, заключая их в контейнер, такой как элемет, и затем установить disabled на контейнер.
Приведенный ниже пример показывает это в действии. Это очень похоже на предыдущий пример, за исключением того, что атрибут disabled устанавливается в при нажатии первой кнопки — это приводит к отключению всех трех кнопок до истечения двухсекундного тайм-аута.
fieldset> legend>Button grouplegend> input type="button" value="Button 1" /> input type="button" value="Button 2" /> input type="button" value="Button 3" /> fieldset>
const button = document.querySelector("input"); const fieldset = document.querySelector("fieldset"); button.addEventListener("click", disableButton); function disableButton() fieldset.disabled = true; window.setTimeout(function () fieldset.disabled = false; >, 2000); >
Примечание: Firefox, в отличие от других браузеров, по умолчанию сохраняет динамическое отключенние состояния из одного при загрузке разных страниц. Используйте атрибут autocomplete для управления этой функцией.
Валидация
Кнопки не участвуют в проверке валидации; они не имеют реальной ценности для валидации.
Примеры
div class="toolbar"> input type="color" aria-label="select pen color" /> input type="range" min="2" max="50" value="30" aria-label="select pen size" />span class="output">30span> input type="button" value="Clear canvas" /> div> canvas class="myCanvas"> p>Добавьте подходящий фолбэк здесь.p> canvas>
body background: #ccc; margin: 0; overflow: hidden; > .toolbar background: #ccc; width: 150px; height: 75px; padding: 5px; > input[type="color"], input[type="button"] width: 90%; margin: 0 auto; display: block; > input[type="range"] width: 70%; > span position: relative; bottom: 5px; >
let canvas = document.querySelector(".myCanvas"); let width = (canvas.width = window.innerWidth); let height = (canvas.height = window.innerHeight - 85); let ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect(0, 0, width, height); let colorPicker = document.querySelector('input[type="color"]'); let sizePicker = document.querySelector('input[type="range"]'); let output = document.querySelector(".output"); let clearBtn = document.querySelector('input[type="button"]'); // covert degrees to radians function degToRad(degrees) return (degrees * Math.PI) / 180; > // update sizepicker output value sizePicker.oninput = function () output.textContent = sizePicker.value; >; // store mouse pointer coordinates, and whether the button is pressed let curX; let curY; let pressed = false; // update mouse pointer coordinates document.onmousemove = function (e) curX = window.Event ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); curY = window.Event ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); >; canvas.onmousedown = function () pressed = true; >; canvas.onmouseup = function () pressed = false; >; clearBtn.onclick = function () ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect(0, 0, width, height); >; function draw() if (pressed) ctx.fillStyle = colorPicker.value; ctx.beginPath(); ctx.arc( curX, curY - 85, sizePicker.value, degToRad(0), degToRad(360), false, ); ctx.fill(); > requestAnimationFrame(draw); > draw();
Спецификации
| Specification |
|---|
| HTML Standard # button-state-(type=button) |
Совместимость с браузерами
BCD tables only load in the browser
Как сделать кнопку внутри поля для поиска?
Разместить кнопку отправки формы внутри рамки для ввода текста.
Решение
Надо понимать, что напрямую добавить кнопку внутрь поля формы нельзя. Поэтому любые методы лишь имитируют этот эффект. Для создания подобной иллюзии следует убрать исходную рамку вокруг поля для поиска и добавить её к элементу, внутри которого располагается поле и кнопка. Данный метод лучше всего работает когда все размеры у нас имеют фиксированные значения. В примере 1 общая ширина формы задана как 300 пикселов, поле имеет ширину 274 пиксела, а кнопка — 20 пикселов. Ширина поля подобрана с учётом того, чтобы не возникало переносов в форме, это негативно скажется на общем виде.
Некоторых добавлений в код CSS потребуют браузеры Safari и Chrome. При получении фокуса поля формы подсвечиваются цветной рамкой, которая разрушает нашу иллюзию единого поля. Чтобы этого не возникало, в стиле поля для поиска добавим outline со значением none , это позволит заблокировать появление рамки в указанных браузерах. Вокруг поля поиска ( ) в любом случае останется тонкая рамка, её можно удалить с помощью специфического свойства -webkit-appearance опять же со значением none .
Пример 1. Форма поиска
HTML5 CSS 2.1 IE Cr Op Sa Fx
Форма для поиска Результат примера показан на рис. 1.
Рис. 1. Вид поля для поиска с кнопкой
Саму кнопку можно добавить по разному. Например, сделать её обычной кнопкой с надписью, через , или, как в примере выше, в виде кнопки с фоновым рисунком.