Html button onclick ссылка – Как сделать кнопку ссылкой

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

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

Правильно

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

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

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

Демо

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

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

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

Если адрес, на который должна указывать ссылка, содержит строку запроса, следует для каждого 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>

Данная форма ведёт на страницу

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 не предусмотрено.

tanalin.com

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

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

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

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

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

webref.ru

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

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

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

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

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

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

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

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

2 способ:

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

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

JS:

HTML:

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

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

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

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

2 способ:

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

CSS:

HTML:

3 способ:

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

CSS:

HTML:

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

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

www.6vl.ru

HTML | Правильный onClick

HTML | Правильный onClick

 onСlick – это событие № 1 на экране пользователя.
onСlick – это клик (или щелчок) пользователя по объекту.
После каждого такого onclick-а пользователя, должно происходить ответное действие на экране. Так достигается интерактивность интерфейса и подтверждается главный принцип общения компьютера с человеком – клик, ответ, клик, ответ.
На пользовательском жаргоне, событие onСlick может назваться как угодно. Как только рядовые пользователи не называют этот бедный onСlick – клацнуть, дёрнуть, кликнуть, щёлкнуть, бацнуть и т.д. … Но, суть от этого не меняется годами – если пользователь проявил активность на экране и кликнул по объекту, то – компьютер должен ему (пользователю) адекватно ответить. Это и есть onСlick.

onclick в HTML

Событие onСlick в любом языке имеет первостепенное значение. И, HTML сему не исключение. Оно и вестимо. Действительно, уж если после клика (onСlick) по элементу в браузере ничего не происходит – зачем тогда вообще, что-либо программировать на сайте? Так что, onСlick – желанный гость на любом интернет-экране (или экранчике).
Теперь, ближе к теме. Если говорить более конкретно, то наш onСlick по страничке сайта, в браузере – это событие из Ява-скрипт, для которого HTML служит всего лишь каркасом размещения кода его конструкций. И, с точки зрения валидности кода этого самого HTML – правильно будет писать onclick, а не onСlick (как привыкли многие прикладные программисты). Потому что, в HTML все теги и конструкции пишутся только в нижнем регистре.

Нет верхнего регистра в HTML. Нет, и всё тут!!! А тем «злыдням», которые пишут в HTML в верхнем регистре, в старые добрые времена было принято рубить руки по самые колени. Более того. Говорят, что при батюшке-царе Иоанне Грозном, за запись в HTML, вида <DIV></DIV> или <SPAN></SPAN> можно легко было угодить, если не на кол, так на виселицу. Это абсолютно точно. Щас, конечно – царедворцы и правители пошли поспокойнее. Тем не менее, при написании любого кода нужно соблюдать, хотя-бы видимость приличия. С этого места и начинается повествование о правильном онклике.

Итак, решено и доказано (для HTML).
Первым делом, пишем onclick, а не onСlick !!!

Далее, код стандартного способа вызова события onclick Ява-скрипт в HTML имеет вид:

<a title=»МЕНЮ №1″ href=»javascript://»>МЕНЮ №1</a>
или
<button title=»МЕНЮ №1″>МЕНЮ №1</button>

Что означают сии бредовые строчки, мы будем разбираться несколько позже, а пока…
– Принципиально, событие onclick из Ява-скрипт в HTML можно навесить на любой элемент кода HTML-страницы, будь то <div>, <p> или <ol>. Браузер всё «сожрёт», и всё будет работать. Вот только, доступ к элементу с клавиатуры возможен исключительно для ссылко- или кнопко- объекта. И, если предположить на мгновение, что у пользователя нет мыши и он работает исключительно с клавиатуры, то всё к чему он сможет соприкоснуться на сайте – это будут только кнопки или ссылки. Третьего не дано! Поэтому, «навешивать» событие onclick на объекты, недоступные с клавиатуры – просто некрасиво. Ну, не по-человечески, как-то это. Из сего выплывает второе правило для onclick в HTML – это событие нужно подключать только к ссылке (тег «а») или к кнопке (тег «button»). В противном случае, код работать всё-таки будет, но в аду, для таких программистов – заготовлена отдельная большая сковорода.
Поскольку, (в HTML) форматирование и работа с кнопками («батонами») вызывает определённые трудности, то единственным, универсальным и оптимальным вариантом остаётся только ссылка (тег «а»). Но, и с этим тегом – не всё так гладко. Теперь, возвращаемся к разбору с нашей строчкой кода:

<a title=»МЕНЮ №1″ href=»javascript://»>МЕНЮ №1</a>

Выбрасываем из обсуждения тайтл ссылки, как совершенно очевидную вещь. Остаётся,
<a href=»javascript://»>МЕНЮ №1</a>
Вся дальнейшая писчая лабуда будет связанна с темой блокировки атрибута href, который нужно правильно «парализовать», чтобы ссылка перестала быть рабочей ссылкой, но тем не менее – выполняла функции onclick.

return false;

