Делаем кнопку 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-кнопку в качестве ссылки. Я, честно, не знаю как такая ссылка будет передавать вес, но перенаправлять пользователей будет как надо.

Комментарии
  1. Ms опубликовал 1 Август 2011, 09:58 #

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

    | Ответить
  2. Кот Шрёдигнера опубликовал 2 Август 2011, 17:54 #

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

    | Ответить
  3. Admin опубликовал 18 Август 2011, 13:54 #

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

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

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

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

    | Ответить
  4. Алексей опубликовал 4 Июль 2015, 23:58 #

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

    | Ответить
  5. Dmitriy77 опубликовал 8 Февраль 2017, 00:51 #

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

    | Ответить
Имя
e-mail
Текст комментария: # ×


Комментарии
Облако тегов
Интересное