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

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

HTML-тег input предназначен для вывода разных полей и кнопок. Благодаря ему можно создавать элементы сайта, которые будут требовать от пользователя каких-то действий.

Но оказывается, созданная с помощью input, кнопка не предназначена для использования в качестве обычной ссылки. Но некоторые случаи требует от вебмастера использования html-тега input именно в качестве ссылки.

Оказывается исправить это вопиющие безобразием можно и к тому же не одним способом.


Самый надежный способ из всех – это использование чистого HTML без JS (Способ №1), так как ваш посетитель может использовать браузер с отключенным JavaScript или пользоваться каким-нибудь мобильным браузером, начисто лишенным понимания скриптов.

Способ №1 – чистый HTML

Выглядит это так:

See the Pen Делаем кнопку input ссылкой #1 by Ванька (@itshaman) on CodePen.

Этот способ открывает ссылку в этом же окне. Если добавит к form target="_blank" то откроется в новой

Способ №2 – с использованием JS

Работает это так:

See the Pen Untitled by Ванька (@itshaman) on CodePen.

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

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

Эти 2 нехитрые способа помогут использовать вам обычную HTML-кнопку в качестве ссылки. Я, честно, не знаю как такая ссылка будет передавать вес, но перенаправлять пользователей будет как надо.

Теги:

Комментарии

Граватар пользователя «Ms»
Ms, 1 августа 2011 г. 09:58 #

<form target=”_blank”> откроет в новом окне

Граватар пользователя «Кот Шрёдигнера»
Кот Шрёдигнера, 2 августа 2011 г. 17:54 #

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

Граватар пользователя «Зюзгин Иван»
Зюзгин Иван, 18 августа 2011 г. 13:54 #

Кот Шрёдигнера: Если такая кнопка в конце текста и ведёт на свой же блог, то зачем её открывать в новом окне?

Иногда нужно и не не свой блог.

Ms: <form target=”_blank”> откроет в новом окне

За это спасибо!

Граватар пользователя «Алексей»
Алексей, 4 июля 2015 г. 23:58 #

Есть такая вот кнопка добавления комментариев на сайте
<input type=“submit” class=“commSbmFl right” id=“addcBut” name=“submit” value=“Отправить комментарий” style=“opacity: 1;”>
Как сделать чтобы после того как пользователь написал комментарий,кликнул по кнопке, а произошло чудо. Своего рода обновилась страница и вернулась снова на якорь. Добавлял в код так, onClick=“window.open(‘http://ссылка#comment’)”
но ничего не происходит. Как правильно сделать?

Граватар пользователя «Dmitriy77»
Dmitriy77, 8 февраля 2017 г. 00:51 #

А как относятся поисковики к такому варианту ссылок, не будет ли от них санкций?
Я хочу таким образом защитить топлист со ссылками, от хитботов, там где то 30 ссылок, вот боюсь если я их сделаю все через input, поисковики ведь могут за это сайт под фильтр загнать или нет?




В качестве аватарки используется сервис - gravatar.com



IT-событие
Первая версия ElementaryOS 0.1
Первая версия ElementaryOS 0.1
Оглавление
  1. Способ №1 – чистый HTML
  2. Способ №2 – с использованием JS
  3. Комментарии