Товаров: 0 (0р.)

Ссылка как кнопка: Ссылка как кнопка | htmlbook.ru

Содержание

Как кнопку сделать ссылкой? | 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>

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 25.03.2020

Редакторы: Влад Мержевич

HTML кнопка, как ссылка и ссылка, как кнопка

Всем привет!
В сегодняшней статье я расскажу о нескольких способах, как из кнопки сделать ссылку и из ссылки сделать кнопку. То есть, чтобы кнопка была рабочая и при нажатии по ней осуществлялись какие-то действия, например, переход  на другую страницу, открытие формы обратной связи и т.д.  А так же, как сделать так, чтобы ссылка была похожа на кнопку.

Итак, приступим.

Внимание:
В коде я указываю «ВАША_ССЫЛКА_НА_СТРАНИЦУ» или «https://bloggood.ru/». Естественно, вам нужно заменить эти адреса своими.

HTML кнопка как ссылка

 1  способ:
В атрибут «action» поместите URL-адрес, на который должна вести «кнопка»:


<form action="ВАША_ССЫЛКА_НА_СТРАНИЦУ " method="GET">
<input ENGINE="submit" value="Кнопка" />
</form>

2 способ:
Также можно использовать HTML события:


<input value="Кнопка" type="button" />

3 способ:
Тоже взят из HTML события, только другим способом:

JS:


<script type="text/javascript">
function BlogGood()
{
location.href='https://bloggood.ru/';
}
</script>

HTML:


<input value="Кнопка" type="button" />

BlogGood() – это название функции вы можете назвать по своему.

HTML ссылка как кнопка

Теперь сделаем так, чтобы ссылка отображалась, как кнопка :coffe:.

1  способ:
Самое простое решение – это нарисовать кнопку и обхватить ее тегами ссылки <a>:


<a href=" ВАША_ССЫЛКА_НА_СТРАНИЦУ "><img src="knopka.jpeg"></a>

2 способ:

Можно использовать особое правило в CSS «-moz-appearance и -webkit-appearance» со значением «button» :

CSS:


a
{
-moz-appearance: button; /* Firefox */
-webkit-appearance: button; /* Chromium */
padding: .2em .75em;
text-decoration: none;
}

HTML:


<a href="https://bloggood.ru">ССЫЛКА на BLOGGOOD.RU</a>

3 способ:

Вы можете в CSS прописать свои стили для кнопки.
Выглядеть это будет вот так:

CSS:


.ssilka {
border:1px solid #ccc; // рамка
background:#eaeaea; //фон
padding: .2em .75em; //отступы внутри
text-decoration: none; //убрать подчеркивание ссылки
}

HTML:


<a href="https://bloggood.ru">ССЫЛКА на BLOGGOOD.RU</a>

Вроде, ничего не пропустил и ничего не напутал.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓


Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: css, html, javascript, Вебмастеру, для сайта

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

Оформлять ссылку как стандартную кнопку нежелательно: ссылка по определению указывает на ресурс, а нажатие кнопки обычно инициирует действие. Но если задача возникла, имеет смысл хотя бы решать её правильно.

Правильно

Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут

type="submit":

<form action="/example/">
    <button type="submit">Кнопка-ссылка</button>
</form>

«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/.

Если требуется открывать ссылку в новом окне или фрейме, можно, как и у обычных ссылок, использовать атрибут target элемента FORM:

<form action="/example/" target="_blank">

Демо

«Живая» демонстрация такой кнопки-ссылки:

Масштабирование Full HD в 4K без размытия

Строка запроса

Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар

name=value (имя=значение), разделённых символом &.

Если адрес, на который должна указывать ссылка, содержит строку запроса, следует для каждого GET-параметра добавить в форму скрытое поле с соответствующими атрибутами name и value:

<form action="/example/">
    <input type="hidden" name="foo"   value="bar" />
    <input type="hidden" name="lorem" value="ipsum" />
    <button type="submit">Кнопка-ссылка</button>

</form>

Данная форма ведёт на страницу /example/?foo=bar&lorem=ipsum.

Chromium/Blink и WebKit

