Czy mogę zagnieździć element <button> wewnątrz <a> przy użyciu HTML5?

Wykonuję następujące czynności:

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

Działa to dobrze, ale pojawia się błąd walidacji HTML5, który mówi, że „przycisk elementu” nie może być zagnieżdżony w elemencie „przycisk”.

Czy ktoś może mi doradzić, co powinienem zrobić?

Nie , to nie jest poprawny HTML5 zgodnie z dokumentem specyfikacji HTML5 od W3C :

Model treści: przezroczysty , ale nie może istnieć żaden element podrzędny treści interaktywnej .

Element a może być zawijany wokół całych akapitów, list, tabel itp., A nawet całych sekcji, o ile nie ma w nich interaktywnej zawartości (np. Przycisków lub innych linków).

Innymi słowy, możesz zagnieżdżać dowolne elementy wewnątrz z <a>wyjątkiem następujących:

• <a>

• <audio>(jeśli atrybut controls jest obecny)

• <button>

• <details>

• <embed>

• <iframe>

• <img>(jeśli atrybut usemap jest obecny)

• <input>(jeśli atrybut typu nie jest w stanie ukrytym )

• <keygen>

• <label>

• <menu>(jeśli atrybut typu jest w stanie paska narzędzi )

• <object>(jeśli atrybut usemap jest obecny)

• <select>

• <textarea>

• <video>(jeśli atrybut controls jest obecny)

Jeśli chcesz mieć przycisk, który prowadzi do jakiegoś miejsca, zawiń ten przycisk wewnątrz <form>tagu jako takiego:

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

Jeśli jednak Twój <button>tag jest stylizowany za pomocą CSS i nie wygląda jak widżet systemu ... Zrób sobie przysługę, utwórz nową klasę dla swojego <a>tagu i nadaj jej styl w ten sam sposób.

Jeśli używasz Bootstrap 3 , działa to całkiem dobrze

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

Nie.

Poniższe rozwiązanie opiera się na JavaScript.

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

Jeśli przycisk ma być umieszczony wewnątrz istniejącego <form>z method="post", upewnij się, że przycisk ma atrybut, w type="button"przeciwnym razie przycisk wyśle ​​operację POST. W ten sposób możesz mieć plik <form>zawierający kombinację przycisków operacji GET i POST.

Właśnie wskoczyłem do tego samego problemu i rozwiązałem go, zastępując tag „button” tagiem „span”. W moim przypadku używam bootstrap. Tak to wygląda:

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

Byłoby naprawdę dziwne, gdyby to było ważne i spodziewałbym się, że będzie nieważne. Co powinno oznaczać umieszczenie jednego klikalnego elementu wewnątrz innego klikalnego elementu? Co to jest - przycisk czy link?

Inną opcją jest użycie atrybutu onclick przycisku:

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

To działa, jednak użytkownik nie zobaczy linku wyświetlanego po najechaniu kursorem, tak jak gdyby znajdował się wewnątrz elementu.

Obecnie, nawet jeśli specyfikacja na to nie zezwala, „wydaje się”, że nadal działa osadzanie przycisku w <a href...><button ...></a>tagu, FWIW ...

Możesz dodać klasę do przycisku i umieścić skrypt przekierowujący go.

Robię to w ten sposób:

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

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

dlaczego nie… możesz również osadzić zdjęcie na przycisku

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

Wyjaśnienie i rozwiązanie robocze tutaj: Howto: div z onclick wewnątrz innego div z javascript onclick

wykonując ten skrypt w wewnętrznej obsłudze kliknięcia:

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

W HTML5 osadzanie przycisku w linku jest nielegalne.

Lepiej używać CSS w stanach domyślnych i: active (wciśnięty):

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>

Próbuję twoich rozwiązań javascript, ale do pracy muszę wstawić e.preventDefault();w mojej funkcji 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>   

Użyj atrybutu formaction wewnątrz przycisku

PS! Działa tylko wtedy, gdy typ przycisku = "wyślij"

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