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.
<!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»
Обратите внимание, что кнопка отправки неактивирована. Обычно это делается для того, чтобы кнопка не использовалась до тех пор, пока в поле не будет введен текст. После ввода минимального количества символов, которое устанавливается скриптами, кнопка активируется (опять же скриптами) и становится доступной для использования.
Быстрый переход к другим страницам
- Ввод данных в форму в виде многострочного текста
- Создание кнопок при помощи тега <button>
- Создание раскрывающихся списков внутри форм
- Вернуться к оглавлению учебника