Сделать кнопку как ссылку: Как кнопку сделать ссылкой? | WebReference

alexxlab

Как кнопку сделать ссылкой? | WebReference

Непосредственно кнопку нельзя сделать ссылкой, HTML запрещает комбинировать между собой элементы <button> (а также <input>) и <a>. Таким образом нельзя вкладывать кнопку в ссылку, а ссылку в кнопку. Есть три способа, как сделать так, чтобы при щелчке по кнопке происходило открытие веб-страницы.

Использование HTML

Кнопку <button> вкладываем внутрь элемента <form> и для формы указываем атрибут action с адресом веб-страницы (пример 1). Дополнительно можно добавить атрибут target со значением _blank, тогда веб-страница откроется в новой вкладке браузера.

Пример 1. Атрибут action

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Кнопка</title> </head> <body> <form action=»page/new.html» target=»_blank»> <button>Переход по ссылке</button> </form> </body> </html>

В этом примере при щелчке по кнопке открывается веб-страница new. html в новой вкладке.

Одну форму нельзя вкладывать внутрь другой. Перед добавлением кнопки убедитесь что у вас только одна форма.

Использование CSS

Раз кнопку нельзя сделать ссылкой, то вообще отказываемся от <button> и стилизуем ссылку, чтобы она стала похожа на кнопку. В примере 2 показан класс btn, при добавлении его к элементу <a> ссылка меняет своё оформление.

Пример 2. Стилизация ссылки

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Кнопка</title> <style> .btn { display: inline-block; /* Строчно-блочный элемент */ background: #8C959D; /* Серый цвет фона */ color: #fff; /* Белый цвет текста */ padding: 1rem 1.5rem; /* Поля вокруг текста */ text-decoration: none; /* Убираем подчёркивание */ border-radius: 3px; /* Скругляем уголки */ } </style> </head> <body> <a href=»page/new.html»>Переход по ссылке</a> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Стилизация ссылки

Использование JavaScript

Для перехода к указанной веб-странице можно воспользоваться событием onclick, добавляя его к элементу <button>. Внутри onclick пишем document.location, а в качестве значения адрес желаемой веб-страницы (пример 3). Обратите внимание на комбинацию кавычек, адрес веб-страницы берётся в одинарные кавычки.

Пример 3. Событие onclick

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Кнопка</title> </head> <body> <button>Переход по ссылке</button> </body> </html>

Ссылки Формы

См. также

  • <button>
  • <form>
  • Кнопки
  • Кнопки в Bootstrap 4
  • Отправка данных формы
  • Построение форм
  • Событие onclick
  • Сумасшедшие формы
  • Формы
  • Формы в Bootstrap 4

Как создать HTML кнопку, которая действует как ссылка

Есть много способов создания HTML кнопки, которая действует как ссылка, т.

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

Вы можете выбрать один из следующих методов добавления ссылки на HTML кнопку.

  1. к HTML <button> тегу внутри элемента HTML <form>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <button>Click Here</button>
  </body>
</html>

Попробуйте сами!

Этот пример может не работать, если кнопка находится внутри тега <form>.

  1. к <input> тегу внутри элемента HTML <form>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form>
      <input type="button" value="w3docs"/>
    </form>
  </body>
</html>

Попробуйте сами!

Ссылки не будут работать, если JavaScript не используется, а поисковая система может проигнорировать такие ссылки.

  1. атрибут action

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form action="https://www.w3docs.com/">
      <button type="submit">Click me</button>
    </form>
  </body>
</html>

Попробуйте сами!

Для того, чтобы открыть ссылку в новой вкладке, добавьте атрибут target=»_blank».

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form action="https://www.w3docs.com/" method="get" target="_blank">
      <button type="submit">Click me</button>
    </form>
  </body>
</html>

Попробуйте сами!

Так как нет форм и данных, этот пример семантически не будет иметь смысла. Но данная разметка допустима.

  1. б. атрибут HTML5 formaction.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form>
      <button type="submit" formaction="https://www.w3docs.com">Click me</button>
    </form>
  </body>
</html>

Попробуйте сами!

Атрибут formaction используется только для кнопок с type=”submit”. Так как этот атрибут является HTML5-specific, он может слабо поддерживаться в старых браузерах.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .button {
      background-color: #FF4500;
      border: none;
      color: white;
      padding: 20px 34px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 20px;
      margin: 4px 2px;
      cursor: pointer;
      }
    </style>
  </head>
  <body>
    <a href="https://www. w3docs.com/">Click Here</a>
  </body>
</html>

Попробуйте сами!

Так как требуется сложное стилевое оформление, этот метод может не работать в некоторых браузерах.

html — Как сделать в Bootstrap обычную ссылку в навигационных вкладках?

спросил

Изменено 11 месяцев назад

Просмотрено 157 тысяч раз

Я работаю в Bootstrap 2 (ранее Twitter) и хотел оформить кнопки так, как если бы они были обычными ссылками. Однако не только обычные ссылки; они идут в

    контейнер. Разметка будет выглядеть так:

     
    
  <дел>
    
    <дел>
      <ул>
        
    • 
        
    •
<дел>