リンクの動作でhtmlボタンを作成する最も良い方法は何ですか？

Question

私は約50行のテーブルを持っています。各行にはリンクがありますが、このリンクをボタンで置き換える必要があります。そして私はこれを行うにはいくつかの方法がありますが、どの方法が最善であるか分かりません。

最初の方法：

<form method="POST" action="some url"> 
    <input type="submit" value="Clickable Button"> 
</form> 

第二の方法：

<input type="button" value="Action button" 
onclick="window.location='http://www.w3schools.com'" /> 

第三の道：

<input type="button" class="actionButton" value="Action button" 
data-link="http://www.w3schools.com"/> 

そして、私はjQueryを使ってJavaScriptコードを追加します後：

$("input.actionButton").click(function() { 
    window.location = $(this).attr("data-link"); 
}); 

だから、何が最善の方法ですか？

Answer 1

これら3つのうち、私はformとしますが、リンクが別の場所に行くと、リンク機能を複製するだけのフォームがたくさんあります。

しかし、私には4番目の選択肢があります。リンクを置き換えるのではなく、スタイルを設定してください。ほぼ完全にボタンのように、あなたが望むようにリンクを表示することができます。 はなので、それは最も意味的に正しいオプションです（あまり複雑でないマークアップ）。しかし、これはリンクをボタンで置き換える必要がある理由によって異なります。例えば、外見ではなく機能的なものがある場合は、  —などです。

Answer 2

フォームの使用は、最も意味的に正しい方法です。それに加えて、それは任意のjavascriptを必要としません。私は最初の道を行くだろう。追加の値をサーバーに渡すために、このフォームに隠しフィールドを含めることができます。

Answer 3

第1の方法は最も意味的に正しいもので、JavaScriptを使用しないものですが、まだ（他にもjQueryが必要かどうかに応じて）2番目または3番目の方法に進みます。そこに機能を持たせることで、そこでリダイレクトするよりも多くの機能を追加することができます。私はあなたがそこに追加の機能を持つという要件に直面しているかもしれないが、この可能性を開いておくことができるかどうかはわかりません。

Answer 4

それはボタンのように見えることになっているリンクであれば、私はボタンのように見えるようにスタイル<a>タグを使用します。

/* See http://www.w3.org/TR/CSS2/fonts.html and search for system fonts */ 
 
/* See http://www.w3.org/TR/css3-color/#css-system and search for system colors */ 
 

 
.button { 
 
    display: inline-block; 
 
    cursor: default; 
 
    font: small-caption; 
 
    color: buttontext; 
 
    background-color: buttonface; 
 
    border: 2px outset buttonface; 
 
    padding: 1px 6px; 
 
    text-decoration: none; 
 
}

<p> 
 
    <a href="#" class="button">View</a> 
 
    <a href="#" class="button">Cancel</a> 
 
</p>