return false; – это прямая блокировка атрибута href. Если у пользователя в браузере разрешён Ява-скрипт, то будет выполнен вызов события onclick из соответствующего скрипта, а не переход по ссылке. Т.е., чтобы при клике по «ссылке вызова» не было сразу перехода по адресу из href, в onclick добавляется событие return false; и предполагается, что сначала исполнится функция, которая отменит переход по ссылке, если javascript включен. Таким образом, содержание атрибута href не имеет никакого значения, поскольку оно игнорируется при выполнении ява-скрипта.

Но вот вопрос. А что будет, если у пользователя в его браузере запрещён (выключен) Ява-скрипт? Как тогда поведёт себя наша ссылочка? Не буду интриговать, а сразу выложу возможные варианты развития событий – возможные значения атрибута href и соответствующего поведения браузера после клика по такой ссылке при выключенном Ява-скрипт.
Конечно, если javascript выключен в браузере у пользователя – так это одна беда и неурядица. Если выполнение Ява-скриптов выключено (запрещено) в браузере у пользователя, то тогда начинаются сплошные проблемы с атрибутом href, поскольку тег «а», это – всё-таки ссылка и браузер будет пытаться осуществить по ней переход.

Совсем выкинуть атрибут href из состава ссылки нельзя. Без атрибута href в тексте ссылке обойтись никак не возможно и любой валидатор сразу обидится за такое надругательство над её пряным и нежным телом. Значит, тогда остаётся один единственный вариант – наполнить атрибут href удобоваримым содержимым. Тут возможно следующее: оставить href совершенно пустым, заполнить его знаком диеза «#» или выражением javascript://. При выключенном (или заглюканном) Ява-скрипт, после клика по таким ссылкам будет происходить следующее:

<a href=»»>Проба</a>

Атрибут href пустой. После клика по такой ссылке, будет просто перезагружена страница в браузере.

<a href=»#»>Проба</a>

Атрибут href имеет значение «#». После клика по такой ссылке, пользователя выбросит в начало страницы, без её перезагрузки.

<a href=»javascript://»>Проба</a>

Атрибут href имеет значение «javascript://». После клика по такой ссылке, ничего не произойдёт. href=»javascript://» – клик по ссылке будет просто проигнорирован браузером. Значение «javascript://» для атрибута href – это и есть стандартная «заглушка» для блокировки ссылки при выключенном Ява-скрипте.

href=»javascript://» – туфта!

Почему туфта? Потому что, интернет-жизнь в мире поисковых систем вносит свои коррективы. С точки зрения правильной и семантической! вёрстки, абсолютно логичным будет записать в атрибут href реальную ссылку и добавить реальный тайтл для этой ссылки. Тогда, после клика по такой ссылке произойдёт одно из двух: либо, будет выполнено событие onclick из соответствующего Ява-скрипта, либо состоится переход по реальной ссылке на реальную страницу, (если Ява-скрипт отключён или заглюкал/недогрузился).

Таким образом, подведём итоги. В ссылке вызова события Ява-скрипт, в href помещаем реальную ссылку на реальную страницу для перехода при выключенном javascript, а в onclick – функцию, вызывающую запрос выполнения скрипта при включённом Ява-скрипт.

Иными словами, в «href» должна находиться совершенно нормальная и рабочая ссылка на любую веб-страницу, куда будет перенаправлен пользователь при клике по «ссылке вызова события» при выключенном Ява-скрипт, и которая будет игнорироваться скриптом при включенном Ява-скрипт. Вот и всё …

Ну, и под конец –

Проверка браузера на включение/выключение Ява-скрипт

Стандартный код такой проверки выглядит так:
<noscript><span class=”predupregdenie”>У Вас отключён javascript…</span></noscript>
Где, для <span class=”predupregdenie”> можно прописать в CSS любые стили, кроме display:none; и ему подобных стилей … Браузер ОБЯЗАТЕЛЬНО!!! выведет это сообщение на экран, в случае отключения пользователем Ява-скрипта в своём браузере. Таким нехитрым способом, Web-мастера часто пишут: «Включите, пожалуйста, javascript», либо выводят какие-то красивые картинки с аналогичной просьбой, либо ещё что-нибудь… Внутри тега noscript можно помещать любые HTML-теги. И, это – вовсе не лишняя предосторожность. Несмотря на то, что сейчас не так просто найти сайт, который бы вообще не использовал javascript.

Кто не с нами, тот против нас
Проблему с выключенным в браузере Ява-скрипт можно, вообще – решить радикально и кардинально. Например, добавить внутрь секции <head> код HTML5, вида:

<noscript>
<meta http-equiv=»Refresh» content=»0; http://mysite.ru/» />
</noscript>
где, http://mysite.ru/ – это веб-страница, куда сразу перенаправляется
пользователь при выключенном в браузере Ява-скрипт.

tehnopost.info

Делаем кнопку input ссылкой

<a href="https://www.google.com/"><button>Next</button></a>

<a href="myOtherFile"><button>Next</button></a>

http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

http://localhost:0000/public/html/secondary.html