Bisakah saya membuat sarang elemen <button> di dalam <a> menggunakan HTML5?

Saya melakukan hal berikut:

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

Ini berfungsi baik tetapi saya mendapatkan kesalahan validasi HTML5 yang mengatakan "Elemen 'tombol' tidak boleh bersarang di dalam elemen 'tombol'.

Adakah yang bisa memberi saya nasihat tentang apa yang harus saya lakukan?

Tidak , itu bukan HTML5 yang valid menurut Dokumen Spesifikasi HTML5 dari W3C :

Model konten: Transparan , tetapi tidak boleh ada keturunan konten interaktif .

Elemen a dapat melingkari seluruh paragraf, daftar, tabel, dan sebagainya, bahkan seluruh bagian, selama tidak ada konten interaktif di dalamnya (mis. Tombol atau tautan lain).

Dengan kata lain, Anda dapat membuat sarang elemen apa pun di dalam <a>kecuali yang berikut:

• <a>

• <audio>(jika atribut kontrol hadir)

• <button>

• <details>

• <embed>

• <iframe>

• <img>(jika atribut usemap ada)

• <input>(jika atribut type tidak dalam keadaan tersembunyi )

• <keygen>

• <label>

• <menu>(jika atribut type dalam status toolbar )

• <object>(jika atribut usemap ada)

• <select>

• <textarea>

• <video>(jika atribut kontrol hadir)

Jika Anda mencoba memiliki tombol yang tertaut ke suatu tempat, bungkus tombol itu di dalam <form>tag sebagai berikut:

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

Namun, jika <button>tag Anda ditata menggunakan CSS dan tidak terlihat seperti widget sistem ... Bantu diri Anda sendiri, buat kelas baru untuk <a>tag Anda dan gaya dengan cara yang sama.

Jika Anda menggunakan Bootstrap 3 , ini berfungsi dengan baik

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

Tidak.

Solusi berikut bergantung pada JavaScript.

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

Jika tombol tersebut akan ditempatkan di dalam yang ada <form>dengan method="post", kemudian memastikan tombol memiliki atribut type="button"sebaliknya tombol akan menyerahkan operasi POST. Dengan cara ini Anda dapat memiliki <form>yang berisi campuran tombol operasi GET dan POST.

Saya baru saja melompat ke masalah yang sama dan saya menyelesaikannya dengan mengganti tag 'tombol' ke tag 'span'. Dalam kasus saya, saya menggunakan bootstrap. Begini tampilannya:

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

Akan sangat aneh jika itu valid, dan saya berharap itu tidak valid. Apa artinya memiliki satu elemen yang dapat diklik di dalam elemen yang dapat diklik lainnya? Yang mana itu - tombol, atau tautan?

Pilihan lain adalah menggunakan atribut onclick tombol:

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

Ini berfungsi, namun, pengguna tidak akan melihat tautan yang ditampilkan di hover seperti yang akan mereka lakukan jika berada di dalam elemen.

Saat ini bahkan jika spek tidak mengizinkannya, "sepertinya" masih berfungsi untuk menyematkan tombol di dalam <a href...><button ...></a>tag, FWIW ...

Anda dapat menambahkan kelas ke tombol dan menempatkan beberapa skrip mengarahkannya.

Saya melakukannya dengan cara ini:

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

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

kenapa tidak..kamu juga bisa menanamkan gambar pada tombol juga

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

Penjelasan dan solusi yang berfungsi di sini: Howto: div dengan onclick di dalam div lain dengan onclick javascript

dengan menjalankan skrip ini di penangan klik dalam Anda:

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

Adalah ilegal di HTML5 untuk menyematkan elemen tombol di dalam tautan.

Lebih baik menggunakan CSS pada status default dan: aktif (ditekan):

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>

Saya mencoba solusi javascript Anda, tetapi untuk pekerjaan saya harus memasukkan e.preventDefault();fungsi javascript saya.

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

Gunakan atribut formaction di dalam tombol

PS! Ini hanya berfungsi jika tombol Anda ketik "kirim"

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