<form method = "link" > или <a>? Какая разница?

I видел, что мы можем написать:

<form method="link" action="foo.html" >
<input type="submit" />
</form>

Чтобы создать "ссылку".

Но я знаю, что мы можем написать:

<a href="foo.html" ><input type="button" /></a>

Что будет делать то же самое.

Какая разница? Какова их совместимость с браузером?

Ответ 1

Эта страница, на которую вы ссылаетесь, неверна. Нет значения method="LINK". Это приведет к тому, что форма вернется к методу по умолчанию GET, который в любом случае эквивалентен элементу привязки с атрибутом href.

<form method="GET" action="foo.html">
    <input type="submit" />
</form>

Это то же, что и ваш пример, но действителен; и эквивалентно:

<a href="foo.html">

Вы должны использовать семантику, чтобы определить, каким способом реализовать вашу форму. Поскольку для заполнения пользователем полей формы нет, это не действительно форма, поэтому вам не нужно использовать <form> для получения эффекта.

Пример использования формы GET - это окно поиска:

<form action="/search">
    <input type="search" name="q" placeholder="Search" value="dog" />
    <button type="submit">Search</button>
</form>

Вышеприведенное позволяет посетителю вводить свой собственный поисковый запрос, тогда как этот элемент привязки не выполняет:

<a href="/search?q=dog">Search for "dog"</a>

Тем не менее, оба будут идти на одну страницу при отправке/нажатии (если пользователь не изменит текстовое поле в первом

В стороне, я использую следующий CSS, чтобы получить ссылки, которые выглядят как кнопки:

button,
.buttons a {
    cursor: pointer;
    font-size: 9.75pt;  /* maximum size in WebKit to get native look buttons without using zoom */
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.buttons a {
    margin: 2px;
    padding: 3px 6px 3px;
    border: 2px outset buttonface;
    background-color: buttonface;
    color: buttontext;
    text-align: center;
    text-decoration: none;
    -webkit-appearance: button;
}
button img,
.buttons a img {
    -webkit-user-drag: none;
    -ms-user-drag: none;
}
.buttons form {
    display: inline;
    display: inline-block;
}

Ответ 2

Второй случай не будет обрабатывать дополнительные входные аргументы внутри тега A. Он будет следовать за href только тогда, когда форма добавит все входы для запроса строки GET.

<form action='http://localhost/?' method='get'><input type="text" name="test"><input type="submit" value="GO"/></form>

<a href='http://localhost/?'><input type="text" name="test"><input type="submit" value="GO"/></a>

будет работать иначе

Ответ 3

Различия в функциональности.

В то время как да, они оба ведут себя как друг друга, все же есть некоторые причины использовать элементы для того, для чего они предназначены. По большей части вы теряете функциональность с помощью ссылки на кнопку; вы не можете щелкнуть правой кнопкой мыши и открыть в новой вкладке или окне, например.

Рассмотрим также семантику и спецификации: элемент кнопки (в зависимости от того, какой вариант вы используете; <input type="button"> или <button></button>) предназначен для использования формами.

Ответ 4

С помощью <a name="markname"></a> вы можете прокручивать позицию этого тега в представлении с помощью URL, например. http://example.com/index.html#markname. Я не думаю, что любая форма или ввод делают это. И я думаю, что для использования <input type="button" window.location.href='foo.html'/> необходимо активировать JavaScript. Кроме того, <form>s обычно вызывает разрыв строки, <a>s не делает.

Ответ 5

Все упомянутые методы достигают того же результата, за исключением случаев, когда они содержат несколько аргументов, например:

<input type="button" value="Cancel">
<input type="button" value="Submit">

Для справки я использую:

<form>
<INPUT TYPE='button' onClick="parent.location='location'">
</form>

Для ссылки на кнопку