Как сделать кнопку типа ввода = действовать как гиперссылка и перенаправить с помощью запроса на получение?

Как сделать действие <input type=button> похожим на гиперссылку и перенаправление с помощью запроса GET?

Ответ 1

Существует несколько способов сделать это: сначала просто поместите его в форму, указывающую на то, куда вы хотите:

<form action="/my/link/location" method="get">
    <input type="submit" value="Go to my link location" 
         name="Submit" id="frm1_submit" />
</form>

Это имеет то преимущество, что работает даже без включенного javascript.

Во-вторых, используйте автономную кнопку с javascript:

<input type="submit" value="Go to my link location" 
    onclick="window.location='/my/link/location';" />

Однако это приведет к сбою в браузерах без JavaScript (обратите внимание: это эффективная действительно), вы должны использовать обработчики событий, а не встроенный код, подобный этому, - это самый простой способ иллюстрируя то, о чем я говорю.)

Третий вариант заключается в том, чтобы нарисовать фактическую ссылку как кнопку:

<style type="text/css">
.my_content_container a {
    border-bottom: 1px solid #777777;
    border-left: 1px solid #000000;
    border-right: 1px solid #333333;
    border-top: 1px solid #000000;
    color: #000000;
    display: block;
    height: 2.5em;
    padding: 0 1em;
    width: 5em;       
    text-decoration: none;       
}
// :hover and :active styles left as an exercise for the reader.
</style>

<div class="my_content_container">
    <a href="/my/link/location/">Go to my link location</a>
</div>

Это имеет то преимущество, что работающая везде и означает то, что вы, скорее всего, хотите, чтобы это означало.

Ответ 2

Вы можете сделать тег <button>, чтобы выполнить действие следующим образом:

<a href="http://www.google.com/">
   <button>Visit Google</button>
</a>

или

<a href="http://www.google.com/">
   <input type="button" value="Visit Google" />
</a>

Это просто и не требуется javascript!

Примечание:

Этот подход недействителен из структуры HTML. Но он работает во многих современных браузерах. См. Следующую ссылку:

Для <button>; и

Для <input type="button />

Ответ 3

    <script type="text/javascript">
<!-- 
function newPage(num) {
var url=new Array();
url[0]="http://www.htmlforums.com";
url[1]="http://www.codingforums.com.";
url[2]="http://www.w3schools.com";
url[3]="http://www.webmasterworld.com";
window.location=url[num];``
}
// -->
</script>
</head>
<body>
<form action="#">
<div id="container">
<input class="butts" type="button" value="htmlforums" onclick="newPage(0)"/>
<input class="butts" type="button" value="codingforums" onclick="newPage(1)"/>
<input class="butts" type="button" value="w3schools" onclick="newPage(2)"/>
<input class="butts" type="button" value="webmasterworld" onclick="newPage(3)"/>
</div>
</form>
</body>

Здесь другой способ, он проще другого.

<input id="inp" type="button" value="Home Page" onclick="location.href='AdminPage.jsp';" />

Это проще.

Ответ 4

Для тех, кто наткнулся на это из поиска (Google) и пытается перевести на .NET и MVC-код. (как в моем случае)

@using (Html.BeginForm("RemoveLostRolls", "Process", FormMethod.Get)) {
     <input type="submit" value="Process" />
}

Это покажет кнопку с надписью "Процесс" и приведет вас к "/Process/RemoveLostRolls". Без "FormMethod.Get" он работал, но рассматривался как "пост".

Ответ 5

Я думаю, что это ваша потребность.

a href="#" onclick="document.forms[0].submit();return false;"

Ответ 6

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

В подтверждение своего аргумента я представлю следующее.

Посмотрите, как на этом изображении отсутствует строка состояния внизу. Эта ссылка использует модель onclick="location.href". (Это реальный производственный пример от моего предшественника). Это может заставить пользователей колебаться, нажимая на ссылку, поскольку они не имеют ни малейшего представления, куда он их ведет.

Вы также усложняете поисковую оптимизацию IMO, а также усложняете отладку и чтение вашего кода /HTML. Кнопка отправки должна отправить форму. Почему вы (сообщество разработчиков) должны пытаться создать нестандартный интерфейс?