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

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

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

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

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

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

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

<form action="https://adminway.ru" method="post">
  <input type="submit" value="Перейти на AdminWay.Ru" />
</form>

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

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

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

<form>
  <input type="button" value="Перейти на AdminWay.Ru" onClick="window.location='https://adminway.ru'" />
</form>

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

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

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

<form>
 <input type="button" value="Перейти на AdminWay.Ru" onClick="window.open('https://adminway.ru')" />
</form>

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

Теги:

Комментарии

Ms, 01.08.2011 09:58 #

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

Кот Шрёдигнера, 02.08.2011 17:54 #

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

Зюзгин Иван, 18.08.2011 13:54 #

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

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

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

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

Алексей, 04.07.2015 23:58 #

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

Dmitriy77, 08.02.2017 00:51 #

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






Интересное
Важное событие IT
Создание Cisco
Создание Cisco
Узнать подробнее
Оглавление
  1. Способ №1 – чистый HTML
  2. Способ №2 – с использованием JS