Из кнопки в HTML сделать ссылку: метод GET и редирект

Быстрый ответ

Для реализации перехода на другую страницу по нажатию на элемент input используйте следующий код:

<input type="button" value="Перейти" onclick="window.location='https://example.com'">

Этот код позволит переадресовать пользователя на указанный URL при нажатии на кнопку, для этого будет использован GET-запрос.

Применение Javascript для реализации переадресации

В быстром ответе рекомендовано использование Javascript для обеспечения функционала перенаправления. Этот подход особенно эффективен в ситуациях, когда:

• Нужно имитировать нажатие кнопки, отключив стандартную отправку формы.
• Важно обеспечить простую реализацию прямого GET-запроса.
• Не предполагается работа со сложными Javascript библиотеками или фреймворками.

Альтернативные способы создания кнопок со ссылками без использования Javascript

Если было принято решение избегать использования метода onclick и Javascript в целом, в HTML есть другие варианты:

• Замаскированная ссылка: Элемент <a>, стилизованный под кнопку с помощью CSS, сохраняет все функции гиперссылки.

  HTML

  Скопировать код

  <a href="https://example.com" class="button-like">Перейти</a>

  Запустить код

• Отправка через форму: Для отправки формы используйте <input type="submit"> внутри <form>, задав метод отправки "get".

  HTML

  Скопировать код

  <form action="https://example.com">
    <input type="submit" value="Перейти">
  </form>

  Запустить код

Передача параметров в GET-запросе

Непосредственно в URL вы можете добавить параметры для более детальной настройки функционала:

<input type="button" value="Поиск" onclick="location.href='https://example.com?query=searchTerm';">

Такой подход позволит отправить поисковый запрос как параметр.

Визуализация

Процесс действия кнопки, представленной в виде такси 🚖, выглядит следующим образом:

<input type="button" value="Посетить Бродвей" onclick="location.href='http://broadway.com';">

🚖 Нажмите 'Посетить Бродвей' -> Отправляется запрос на маршрут (HTTP GET) -> Переход на Бродвей (broadway.com)

Одно нажатие – и вас мгновенно перенаправляют в новое место, словно герой приключенческого фильма.

Управление сложными переадресациями с помощью метода onclick

Обработчик события onclick в Javascript – это удобный инструмент для управления переадресацией:

• Условная переадресация: Выполняйте проверку условий перед переходом, используя конструкцию if-else для обработки динамических данных.

  JS

  Скопировать код

  function redirectUser() {
    if (userHasPermissions) {
      location.href = 'https://example.com/private';
    } else {
      alert('Доступ запрещен!');
    }
  }

  Запустить код

• Добавление параметров запроса: Нажатие кнопки может передать данные из формы в URL, используя кодирование URI.

  JS

  Скопировать код

  function searchWithParams() {
    const searchTerm = document.getElementById('searchInput').value;
    location.href = `https://example.com?query=${encodeURIComponent(searchTerm)}`;
  }

  Запустить код

• Управление навигацией: Если форма не прошла проверку, запрещайте действие по умолчанию и указывайте пользователю на ошибки.

  JS

  Скопировать код

  document.getElementById('myButton').addEventListener('click', function(event) {
    if (formIsValid()) {
      location.href = 'https://example.com';
    } else {
      event.preventDefault();
      alert('Форма заполнена неверно.');
    }
  });

  Запустить код

SEO и UX: Синергия подходов

За каждой аккуратно выполненной кнопкой на самом деле скрываются некоторые правила SEO и UX:

• Основная навигация: Для обозначения основной навигации используйте тег <a>.
• Действия внутри приложения: В таком случае лучше использовать <button> или <input>.
• Понятность для пользователя: Цель действия кнопки должна быть понятной для пользователя.

Полезные материалы

1. Тег <a>: Якорь – HTML: HyperText Markup Language | MDN – детальное руководство MDN по использованию тега <a>.
2. Тег button – W3Schools – подробный обзор использования тега <button> от W3Schools.
3. Когда нужно использовать элемент Button | CSS-Tricks – объяснение от CSS-Tricks о правильном использовании кнопок.
4. Как сделать HTML-кнопку, которая будет действовать как ссылка? – Stack Overflow – обсуждение создания HTML кнопки-ссылки на Stack Overflow.
5. Тег <form>: Форма – HTML: HyperText Markup Language | MDN – всё, что нужно знать о формах от MDN.
6. Метод Event: preventDefault() – Web APIs | MDN – подробное руководство по использованию метода Event.preventDefault().
7. Стандарт HTML для элемента <button> – описание стандарта HTML для тега <button>.