В браузерах на основе движков Chromium / Blink (Chrome, Opera 15+, Яндекс.Браузер, Vivaldi) и WebKit (Safari) есть ошибка (1, 2): вопросительный знак, отделяющий строку запроса от основной части адреса, добавляется к адресу даже при отсутствии полей в форме. Поэтому, например, форма:

<form action="/example/">
    <button type="submit">Кнопка-ссылка</button>
</form>

приведёт на адрес /example/? вместо правильного /example/.

Обойти это можно с помощью автоматического серверного перенаправления (редиректа) с адреса, оканчивающегося вопросительным знаком, на такой же адрес без воспросительного знака.

Ограничения по сравнению с реальной ссылкой

  • У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
  • Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.

Неправильно

Кнопка внутри ссылки

Нередко элемент BUTTON просто помещают внутрь ссылки:

<a href="/example/"><button>Кнопка-ссылка</button></a>

Но согласно HTML5 такое решение синтаксически некорректно («невалидно»): ссылка не должна содержать интерактивные элементы. Кроме того, такая ссылка не работает в Internet Explorer (IE) ниже 9-й версии.

Кнопка с JS-обработчиком щелчка

Порой используется кнопка с JavaScript-обработчиком события щелчка:

<button>Кнопка-ссылка</button>

Но такая кнопка не работает при выключенном JavaScript, и возможны проблемы с индексацией поисковиками, не исполняющими JavaScript-код.

Нестандартные расширения CSS

Описанные ниже возможности нестандартные, и использовать их не рекомендуется.

Firefox и Chromium

Firefox и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) поддерживают нестандартные префиксированные варианты свойства appearance, значение button которых позволяет оформить как кнопку произвольный элемент, в том числе ссылку:

A.example {
       -moz-appearance: button; /* Firefox */
    -webkit-appearance: button; /* Chromium */
}

Демо

«Живая» демонстрация такой кнопки-ссылки:

Мелодичная инструментальная музыка

Internet Explorer, Edge и спецификация

В браузерах Microsoft — Internet Explorer (IE) и Edge — возможность недоступна. В спецификации CSS Basic User Interface Module Level 4 значение button свойства appearance не предусмотрено.

HTML » HTML кнопка, как ссылка и ссылка, как кнопка

Как из кнопки сделать ссылку и из ссылки сделать кнопку. То есть, чтобы кнопка была рабочая и при нажатии по ней осуществлялись какие-то действия, например, переход на другую страницу, открытие формы обратной связи и т.д. А так же, как сделать так, чтобы ссылка была похожа на кнопку.

Итак, приступим.

Внимание:
В коде я указываю «ВАША_ССЫЛКА_НА_СТРАНИЦУ» или «http://6vl.ru/». Естественно, вам нужно заменить эти адреса своими.

HTML кнопка как ссылка

1 способ:
В атрибут «action» поместите URL-адрес, на который должна вести «кнопка»:

1 2 3 <form action="http://6vl.ru/" method="GET"> <input type="submit" value="Кнопка" /> </form>

Этот вариант также является одним из методов создания кнопки в виде ссылки. Приведу элементарный пример кнопки созданной с помощью тега <form> и <input>:

<body> ... 
<form>
     <input type="button" value="Просто кнопка"/>     
     <input type="button" value="Ещё одна кнопка"/> 
</form>
 ... </body>

2 способ:

Также можно использовать HTML события:

1 <input value="Кнопка" type="button" onclick="location.href='http://6vl.ru/'" />

3 способ:
Тоже взят из HTML события, только другим способом:

JS:

1 2 3 4 5 6 <script type="text/javascript"> function Good() { location.href='http://6vl.ru/'; } </script>

HTML:

1 <input value="Кнопка" type="button" onclick="Good()" />

Good() – это название функции вы можете назвать по своему.

HTML ссылка как кнопка

Теперь сделаем так, чтобы ссылка отображалась, как кнопка .

1 способ:
Самое простое решение – это нарисовать кнопку и обхватить ее тегами ссылки <a>:

1 <a href="http://6vl.ru/"><img src="knopka.jpeg"></a>

2 способ:

Можно использовать особое правило в CSS «-moz-appearance и -webkit-appearance» со значением «button» :

CSS:

1 2 3 4 5 6 7 a { -moz-appearance: button; /* Firefox */ -webkit-appearance: button; /* Chromium */ padding: .2em .75em; text-decoration: none; }

