TGViewer
<divelopers> <divelopers> @alexnozer_dev · 1.18K subscribers
Post #145 425
You don't know HTML: кнопки как ссылки

Для создания навигационных ссылок в HTML есть элемент <a>. Но можно ли создать ссылку, используя <button> без JavaScript? Можно! При помощи элемента <form>:

<form>
<button formaction="/">Главная</button>
<button formaction="/catalog">Каталог</button>
<button formaction="/about">О нас</button>
<button formaction="/delivery">Доставка</button>
</form>


Это работает, потому что кнопка по умолчанию имеет type="submit", что приводит к отправке родительской формы при нажатии. У кнопки указан атрибут formaction, который переопределяет значение action у родительской формы. У самой формы не указан атрибут method, значит по умолчанию используется get. В итоге при нажатии на кнопку будет отправлен get-запрос на соответствующий адрес, что приведёт к загрузке новой страницы.

Ещё можно вынести кнопки из формы при помощи атрибута form, который создаёт связь по id:

<form id="router"></form>

<button form="router" formaction="/">Главная</button>
<button form="router" formaction="/catalog">Каталог</button>
<button form="router" formaction="/about">О нас</button>
<button form="router" formaction="/delivery">Доставка</button>


Не ясно, правда, зачем это всё нужно, если есть <a>. Но просто знайте, что так можно. Иногда в коде можно найти кнопки с обработчиком click и вызовом window.location.href. Вот такие кнопки можно заменить на кнопки с формой, которые будут работать без JavaScrpt. Или это может сгодится для странных вопросов на собеседовании или каких-то ультра-редких случаев.

#ydkhtml
  • 👍 6
  • 🤔 4
More from @alexnozer_dev
  1. Sep 21, 2026Реализация пользовательских атрибутов Под конец прошлого года я рассказывал об API пользов…
  2. Sep 14, 2026Подклассы Event вместо CustomEvent Многие библиотеки предоставляют систему событий в качес…
  3. Sep 11, 2026Эволюция стилей в темах Shopify Адам Ватан на днях поделился новостью, что Shopify выкупил…
  4. Sep 9, 2026Persistent Widgets Многие сайты не должны быть SPA. Но иногда эта архитектура продиктована…
  5. Sep 7, 2026Processing Instructions и маркеры В DOM всё представлено в виде узлов (Node) разных типов.…
  6. Sep 1, 2026@scope и потоковая передача HTML Ноам Розенталь поделился интересной техникой, в которой с…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →