<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="">).
  • Всегда начинайте с кнопки.