Что использовать для создания кнопки на сайте?

Question

[Никита Князев]

Всем привет! Кто может дать исчерпывающий ответ о том, когда использовать для создания кнопки на сайте теги <a>, <button> и <input type="submit">? Буду очень благодарен)

Comments

[Сергей delphinpro]

какие теги-то? =)

[Анатолий]

Сергей: Предполагаю, что a и button.

Answer 1

[Сергей Горячев]

Если я правильно понял вопрос) С кривым оформлением)))

a[href="*"] - используется для ссылок.
Тут думаю, пояснения особенно не нужны, ссылки и есть ссылки - либо на другие страницы, либо анкоры.
Иногда a[href="#"] используется для открытия модальных окон, но я не считаю это удобным.
Почти всегда вешаю открытие popup просто на div.

input[type="submit"] используется для форм, простых словарных кнопок.
<input type="submit" value="Отправить заявку">

button используется как расширение функционала самой кнопки, она может быть "сложная".
По умолчанию button имеет submit, поэтому его можно не прописывать.

<button>
  <img src="/images/icon.svg" title="Красная таблетка" alt="Иконка" />
  <span style="color: red;">Красный</span> <span style="color: blue;">Синий</span>
</button>

PS: Ответ не претендует на истину в последней инстанции, возможно я в чем-то и не прав.

Comments

[Сергей delphinpro]

Почти всегда вешаю открытие попапа просто на div.

Див - не кнопка. Но допустимо в принципе. Главное не забыть прописать ему role="button"

[Сергей Горячев]

Сергей: Да, спасибо, про роли забыл уточнить. Доступность мать её)

Answer 2

[Владимир Мирка]

<input type="submit">
Используется только с формами. При нажатии на кнопку, форма будет отправлена по описанному для нее назначению.

<a>
Это просто ссылка

<button>
А это просто кнопка. Пустая. Ничего не делает сама по себе.

А теперь:

<input type="submit">
<a type="submit">
<button type="submit">

Все их можем "пихать" в форму.
Сами по себе input и a и button ничто. Все дело в атрибутах. Надеюсь, разницу я понятно объяснил.

Подытоживая, кнопку, как правило создают при помощи
<input type="submit">
но ничто не мешает нам поставить ссылку или button и добавить им такой же атрибут type="submit" - и все будет работать аналогично.