Получить профессию в Skypro
Отправка формы с помощью обычной ссылки в HTML
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Чтобы отправить форму посредством ссылки при использовании JavaScript, вы можете воспользоваться следующим кодом:
<!-- Ссылка выглядит как кнопка отправки, интересное решение! -->
<a href="javascript:void(0);" id="form-submit-link">Отправьте форму</a>
<!-- Форма обретает статус скрытой -->
<form id="cunning-form">
<!-- все элементы формы -->
</form>
<script>
document.getElementById('form-submit-link').addEventListener('click', function() {
document.getElementById('cunning-form').submit();
});
</script>Не забудьте, что идентификаторы ссылки и формы ('form-submit-link' и 'cunning-form') требуется заменить на актуальные идентификаторы из вашего кода.
Настройка вида кнопки отправки формы в виде ссылки
Если вы хотите, чтобы кнопка отправки не могла выглядеть слишком формальной и напоминала обыкновенную ссылку, примените следующие CSS-стили:
.link-like-button {
background: none;
border: none;
color: blue;
text-decoration: underline;
cursor: pointer;
}
.link-like-button:hover,
.link-like-button:focus {
text-decoration: none;
}<form id="form-bruce-wayne">
<!-- все элементы формы -->
<input class="link-like-button" type="submit" value="Отправить форму">
</form>Представленный CSS-код превращает кнопку в обыкновенную ссылку.
Использование кнопок отправки формы с изображениями
<form id="picture-this">
<!-- все элементы формы -->
<input type="image" src="your-image.png" alt="Отправить форму" />
</form>В этом примере кнопка отправляет форму с использованием изображений, что можно сравнить с работой Бэт-сигнала, который оповещает о вызове функции submit() формы.
Применение функции отправки с использованием JavaScript EventListener
Вы можете добавить слушателя событий в JavaScript, чтобы получить больше контроля над отправкой формы:
document.querySelector('.link-in-disguise').addEventListener('click', function(e) {
e.preventDefault(); // Отменяем стандартное поведение ссылки
let form = this.closest('form'); // Запрашиваем ближайшую форму
if(form) {
form.submit(); // Отправляем форму
}
});Продвинутый контроль над формой с помощью AJAX
document.querySelector('.ajax-link').addEventListener('click', function(e){
e.preventDefault();
let formData = new FormData(document.querySelector('#ajax-form'));
fetch('/submit', {
method: 'POST',
body: formData
}).then(response => {
// Обработка ответа от сервера. Кто желает веселиться?
});
});В этом случае ссылка может быть сравнена с Бэтмобилем, оборудованным всеми возможными функциями, среди которых и AJAX.
Визуализация
Представьте себе, как ссылка управляет отправкой данных формы:
- Пользователь взаимодействует с веб-страницей, вводит информацию в поля формы, которые, подобно **пассажирам**, готовятся к отправке серверу — месту назначения.
- Нажимая стандартную кнопку "отправить", данные, как и **пассажиры автобуса**, отправляются к назначению.
- Однако, когда ссылка используется для отправки формы, данные похожи на **вертолёт**, который быстро и точно доставит их к месту назначения.Доступность по всей форме
В контексте обеспечения доступности используйте элемент <button>, стилизованный под ссылку:
<form>
<!-- элементы формы -->
<button type="submit" class="link-like-button">Отправить форму</button>
</form>Это позволяет инструментам для чтения с экрана лучше интерпретировать вашу страницу, обеспечивая доступность для каждого.
Полезные ресурсы
- <form>: The Form element – HTML: HyperText Markup Language | MDN — Гайд по элементам форм HTML.
- <a>: The Anchor element – HTML: HyperText Markup Language | MDN — Руководство по якорным элементам.
- submit event | jQuery API Documentation — Описание метода
.submit(). - Event: preventDefault() method – Web APIs | MDN — Как применять 'Event.preventDefault()'.
- What does "javascript:void(0)" mean? – Stack Overflow — Обсуждение использования
javascript:void(0)на Stack Overflow. - HTML Standard — Семантический стандарт текстовых элементов, включая
<a>. - JavaScript DOM EventListener — Инструкция по применению слушателей событий в JavaScript.