HTML кнопка: тег <button> и <input>. Примеры

HTML кнопка на сайте выглядит примерно следующим образом:

Создаются HTML кнопки на сайте с помощью нескольких способов. Разницы особо нету, если только в возможностях оформления стилей.

html тег <button>
html тег <input>
с помощью тега <a> и <img>

Рассмотрим каждый способ в отдельности

1. HTML тег <button>

Синтаксис тега <button>

<button [атрибуты"]>Текст кнопки<button>

У тега <button> отсутствуют обязательные атрибуты. При использовании кнопки без атрибутов она становится бесполезной в плане функционала. Поэтому обычно все же их используют. Давайте рассмотрим их

Атрибуты <button>

accesskey разрешает доступ к кнопке через горячие клавиши
autofocus автоматический фокус после загрузки страницы
disabled запрет на изменение элемента
form установить связь кнопки и формы html (это очень важный параметр)
formaction адрес формы
formenctype кодирование данных формы
formmethod метод пересылки данных для формы (смотри: методы GET и POST)
formnovalidate не проверять вводимые данные
formtarget результат отправки открыть в новом окне или фрейме
name имя кнопки
type тип кнопки (отправка или очистка формы)
value значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов
src можно задать картинку для кнопки
style можно задать список стилей

Примечание

Чтобы отправить данные формы на сервер через тег <button>, нужно чтобы он обязательно располагался внутри тегов <form>:

<form>
	<button>Текст кнопки</button>
</form>

Пример 1. Использование тега <button>

<html>
<body>
	<button>Текст кнопки</button>
	<button src="kartinka.jpg">Текст кнопки с картинкой</button>
</body>
</html>

Пример 2. Кнопка изменятся при наведении

<html>
<head>
<style>
	button.knopka {
	color: #fff; 
	background: #FFA500; 
	padding: 5px; 
	border-radius: 5px;
	border: 2px solid #FF8247;
	} 
	button.knopka:hover { 
	background: #FF6347; 
	}
</style>
</head>
<body>
	<button class="knopka">Текст кнопки</button>
</body>
</html>

Преобразуется в следующее:

2. Кнопка html через <input>

Синтаксис тега <input>

<form>
...
<input name="name_field" type="значение" [атрибуты]>
...
</form>

В поле type нужно задать атрибут button или submit:

<input name="name_field" type="[button|submit]" [атрибуты]>

Возможно, у Вас возникнет вопрос в разнице задания атрибута type. Ниже расписаны отличия:

submit - кнопка для отправки значений из формы (управление передается на адрес указанный в адрес, указанный в action атрбута формы)
reset - кнопка для очистки всей формы
button - кнопки для обработки каких-то действий при нажатии (не путать с submit!)

Рассматривать отдельный пример не вижу смысла, поскольку кнопка выглядит абсолютно так же как и в примере выше. Разница лишь в возможностях. Так, у button есть больше возможностей, чем у input. Не смотря на это, второй вариант используют гораздо чаще.

3. Кнопка html через <a>

Конечно, такую кнопку можно назвать условной, поскольку максимум, что мы можем сделать с ней, это обычную ссылку. И при этом это часто используется. Например, в интернет-магазинах делают кнопки "Добавить в корзину", "Купить"

Синтаксис следующий

<body>
...
<a href="URL"><img src="button.jpg"></a>
...
</body>

По сути мы используем обычная картинка через тег <img> обрамленная в ссылку тегом <a>. В данном случае мы не можем передавать данные с формы.

Более подробно про это можно почитать в статье

Как сделать кнопку на сайте ссылкой

← Перейти в каталог html уроков и советов