<button>

Тег чтобы добавить на страницу кнопку.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"
        
          
          <button name="button">Нажми меня</button>
          <button name="button">Нажми меня</button>

        
        
          
        
      

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

Секция статьи "Как это понять"

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

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

Как пишется

Секция статьи "Как пишется"
        
          
          <form>  <button>...</button></form>
          <form>
  <button>...</button>
</form>

        
        
          
        
      

Атрибуты

Секция статьи "Атрибуты"

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

  • autofocus — делает так, чтобы при загрузке страницы кнопка уже была выбрана и подсвечена, так что её можно нажать с клавиатуры клавишей Enter.
  • 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-адрес после знака «?», например https://site.ru/doc/?name=Ivan&age=27 здесь пары «имя=значение» разделяются символом «&», а объём данных не может превышать 4 Кб. Если добавить этот атрибут в кнопку, он переопределит атрибут method у всей формы.
  • formnovalidate — булевый атрибут, работает как novalidate для тега <form>.
  • formtarget — показывает данные, которые ввёл пользователь. Где браузер откроет результат, зависит от ключевого слова:
    • _self: показывает данные в текущем окне. Это значение используется по умолчанию.
    • _blank: показывает данные в новом окне браузера — его используют чаще всего.
    • _parent: показывает данные внутри родительского элемента фрейма, а если такого нет, то загружает в текущем окне.
    • _top: отменяет все родительские фреймы и загружает страницу в полном окне браузера. Если родительских фреймов нет, то показывает данные в текущем окне.
  • name — уникальное имя кнопки. Передаётся вместе с данными, которые отправляет пользователь.
  • type — задаёт действие кнопки при нажатии:
    • submit: отправляет данные на сервер. Это также значение по умолчанию.
    • reset: удаляет введённые данные из формы.
    • button: просто кнопка. Действие для неё можно задать через скрипты.
  • value — задаёт исходное значение кнопки, которое отправляется на сервер вместе с данными пользователя.

Подсказки

Секция статьи "Подсказки"

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

        
          
          <form id="login">  <label>    Введите ваш email    <input type="email" placeholder="Ваш email">  </label></form><button type="submit" form="login">Отправить</button>
          <form id="login">
  <label>
    Введите ваш email
    <input type="email" placeholder="Ваш email">
  </label>
</form>
<button type="submit" form="login">Отправить</button>

        
        
          
        
      

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

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

На практике

Секция статьи "На практике"

Дока Дог советует

Секция статьи "Дока Дог советует"

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

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

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

Алёна Батицкая советует

Секция статьи "Алёна Батицкая советует"

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

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

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

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

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

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