Кнопки отправки
Часть раздела JavaScript в действии путешествия по HTML на Coddy. Урок 7 из 27.
Кнопки Submit — это важные элементы в HTML-формах, которые позволяют пользователям отправлять данные form на сервер для обработки.
Создайте базовую HTML-форму с кнопкой submit:
<form id="myForm">
<input type="text" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>Атрибут type="submit" указывает, что при нажатии кнопка должна отправить форму.
Вы также можете использовать JavaScript для обработки отправки форм:
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // Prevents the default form submission
console.log('Form submitted!'); // This prints a message in the console
});Метод preventDefault() предотвращает отправку form традиционным способом, позволяя обработать submission с помощью JavaScript.
Задание
ЛегкоВаша задача:
- Добавьте кнопку Submit в форму с
type="submit" - Внутри обработчика события submit используйте переменную
message, чтобы задать текстовое содержимое "Submitted successfully"
Попробуйте сами
<!DOCTYPE html>
<html>
<head>
<title>Submit buttons</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="myForm">
<h2>Sign Up</h2>
<input type="text" id="email" placeholder="Enter your email">
<p id="emailMessage" class="message"></p>
</form>
<script src="script.js"></script>
</body>
</html>
В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела JavaScript в действии
1Интерактивность/компоненты UI
ВкладкиАккордеон (развертывание/свертывание)Модальное окно (открытие/закрытие)Выпадающий список3Уведомления и обратная связь
Всплывающее сообщениеБаннеры с возможностью закрытияИндикаторы загрузкиПотренируйтесь самостоятельно: Песочница Web