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

В этой статье мы рассмотрим вопрос HTML кнопок — как ее сделать и добавить на свой сайт. Приведем примеры и покажем все варианты.

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 уроков и советов