html.okpython.net
HTML и CSS для начинающих

HTML :: Создание кнопок при помощи тега <button>

Тег <button> и его атрибут type

Элемент «button», формирующийся парным тегом <button> (от англ. button – кнопка), используется для создания кнопок, тип которых определяется атрибутом type. В качестве значений атрибут может принимать следующие три:

  • "button" – создает обычную кнопку;
  • "reset" – создает кнопку сброса формы в первоначальное состояние;
  • "submit" – создает кнопку отправки данных формы на сервер.

По своему действию элемент «button» очень похож на элемент «input» с аналогичными значениями атрибута type, но при этом он не является пустым элементом и позволяет размещать внутри себя другие элементы, например, изображения, которые потом становятся одной активной кнопкой. А далее, используя стили CSS, можно изменять внешний вид кнопки по своему усмотрению.

Другие атрибуты тега <button>

Помимо атрибута type элемент «button» имеет еще ряд уже известных нам атрибутов: autofocus, disabled, form, formnovalidate, formaction, formenctype, formmethod, formtarget, name, value. Их можно посмотреть в нашем справочнике здесь.

Опять же, не стоит забывать, что собственные атрибуты кнопок переопределяют значения соответствующих атрибутов, если они указаны в элементе «form».

Использование элемента «button» показано в примере №1.

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="https://site.name/">
	<title>Элемент «button»</title>
</head>
<body>
	<form action="php/registration.php" method="POST" name="reg_form">
		
		<!-- Связываем текст с текстовым полем -->
		<label for="comment"> Оставить сообщение: </label> <br><br>
		
		<textarea id="comment" cols="40" rows="10" wrap="hard">
Запрещается употреблять нецензурные выражения.
		</textarea> <br><br> 
		
		<!-- Создаем кнопку отправки комментария на сервер -->
		<button type="submit" name="submit_button" disabled>
			Отправить на форум
		</button>
	
	</form>
</body>
</html>

Пример №1. Использование элемента «button»

Обратите внимание, что кнопка отправки неактивирована. Обычно это делается для того, чтобы кнопка не использовалась до тех пор, пока в поле не будет введен текст. После ввода минимального количества символов, которое устанавливается скриптами, кнопка активируется (опять же скриптами) и становится доступной для использования.

Быстрый переход к другим страницам

▲
▼