belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
HTML >>>

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

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

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

Помимо атрибута 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'

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

Контрольные вопросы и задания

  1. Как формируется элемент 'button'? В чем заключается его отличие от
    элемента 'input' с соответствующими значениями атрибута 'type'?

Словарь новых английских слов

form [ˈfɔːm] – форма, фигура.
action [ˈakʃ(ə)n] – действие, акция.
validate [ˈvalɪdeɪt] – подтверждать, проверять.
accept [əkˈsɛpt] – принимать.
input [ˈɪnpʊt] – вводить данные, ввод.
value [ˈvaljuː] – значение, ценность.
hidden [ˈhɪdn] – скрытый, спрятанный.
password [ˈpɑːswəːd] – пароль.
reset [riːˈsɛt] – возврат в начальное положение.
submit [səbˈmɪt] – представить на рассмотрение .
multiple [ˈmʌltɪp(ə)l] – множественный.
required [rɪˈkwʌɪəd] – обязательный.
read [riːd] – читать.
only [ˈəʊnli] – только.
length [leŋθ] – длина.
list [lɪst] – список, каталог.
check [tʃɛk] – проверять, проверка, птичка.
label [ˈleɪb(ə)l] – ярлык, бирка.
area [ˈeəriə] – район, область, зона.
row [raʊ] – ряд, последовательность.
hard [hɑːd] – твердо, крепко.
soft [sɔːft] – мягко, нежно.
select [sɪˈlɛkt] – выбирать, отбирать.
button [ˈbʌt(ə)n] – кнопка, пуговица.
group [ɡruːp] – группа, кучка.
option [ˈɒpʃ(ə)n] – предмет выбора.
field [fiːld] – площадка, участок, поле.
set [set] – устанавливать.
legend [ˈlɛdʒ(ə)nd] – легенда, надпись.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх