Кнопка создаётся двумя разными методами:
Использование <input>
Элемент <input> универсальный и в зависимости от значения атрибута type создаёт разные элементы формы: кнопки, переключатели, текстовые поля и др. Для кнопок зарезервировано три значения type, которые позволяют создать кнопки с разным функционалом:
- <input type="button"> — обычная кнопка;
- <input type="submit"> — кнопка для отправки формы на сервер;
- <input type="reset"> — кнопка для очистки формы.
Следует помнить, что все три варианта создают кнопки, по своему виду никак не различающиеся между собой. Разница лишь в их поведении.
Обычная кнопка
Такая кнопка применяется, как правило, в сочетании с JavaScript и при щелчке по кнопке выполняет заложенные в неё действия.
<input type="button" value="Переключить цвет" onclick="changeColor()">
Здесь используются следующие атрибуты:
- type="button" — создаёт кнопку;
- value — определяет надпись на кнопке;
- onclick — событие JavaScript, отвечающее за щелчок по кнопке.
В примере 1 при щелчке по кнопке вызывается пользовательская функция changeColor(), которая переключает цвет текста у класса .color с чёрного на красный и обратно.
Пример 1. Создание кнопки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопка</title>
<style>
.red { color: red; }
</style>
<script>
function changeColor() {
document.querySelector('.color').classList.toggle('red');
}
</script>
</head>
<body>
<p class="color">Пример текста.</p>
<p><input type="button" value="Переключить цвет" onclick="changeColor()"></p>
</body>
</html>
Если забыть добавить не обязательный атрибут value, то кнопка получится «пустой» без всяких надписей на ней.
Кнопка для отправки формы на сервер
Такая кнопка позволяет пользователю отправить заполненную форму на сервер. Для этого сперва создаётся форма через элемент <form>, внутри неё добавляется кнопка с атрибутом type и значением submit (пример 2).
Пример 2. Отправка формы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопка</title>
</head>
<body>
<form action="/example/handler.php">
<p><input name="name" required placeholder="Введите своё имя"></p>
<p><input type="submit"></p>
</form>
</body>
</html>
При щелчке по кнопке произойдёт отправка текста, введённого в поле, на адрес handler.php. После чего серверная программа вернёт HTML-файл.
Если атрибут value у кнопки не указан, то браузер сам подставит текст, например, Chrome напишет «Отправить», а Firefox — «Отправить запрос».
Кнопка для очистки формы
Такая кнопка при щелчке по ней возвращает все поля формы в их исходное значение. Обычно применяется для быстрой очистки формы от введённых пользователем данных (пример 3). Попробуйте написать в поле произвольный текст и щёлкнуть по кнопке сброса. После этого введённый в поле текст будет удалён.
Пример 3. Очистка формы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопка</title>
</head>
<body>
<form action="/example/handler.php">
<p><input name="name" required placeholder="Введите своё имя"></p>
<p><input type="submit"> <input type="reset"></p>
</form>
</body>
</html>
Для этой кнопки браузер так же подставляет текст самостоятельно, если атрибут value не указан. К примеру, Chrome напишет «Сбросить», а Firefox — «Сброс».
Использование <button>
С помощью <button> и его атрибута type схожим образом делаются кнопки разных типов: обычная, для отправки формы и для очистки формы. Однако, в отличие от <input>, внутрь <button> можно вставлять текст, изображения и другие элементы HTML (пример 4). Если ничего этого не добавить, то кнопка получится «пустой».
Пример 4. Виды кнопок
<button>Кнопка с текстом</button>
<button><img src="image/recipe.png" alt="Рецепты"></button>
<button><img src="image/france-flag.svg" alt="Флаг Франции"></button>
<button>H<sub>2</sub>O</button>
<button>►</button>
<button></button>
Размер кнопки подстраивается под её содержимое. Так, если внутрь <button> вставить картинку большого размера, то и кнопка станет больше.
Кнопка для отправки формы на сервер
По умолчанию <button> используется для отправки формы на сервер, поэтому атрибут type указывать не обязательно. Главное, поместить кнопку внутрь формы (пример 5). Если требуется обычная кнопка, то к <button> добавляется атрибут type со значением button.
Пример 5. Отправка формы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопка</title>
<style>
.correct { background-color: aquamarine;}
.wrong { background-color: coral; }
</style>
</head>
<body>
<form action="/example/handler.php">
<p><input name="name" class="field" required placeholder="Введите своё имя"></p>
<p><button>Отправить</button> <button type="button" class="btn">Проверить</button></p>
</form>
<script>
var field = document.querySelector('.field'); // Поле для ввода имени
var btn = document.querySelector('.btn'); // Кнопка для проверки
// Щелчок по кнопке
btn.addEventListener("click", function() {
// Если поле пустое
if (field.value == '') {
field.classList.remove('correct'); // Удаляем класс
field.classList.add('wrong'); // Добавляем класс
}
// Поле заполнено
else {
field.classList.remove('wrong'); // Удаляем класс
field.classList.add('correct'); // Добавляем класс
}
});
</script>
</body>
</html>
Здесь в форме встречается две кнопки — первая, без атрибута type, используется для отправки формы на сервер, а вторая, с type="button", обычная кнопка, которая проверяет, пустое текстовое поле или нет. Если поле пустое, к нему добавляется класс .wrong, меняющий цвет фона на коралловый.
Кнопка для очистки формы
Для создания кнопки сброса формы до исходных значений к элементу <button> добавляется атрибут type со значением reset. Чтобы кнопка работала правильно, её следует поместить внутрь формы (пример 6).
Пример 6. Очистка формы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопка</title>
</head>
<body>
<form action="/example/handler.php">
<p><input name="name" required placeholder="Введите своё имя"></p>
<p><button>Отправить</button> <button type="reset">Очистить</button></p>
</form>
</body>
</html>
Итоги
- Кнопка создаётся с помощью элемента <input> или элемента <button>.
- Внутрь <button> можно вставить текст, изображение, а также другие элементы HTML.
- Атрибут type со значением submit создаёт кнопку для отправки формы на сервер.
- Атрибут type со значением reset создаёт кнопку для очистки формы.
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 24.05.2023