15

次のように記述できることがわかりました。

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

「リンクボタン」を作る。

しかし、次のように記述できることはわかっています。

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

これは同じことをします。

違いは何ですか？ブラウザの互換性は？

4

5 に答える 5

23

リンク先のページが間違っています。HTMLlinkには属性の値がありません。methodこれにより、フォームは method 属性のデフォルト値にフォールバックします。これはいずれにしてもget、属性を持つアンカー要素と同等です。どちらも HTTPリクエストになるためです。HTML5のフォームの有効な値は、"get" と "post" だけです。hrefGETmethod

<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;
}
于 2012-07-20T15:30:59.340 に答える
4

2 番目のケースは、A タグ内の追加の入力引数を処理しません。フォームがリクエスト GET 文字列にすべての入力を追加する間、href のみに従います。

<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>

違う働きをするだろう

于 2012-07-20T15:32:24.353 に答える
2

機能の違い。

はい、どちらもお互いに似たような動作をしますが、本来の目的のために要素を使用する理由がまだいくつかあります。ほとんどの場合、ボタン リンクでは機能が失われます。たとえば、右クリックして新しいタブまたはウィンドウで開くことはできません。

セマンティクスと仕様も考慮してください。ボタン要素 (使用するバリエーション<input type="button">または<button></button>) は、フォームで使用するためのものです。

于 2012-07-20T15:32:52.433 に答える
1

を使用する<a name="markname"></a>と、URL などを使用してそのタグの位置をスクロールして表示できますhttp://example.com/index.html#markname。フォームも入力もそうではないと思います。<input type="button" window.location.href='foo.html'/>また、 を使用するには、JavaScript を有効にする必要があると思います。また、<form>s通常は改行を引き起こしますが、<a>sそうしないでください。

于 2012-07-20T15:36:30.983 に答える
0

上記のすべてのメソッドは、次のように複数の引数が含まれている場合を除いて、同じ結果を達成します。

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

参考のために私は使用します：

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

ボタンリンクの場合

于 2012-07-20T15:31:34.293 に答える