Вы уже знаете, что форма отправляется по
нажатию на кнопку. Здесь, однако, есть нюансы.
Кнопка обязательно должна иметь атрибут type
в значении submit:
<form>
<input name="test1">
<input name="test2">
<input type="submit">
</form>
Форму также будет отправлять тег button
с атрибутом type в значении submit:
<form>
<input name="test1">
<input name="test2">
<button type="submit">btn</button>
</form>
Форму также будет отправлена, если в любом
из инпутов поставить фокус и нажать Enter.
Кнопки без отправки
Кнопка с атрибутом type в значении
button используется как элемент страницы
и отправлять форму не будет:
<form>
<input name="test1">
<input name="test2">
<input type="button">
</form>
Аналогичным образом будет работать тег button:
<form>
<input name="test1">
<input name="test2">
<button>btn</button>
</form>
Кнопки сброса
Кнопка с атрибутом type в значении
reset будет очищать заполненную форму:
<form>
<input name="test1">
<input name="test2">
<input type="reset">
<input type="submit">
</form>
Отправка формы через JavaScript
Можно принудительно отправить форму через JavaScript. Давайте посмотрим, как это делается. Пусть у нас есть форма и некоторая кнопка, по клику на которую мы хотим отправлять форму:
<form action="/handler/" method="POST">
<input name="test1">
<input name="test2">
</form>
<button>отправить</button>
Получим ссылки на наши элементы в переменные:
let form = document.querySelector('form');
let button = document.querySelector('button');
Повестим на кнопку обработчик клика:
button.addEventListener('click', function(event) {
});
По клику на кнопку выполним отправку формы
через метод submit:
button.addEventListener('click', function(event) {
form.submit();
});
Дана форма с тремя инпутами. Сделайте ссылку, по клику на которую будет происходить отправка этой формы.