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

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

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

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

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

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

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


  1. Способ №1 – чистый HTML:
    <form action=“http://adminway.ru” method=“post”>
    <input type=“submit” value=“Перейти на AdminWay.Ru” />
    </form>

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

    Этот способ открывает ссылку в этом же окне. Как сделать, чтобы все открывалось в новой странице, я не знаю и поэтому привел Способ №2


  2. Способ №2 – с использованием JS:
    <form>
    <input type=“button” value=“Перейти на AdminWay.Ru” onClick=“window.location=‘http://adminway.ru’” />
    </form>

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

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

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

    <form>
    <input type=“button” value=“Перейти на AdminWay.Ru” onClick=“window.open(‘http://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. Алексей опубликовал комментарий 5 Июль 2015, 00:58 #

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

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