HTML:

1 <a href="http://6vl.ru">ССЫЛКА на 6vl.ru</a>

3 способ:

Вы можете в CSS прописать свои стили для кнопки.
Выглядеть это будет вот так:

CSS:

1 2 3 4 5 6 .ssilka { border:1px solid #ccc; // рамка background:#eaeaea; //фон padding: .2em .75em; //отступы внутри text-decoration: none; //убрать подчеркивание ссылки }

HTML:

1 <a href="http://6vl.ru/" class="ssilka">ССЫЛКА на 6vl.ru</a>

Вроде, ничего не пропустил и ничего не напутал.

Взято с сайта — https_//bloggood_ru/vebmasteru/html-knopka-kak-ssylka-i-ssylka-kak-knopka.html/

Сделать ссылку HTML с оформлением кнопки CSS

На любом тематическом сайте неотъемлемой частью является ссылки, что нужно ее создать под различные функций и вывести ее в кнопку. Просто поставить это любой может, но если ее еще красиво по дизайн и стилистику сайта все оформить, это уже совершенно другая визуализация. Для создание ссылки есть форма добавление или визуальный редактор.

Но рассмотрим ее ближе, так сказать в ручной сборке, что изначально поймем под какую функцию она заточена, и что при улике будет выполнять. Это может быть как переход на другую страницу или совершенно другую площадку. И также она выполняет работу по скачиванию материалов, то есть архива с ним.

Как правильно вставить ссылку в HTML

И начнем с простой ссылки перехода, что работает на атрибуте и безусловно с указанием в ссылке адреса, куда будет осуществляться сам переход, где только срабатывает при нажатие клика.

Код

<a href=»//zornet.ru» >Как сделать ссылку на переход</a>

Здесь задействован атрибут href, что как раз будет задавать направление перехода для тега где также можно применить совершенно разные атрибуты.

1. download — что отвечает за указание на файл под скачивание файла, архива и другое.

2. name – тот самый якорь.

3. title — это когда наводит клик и появляется подсказка, что за ранее была прописана при установке.

4. accesskey — здесь происходит активация ссылки, что срабатывает при комбинации заданных клавиш.

5. coords – выставляет координаты, что прописаны в активной области.

6. hreflang – распознает язык текста по установленной ссылки.

7. rel — здесь идет соотношение между теми ссылками, что прописаны текущим документами.

8. rev — производится соотношение между текущим и куда будет ссылаться документ.

9 shape — отвечает за указание формы области ссылки на картину или изображение.

10. tabindex — Будет происходить указанная последовательность переключения между поставленными ссылками при клике на клавишу Tab.

11. target — показание окна, где будет сохранен скаченный файл при выборе.

12. type — тип или название документа, куда происходит переход.

Как сделать открытие ссылки в новой вкладке

Для того, что открылась при переходе новая страница и не терять страницу с которой перешли, то здесь ставим target и также с атрибутом _blank срабатывает.

Пример HTML-кода ссылки на открытие новой страницы.

Код

<a href=»http://zornet.ru» target=»_blank»>Здесь делаем клик на переход</a>

Есть такая тема перелинковка, что вы замечали в разных статьях, где под ссылку ставят ключевые слова, здесь устанавливаем.

Код

<a href=»ссылка» target=»_blank»>Ключевое слово</a>

Она же трастовая ссылка:

Код

<a href=»Ссылка» rel=»» target=»_blank»><u>Перейти на интернет ресурс ZorNet.Ru</u></a>


Некоторые ставят на демонстрацию материала, здесь можно вписать такой тип, с кнопкой, где возможно написано DEMO или ставится изображение, и по клику на его происходит переход.

Код

<a href=»ссылка» target=»_blank»><img src=»http://zornet.ru/CSS-ZORNET/gerav/refad/faren/demo.png» ></a>


Как сделать ссылку на скачивание файла, архива

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

Код

<a href=»http://zornet.ru/_ld/81/8168_Psatun.rar» target=»_blank» download=»»>Скачать </a>


Когда вы сделаете клик, то автоматически появится окно, где можете нажать обзор и выбрать папку, куда скачать и припарковать архив. Или просто выставить на «Сохранить файл» что автоматически на рабочий стол, начнет вкачиваться.

Как сделать из ссылки кнопку с эффектом

Безусловно самым лучшим оформлением под ссылку идет оформление кнопки, это задействуем CSS при создание.

Так будет идти HTML-код под ссылку:

Код

<div>
<a href=»http://zornet.ru» target=»_blank» >Открыть</a>
</div>


CSS

Код

.zornet_ru a {
  display:block;
  width:100px;
  margin:auto;
  padding: 9px 17px;
  background:#3d9c3e;
  color:#fff!important;
  text-decoration:none;
  font-size:17px;
  text-align: center;
  border: 2px solid #c5baba;
  border-radius: 34px;
}

.zornet_ru a:hover {
  color:#fff!important;
  text-decoration:none!important;
  background:#38cc3a;
}


Такая кнопка получится.

Это по умолчанию:

Здесь уже задаем палитру цвета в hover — где только срабатывает при наведение.

PS — здесь описаны различные ссылки с разноплановым функционалом, но с одним значением, которые из себя представляют простую вариацию на вариаций тега , что несут различные варианты, которые задаются под разноплановые задачи.

Как сделать html-ссылку похожей на кнопку?

много запоздалый ответ:

я боролся с этим время от времени, так как я впервые начал работать в ASP. Вот лучшее, что я придумал:

концепция: Я создаю пользовательский элемент управления с тегом. Затем в кнопку я помещаю событие onclick, которое устанавливает документ.расположение до нужного значения с помощью JavaScript.

Я вызвал элемент управления ButtonLink, так что я мог бы легко получить, если спутать с LinkButton.

aspx:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ButtonLink.ascx.vb" Inherits="controls_ButtonLink" %>

<asp:Button runat="server"/>

код:

Partial Class controls_ButtonLink
Inherits System.Web.UI.UserControl

Dim _url As String
Dim _confirm As String

Public Property NavigateUrl As String
    Get
        Return _url
    End Get
    Set(value As String)
        _url = value
        BuildJs()
    End Set
End Property
Public Property confirm As String
    Get
        Return _confirm
    End Get
    Set(value As String)
        _confirm = value
        BuildJs()
    End Set
End Property
Public Property Text As String
    Get
        Return button.Text
    End Get
    Set(value As String)
        button.Text = value
    End Set
End Property
Public Property enabled As Boolean
    Get
        Return button.Enabled
    End Get
    Set(value As Boolean)
        button.Enabled = value
    End Set
End Property
Public Property CssClass As String
    Get
        Return button.CssClass
    End Get
    Set(value As String)
        button.CssClass = value
    End Set
End Property

Sub BuildJs()
    ' This is a little kludgey in that if the user gives a url and a confirm message, we'll build the onclick string twice.
    ' But it's not that big a deal.
    If String.IsNullOrEmpty(_url) Then
        button.OnClientClick = Nothing
    ElseIf String.IsNullOrEmpty(_confirm) Then
        button.OnClientClick = String.Format("document.location='{0}';return false;", ResolveClientUrl(_url))
    Else
        button.OnClientClick = String.Format("if (confirm('{0}')) {{document.location='{1}';}} return false;", _confirm, ResolveClientUrl(_url))
    End If
End Sub
End Class

преимущества этой схемы: она выглядит как элемент управления. Вы пишете один тег для него,

результирующая кнопка является» реальной » HTML-кнопкой и поэтому выглядит как настоящая кнопка. Вам не нужно пытаться имитировать внешний вид кнопки с помощью CSS, а затем бороться с разными взглядами в разных браузерах.

пока способности ограничены, вы можете легко расширить его, добавив больше свойств. Вероятно, большинство свойств просто должны были бы «пройти через» к базовой кнопке, как я сделал для text, enabled и cssclass.

Если у кого-то есть более простое, чистое или иное лучшее решение, я был бы рад услышать это. Это боль, но это работает.

меняем цвет и фон, превращаем в кнопку, придаем интерактивность

От автора: интернет был основан на ссылках. Именно идея того, что мы можем кликать/нажимать на ссылки и переходить с одной веб-страницы на другую сделала фразу «серфить интернет» бытовой. Стилизация ссылок CSS помогает сделать их какими угодно. Хотя в HTML они отличаются от обычного текста даже без CSS.

Ссылки имеют синий цвет (просмотренные – фиолетовый). У них есть подчеркивание. В демо представлена самая простейшая ссылка.

Но что если мы хотим немного изменить ситуацию? Возможно, синий не подходит под дизайн вашего сайта. Может, вам не нравятся подчеркивания. Причина не важна – CSS позволяет стилизовать ссылки, как и любые другие элементы. Нам лишь нужно определить ссылку в стилях.

Хотите взять другой шрифт, сменить цвет, удалить подчеркивание и перевести все буквы в верхний регистр? Конечно, почему нет?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

a { color: red; text-decoration: none; text-transform: uppercase; }

a {

  color: red;

  text-decoration: none;

  text-transform: uppercase;

}

Уже намного лучше! Но зачем останавливаться? Давайте рассмотрим пару других способов стилизации ссылок для завершения UX.

Стилизация всех состояний ссылки

Ссылки обладают разными состояниями, они адаптируются при взаимодействии с ними на странице. При изменении стандартных стилей ссылки необходимо обратить внимание на 3 дополнительных состояния:

Hover (:hover): когда курсор расположен над ссылкой без клика

Visited (:visited): ссылка, по которой пользователь переходил ранее, но на которую сейчас не наведен курсор

Active (:active): ссылка в процессе нажатия. Состояние очень быстрое – когда кнопка нажата, но до завершения щелчка.

Ниже представлена ссылка из предыдущего демо. Сперва попробуйте навести курсор на нее без клика. Обратите внимание, под ссылкой появляется подчеркивание. Кликните на нее и зажмите – так вы увидите активное состояние ссылки, когда ее цвет становится черным. Отпустите кнопку мыши, и ссылка станет фиолетовой еще до ее посещения.

Концепция ссылки кажется простой, но там много чего происходит – и CSS дает нам невероятную мощь по настройке UX!

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

На эту тему ведутся споры, но мы можем с помощью CSS превратить текстовую ссылку в кнопку.

Как и с другими HTML элементами, CSS позволяет к ссылке добавить фон и padding, что делает ее похожей на кнопку. Вот наша ссылка с этими техниками:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

a { background-color: red; color: white; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; }

a {

  background-color: red;

  color: white;

  padding: 1em 1.5em;

  text-decoration: none;

  text-transform: uppercase;

}

Отлично! Давайте добавим нашей кнопке интерактивности и применим полученные в предыдущем разделе знания. При наведении курсора кнопка будет темно-серой, черной по клику и светло-серой после посещения:

a { background-color: red; color: white; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; } a:hover { background-color: #555; } a:active { background-color: black; } a:visited { background-color: #ccc; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

a {

  background-color: red;

  color: white;

  padding: 1em 1.5em;

  text-decoration: none;

  text-transform: uppercase;

}

 

a:hover {

  background-color: #555;

}

 

a:active {

  background-color: black;

}

 

a:visited {

  background-color: #ccc;

}

Стилизация ссылки под кнопку и работа с состояниями позволяет нам создавать прикольные эффекты. Например, давайте создадим эффект нажатия кнопки.

О, и курсоры!

Мы уже довольно далеко зашли в стилизации ссылок, и есть один компонент, который мы не можем игнорировать — курсор. Курсор показывает положение мыши на экране. Мы привыкли к обычной черной стрелке:

При наведении курсора мы можем заменить стрелку на руку (:hover) – так будет проще понять, что со ссылкой можно взаимодействовать:

a:hover { cursor: pointer; }

a:hover {

  cursor: pointer;

}

Так намного лучше! Мы получили красивую ссылку, которая похожа на кнопку с подходящими интерактивными подсказками.

Автор: Geoff Graham

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Как сделать кнопку ссылки

Оформлять ссылку как стандартную кнопку нежелательно: ссылка по определению указывает на ресурс , а нажимие кнопки обычно инициирует действие . Но если задача возникла, имеет смысл хотя бы решать её правильно .

Правильно

Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую формулу. В форме action следует использовать URL-адрес, на который должна вести «кнопка-ссылка».Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type = "submit" :



«Кнопка-ссылка» в примере ведёт на страницу с адресом / example / .

Если требуется открывать ссылку в новом окне или фрейме, можно, как и у обычных ссылок, использовать атрибут target element FORM :

target = "_ blank" >

Демо

«Живая» демонстрация такой кнопки-ссылки:

Масштабирование Full HD в 4K без размытия

Строка запроса

Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name = value ( имя = значение ), разделенных символом и .

. Имя и значение :

.





Данная форма ведёт на страницу / example /? Foo = bar & lorem = ipsum .

Chromium / Blink и WebKit

В браузерах на основе движков Chromium / Blink (Chrome, Opera 15+, Яндекс.Браузер, Vivaldi) и WebKit (Safari) есть ошибка (1, 2): вопросительный знак, отделяющий запрос запроса от основной части адреса, добавляется к адресу даже при отсутствии полей в форме. Поэтому, например, форма:



приведёт на адрес / example /? вместо правильного / example / .

Обойти это можно с помощью автоматического серверного перенаправления (редиректа) с адреса, оканчивающегося вопросительным знаком, на такой же адрес без воспросительного знака.

Ограничения по сравнению с реальной ссылкой

  • У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
  • Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.

Неправильно

Кнопка внутри ссылки

Передко элемент КНОПКА просто помещают внутрь ссылки:

Но согласно HTML5 такое решение синтаксически некорректно («невалидно»): ссылка должна не содержать интерактивные элементы.Кроме того, такая ссылка не работает в Internet Explorer (IE) ниже 9-й версии.

Кнопка с JS-обработчиком щелчка

Порой используется кнопка с JavaScript-обработчиком события щелчка:

Но такая кнопка не работает при выключенном JavaScript, и возможны проблемы с индексом поисковиками, не исполняющими JavaScript-кодами.

Нестандартные расширения CSS

Описанные ниже возможности нестандартные , и использовать их не рекомендуется .

Firefox и Chromium

Firefox и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) нестандартные префиксированные варианты свойства внешний вид , значение кнопка позволяет оформить как кнопку произвольный элемент, в том числе:

A. пример {
-моз-внешний вид: кнопка ; / * Firefox * /
-webkit-appearance: button ; / * Хром * /
}

Демо

«Живая» демонстрация такой кнопки-ссылки:

Мелодичная инструментальная музыка

Internet Explorer, Edge и спецификация

В браузерах Microsoft - Internet Explorer (IE) и Edge - возможность недоступна .В спецификации CSS модуль базового интерфейса пользователя Уровень 4 значение кнопка свойства внешний вид не предусмотрено .

.

- Веб-технологии для разработчиков

Описание

005 HTML-элемент

Спецификации

Совместимость с браузером

Элемент Хром Firefox (Gecko) Internet Explorer Opera Safari
Базовая опора 1.0 1.0 (1.7 или ранее) (Да) (Да) (Да)
formaction атрибут 9.0 4,0 (2,0) 10??
formenctype attribute 9,0 4,0 (2,0) 10 10,6?
метод формы атрибут 9,0 4,0 (2,0) 10??
автофокус атрибут 5.0 4,0 (2,0) 10 9,6 5,0
меню значение для типа атрибут Нет Нет [1] Нет Нет?
Элемент Android Мобильный Firefox (Gecko) IE мобильный Opera Mobile Мобильный Safari
Базовая опора (Да) 1.0 (1.0) (Да) (Да) (Да)
formaction атрибут? 4,0 (2,0)???
formenctype attribute? 4,0 (2,0)???
метод формы атрибут? 4.0 (2,0)???
меню значение для типа атрибут?????

[1] Gecko еще не поддерживает эту функцию. См. Баг 1241353.

Щелчок и фокус

Приводит ли нажатие кнопки , отправленные данные POST приведут к myButton = Щелкните меня вместо myButton = foo .
IE6 имеет еще худшую ошибку, когда отправка формы с помощью кнопки отправляет ВСЕ кнопки формы с той же ошибкой, что и IE7.
Эта ошибка исправлена ​​в IE8.

Firefox добавит для удобства пользователей небольшую пунктирную рамку на кнопке с фокусом. Эта граница объявляется через CSS в таблице стилей браузера, но вы можете переопределить ее, если необходимо добавить свой собственный сфокусированный стиль, используя кнопку :: - moz-focus-inner {}

Firefox, в отличие от других браузеров, по умолчанию сохраняет динамическое отключенное состояние