Кнопки

Кнопка — элемент, на который нажимают, чтобы что-то сделать: отправить форму, открыть окно, добавить товар в корзину. В HTML для этого есть тег <button>. Он работает с мышью, клавиатурой и программами чтения с экрана сразу, без дополнительного кода.

Тег button

Текст кнопки пишут между открывающим и закрывающим тегами:

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

Браузер нарисовал кнопку в стиле системы. Её можно нажать мышью или выбрать клавишей Tab и нажать Enter или пробел.

Типы кнопок

Атрибут type определяет, что кнопка делает внутри формы:

<form>
  <p><input name="name" value="Анна"></p>
  <button type="reset">Сбросить</button>
  <button type="button">Просто кнопка</button>
</form>

Измените имя и нажмите «Сбросить» — в поле вернётся «Анна». Кнопка reset пригождается редко: пользователи нажимают её случайно и теряют всё введённое.

Кнопка с иконкой

Внутрь <button> можно положить не только текст, но и другие строчные элементы — например, картинку:

<button type="button">
  <img src="/icons/languages/python.png" alt="" width="16" height="16">
  Скачать Python
</button>

У картинки пустой alt: смысл кнопки и так понятен из текста. Есть и старый способ сделать кнопку — <input type="submit" value="Отправить">, но в нём можно написать только текст.

Отключённая кнопка

Атрибут disabled выключает кнопку: она становится серой и не реагирует на нажатия:

<button disabled>Оформить заказ</button>
<p><small>Добавьте товары в корзину.</small></p>

Объясняйте рядом, почему кнопка недоступна, — иначе человек не поймёт, что делать.

Какая кнопка нажата

У кнопки отправки тоже бывают name и value. Так сервер узнает, какой из нескольких кнопок отправили форму:

<form action="/post" method="post">
  <p><textarea name="text" rows="2">Текст поста</textarea></p>
  <button name="action" value="draft">Сохранить черновик</button>
  <button name="action" value="publish">Опубликовать</button>
</form>

Нажатие второй кнопки отправит action=publish вместе с текстом.

Кнопка или ссылка

Ссылка <a> ведёт куда-то — на другую страницу или её часть. Кнопка <button> что-то делает на текущей странице. Внешне их можно сделать одинаковыми в CSS, но тег выбирают по действию: «Подробнее о тарифе» — ссылка, «Добавить в корзину» — кнопка.

Частая ошибка

Внутри <form> кнопка без type считается кнопкой submit. Кнопка «Показать пароль» или «Добавить ещё поле» внезапно отправляет форму:

<form>
  <input type="password" value="secret">
  <button>Показать пароль</button>          <!-- отправит форму -->
  <button type="button">Показать пароль</button> <!-- не отправит -->
</form>

Всем кнопкам в форме, кроме кнопки отправки, явно пишите type="button".