HTML5を使用して<a>内に<button>要素をネストできますか？

私は次のことをしています。

 <a href="www.stackoverflow.com">
   <button disabled="disabled" >ABC</button>
 </a>  

これは正常に機能しますが、「要素「ボタン」を要素「ボタン」内にネストすることはできません」というHTML5検証エラーが発生します。

誰か私に何をすべきかについてのアドバイスをくれますか？

いいえ、W3CのHTML5仕様ドキュメントによると、これは有効なHTML5ではありません。

コンテンツモデル： 透明ですが、インタラクティブなコンテンツの子孫があってはなりません。

a要素は、段落、リスト、表など、セクション全体でもラップできます。

つまり、<a>次のものを除いて、要素を入れ子にすることができます。

• <a>

• <audio>（controls属性が存在する場合）

• <button>

• <details>

• <embed>

• <iframe>

• <img>（usemap属性が存在する場合）

• <input>（type属性が非表示状態でない場合）

• <keygen>

• <label>

• <menu>（type属性がツールバー状態の場合）

• <object>（usemap属性が存在する場合）

• <select>

• <textarea>

• <video>（controls属性が存在する場合）

どこかにリンクするボタンを作成しようとしている場合は、そのボタンを次のように<form>タグで囲みます。

<form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>

ただし、<button>CSSを使用してタグのスタイルが設定されていて、システムのウィジェットのように見えない場合...自分でやり直して、<a>タグの新しいクラスを作成し、同じ方法でスタイルを設定します。

Bootstrap 3を使用している場合、これは非常にうまく機能します

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

番号。

次のソリューションはJavaScriptに依存しています。

<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>

ボタンを既存の<form>with 内に配置method="post"するtype="button"場合は、ボタンに属性があることを確認してください。そうでない場合、ボタンはPOST操作を送信します。このようにして、<form>GET操作ボタンとPOST操作ボタンが混在するを持つことができます。

私はちょうど同じ問題に飛び込んだところ、「ボタン」タグを「スパン」タグに置き換えて解決しました。私の場合、私はブートストラップを使用しています。これは次のようになります。

<a href="#register"> 
    <span class="btn btn-default btn-lg">
        Subscribe
    </span>
</a> 

それが有効だとすれば、それは本当に奇妙なことであり、私はそれが無効であることを期待します。1つのクリック可能な要素を別のクリック可能な要素の中に持つとはどういう意味ですか？ボタンとリンクのどちらですか？

別のオプションは、ボタンのonclick属性を使用することです。

<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>

これは機能しますが、要素内にある場合のように、ユーザーがホバーにリンクを表示することはありません。

最近では、仕様で許可されていない場合でも、ボタンを<a href...><button ...></a>タグ内に埋め込むように機能していると思われます。FWIW...

ボタンにクラスを追加して、スクリプトをリダイレクトすることができます。

私はこのようにします：

<button class='buttonClass'>button name</button>

<script>
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
</script>

ボタンに画像を埋め込むこともできます。

<FORM method = "POST" action = "https://stackoverflow.com"> 
    <button type="submit" name="Submit">
        <img src="img/Att_hack.png" alt="Text">
    </button>
</FORM> 

説明と実際の解決策はこちら： 方法：onclickを使用したdiv内の別のdivとonclick javascript

このスクリプトを内部クリックハンドラーで実行します。

 if (!e) var e = window.event;
 e.cancelBubble = true;
 if (e.stopPropagation) e.stopPropagation();

HTML5では、リンク内にボタン要素を埋め込むことはできません。

デフォルトおよび：active（押された）状態でCSSを使用する方が良い：

body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */
a.Button{padding:.1em .4em;color:#0000D0;background-color:#E0E0E0;font:normal 80% sans-serif;font-weight:700;border:2px #606060 solid;text-decoration:none}
a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF}
a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF}

<p><a class="Button" href="www.stackoverflow.com">Click me<a>

私はあなたのjavascriptソリューションを試しますが、仕事のためe.preventDefault();に私のjavascript関数に挿入する必要があります。

<!-- Add your HTML !-->
<a id="id_primary_link" href="my_primary_link.php">
  <button onclick="my_trick_function('my_secondary_link.php')">
</a>


<!-- Add your javascript function !-->
<script>
function my_trick_function(secondary_link){
    $('#id_primary_link').click(function(e) {
        e.preventDefault();
        window.location.replace(secondary_link);
    });
}   
</script>   

ボタン内でformaction属性を使用する

PS！ボタンがtype = "submit"の場合にのみ機能します

<button type="submit" formaction="www.youraddress.com">Submit</button>