skip to main content

<button>

html

Кратко 🔗

<button> создаёт кликабельную кнопку.

Пример 🔗

<button name="button">Нажми меня</button>

Как это понять 🔗

С помощью CSS можно настроить внешний вид кнопки <button> и текста на ней: шрифт, размер, цвет фона и другие параметры. А если ничего не менять, то <button> будет выглядеть, как стандартная браузерная кнопка.

На кнопку можно поместить любой HTML-элемент.

Как пишется 🔗

<form>
<button>...</button>
</form>

Атрибуты 🔗

К тегу <button> можно применить любой универсальный атрибут, а также специфические атрибуты кнопок:

  • autofocus — делает так, чтобы при загрузке страницы кнопка уже была выбрана и подсвечена, так что её можно нажать с клавиатуры клавишей Enter.
    🤔 В Firefox эта штука называется autoсomplete
  • disabled — делает кнопку неактивной: нажать на неё нельзя, по дефолту отображается серым цветом.
  • form — связывает кнопку с любой формой в документе через id. Если id не указан, то с предшествующей формой.
  • formaction — задаёт URL-адрес, на который отправляются данные после нажатия на кнопку.
  • formenctype — определяет формат файла, который пользователь может отправить при нажатии на кнопку. У него есть три значения:
  • application/x-www-form-urlencoded: стандартное значение, вместо пробелов ставится +, а символы, вроде русских букв, кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя 🤡);
  • multipart/form-data — используется, чтобы отправлять файлы, данные при этом не кодируются;
  • text/plain — буквы и другие символы не кодируются, вместо пробелов появляется +.
  • formmethod — сообщает браузеру, каким HTTP-методом нужно передавать данные на сервер. Есть два метода:
  • post — упаковывает данные формы в тело сообщения и передаёт их на сервер, объём данных зависит от настроек сервера;
  • get — добавляет данные из формы прямо в URL-адрес после знака «?», например http://site.ru/doc/?name=Ivan&password=1234; здесь пары «имя=значение» разделяются символом «&», а объём данных не может превышать 4 Кб.
    Если добавить этот атрибут в кнопку, он переопределит атрибут method у всей формы.
  • formnovalidate — добавь этот атрибут, чтобы браузер не проверял корректность URL или email, который пользователь отправляет через форму.
  • formtarget — показывает данные, которые ввёл пользователь. Где браузер откроет результат, зависит от ключевого слова:
  • _self: показывает данные в текущем окне. Это значение используется по умолчанию.
  • _blank: показывает данные в новом окне браузера — его используют чаще всего.
  • _parent: показывает данные внутри родительского элемента фрейма, а если такого нет, то загружает в текущем окне.
  • _top: отменяет все родительские фреймы и загружает страницу в полном окне браузера. Если родительских фреймов нет, то показывает данные в текущем окне.
  • name — уникальное имя кнопки. Передаётся вместе с данными, которые отправляет пользователь.
  • type — задаёт действие кнопки при нажатии:
  • submit: отправляет данные на сервер. Это также значение по умолчанию.
  • reset: удаляет введённые данные из формы.
  • button: просто кнопка. Действие для неё можно задать через скрипты.
  • menu: открывает попап-меню, которое задано тегом <menu>.
  • value — задаёт исходное значение кнопки, которое отправляется на сервер вместе с данными, которые отправляет пользователь.

Подсказки 🔗

💡 Если хочется, чтобы пользователь отправил данные вам на сервер по нажатию кнопки, то <button> обязательно должен быть внутри контейнера <form>.

💡 Тег <input> с атрибутом type="button | reset | submit" тоже создаёт кнопку, но <button> проще стилизовать, так как внутрь <button> можно добавить любой HTML-контент, например, <em>, <strong> или <img>

💡 Если создаешь кнопку, которая не отправляет ничего на сервер, убедись, что задан атрибут type, иначе может вылезти ошибка.

В работе 🔗

Алёна,

🛠 При выборе между кнопкой и ссылкой нужно смотреть исключительно на семантику, а не на внешний вид элемента в дизайне и уж точно не на простоту вёрстки.

В первую очередь вы должны понять за что отвечает элемент: за перенаправление на другую страницу, раздел сайта, ресурс или выполняет какие-то действия на самой странице — примером служит отправка данных формы.

🛠 Если мы по клику на элемент открываем новое окно или перенаправляем пользователя на другую страницу — выбираем тег a, ссылку.

Если мы никуда пользователя не отправляем, а, например, открываем диалоговое окно или листаем слайдер, то это кнопки.

Вадим Макеев в своём докладе "Жми сюда!" сформулировал следующий способ выбора между кнопкой и ссылкой:

  • В любой ситуации, где вам нужно выбирать кнопка это или ссылка, выберите кнопку (<button>).
  • Если вы можете дать какой-то адрес для перенаправления — тогда это ссылка (<a href="">).
  • Всегда начинайте с кнопки.

Владимир 👨‍🔧

🛠 Но есть и другое мнение. Я вот использую <button> крайне редко. Допустим, вам нужно отправить данные формы на сервер. Если нужна обычная квадратная кнопка с надписью «Отправить», то я ставлю <input type="submit" value="Отправить">, потому что <input> проще верстать 🤷‍♂️

Единственный случай, когда я использую <button> — это когда нужно отправить данные из формы на сервер, но кнопка нужна посложнее: с картинкой, заливкой или особым шрифтом, например. В обычный <input> картинку не вставить. А с тегом <a> не хочется извращаться, потому что он по умолчанию не отправляет данные формы.

🛠 Если вам нужна кнопка вне формы для отправки данных, то проще использовать тег <a>, то есть обычную ссылку. В href я прописываю #, чтобы кнопка никуда не вела, если не надо. Потом навешиваю на неё всякие события: допустим, атрибут, который вызывает всплывающее окно. Тег <a> намного проще использовать, чем <button>, в нём больше возможностей по умолчанию, чтобы накидать внутрь каких-нибудь значений и условий, например, сделать не простую кнопку, с тремя картинками в определённой последовательности. У <button> больше ограничений.


Автор: Макс 👨‍🔧