Создание кнопок при помощи тега <button>
belarusweb.net
© Петр Романовский Минск, 2016-2018.



belarusweb.net
Основы создания сайтов...

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

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

Элемент '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' показано в примере 6.6.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<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>

Пример 6.6. Использование элемента 'button'

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

Видеоуроки по курсу HTML

Комментарии (0)

Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!