Kann ich mit HTML5 ein <button> -Element in einem <a> verschachteln?


145

Ich mache folgendes:

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

Dies funktioniert gut, aber ich erhalte einen HTML5-Validierungsfehler, der besagt, dass "Element 'Schaltfläche' nicht in Element 'a Schaltfläche' verschachtelt sein darf.

Kann mir jemand einen Rat geben, was ich tun soll?


8
Der Validator hat Ihre Frage bereits für Sie beantwortet und Ihnen sogar mitgeteilt, warum sie in dieser Fehlermeldung nicht gültig ist.
Nutzloser Code

1
Aber gibt es eine Alternative, wenn Google dies als Link sehen soll? Als Beispiel für die Verwendung von Schaltflächen habe ich Schaltflächen mit den Namen "<<" und ">>" für den nächsten und vorherigen Datensatz. Ich glaube, dies sollten Schaltflächen sein, aber die Funktionalität besteht darin, dass sie auf neue Seiten verlinken.
Marie

3
Meine Frage ist, ob es wichtig ist ... wenn Sie diese eine wohlverdiente Ausnahme machen.
Muhammad Umer

1
Wenn ich <button> <a href="dsada.html"> Test </a> </ button> setze, funktioniert es nicht mit Internet Explorer 11 oder Firefox.
Dutraveller

Antworten:


231

Nein , es ist kein gültiges HTML5 gemäß dem HTML5-Spezifikationsdokument von W3C :

Inhaltsmodell: Transparent , es darf jedoch keinen Nachkommen für interaktive Inhalte geben .

Das a-Element kann um ganze Absätze, Listen, Tabellen usw., sogar ganze Abschnitte, gewickelt werden, solange sich kein interaktiver Inhalt darin befindet (z. B. Schaltflächen oder andere Links).

Mit anderen Worten, Sie können alle Elemente in a verschachteln, mit <a>Ausnahme der folgenden:

  • <a>

  • <audio>(wenn das Steuerelementattribut vorhanden ist)

  • <button>

  • <details>

  • <embed>

  • <iframe>

  • <img>(wenn das usemap- Attribut vorhanden ist)

  • <input>(wenn sich das type- Attribut nicht im versteckten Zustand befindet)

  • <keygen>

  • <label>

  • <menu>(wenn das Typ - Attribut ist in der Werkzeugleiste Zustand)

  • <object>(wenn das usemap- Attribut vorhanden ist)

  • <select>

  • <textarea>

  • <video>(wenn das Steuerelementattribut vorhanden ist)


Wenn Sie versuchen, eine Schaltfläche zu haben, die auf irgendwo verweist, wickeln Sie diese Schaltfläche <form>als solche in ein Tag ein:

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

Wenn Ihr <button>Tag jedoch mit CSS gestaltet ist und nicht wie das Widget des Systems aussieht ... Tun Sie sich selbst einen Gefallen, erstellen Sie eine neue Klasse für Ihr <a>Tag und gestalten Sie es auf die gleiche Weise.


1
@ Andrew Moore - Gibt es einen anderen Weg. Ich glaube, dies gab Probleme und deshalb wurde es geändert, um innerhalb eines <a> -Links zu sein. Ich bin mir nicht sicher, was das Problem war, aber wir haben viele dieser Schaltflächen auf einer Seite. Vielleicht lag es daran, dass wir SEO durch die Verwendung von <a> -Links verbessern wollten.
Marie

2
@Marie: Es gibt keine andere Möglichkeit, als Ihre Links so zu gestalten, dass sie wie Schaltflächen aussehen.
Andrew Moore

3
user25 not is ist nicht besser method = "post" zu verwenden, da der Browser beim erneuten Navigieren nach dem erneuten Senden eines Post-Formulars fragt. Da GET die Standardmethode eines Formulars ist, kann der Kürze halber method = "get" herausgelassen werden.
Bijan

4
@AndrewMoore: Wenn Sie einen Link so gestalten, dass er wie eine Schaltfläche aussieht, entstehen eigene Probleme, z. B. für die Barrierefreiheit. Eine Schaltfläche sollte ausgeführt werden, wenn sie den Fokus hat und Sie die Leertaste drücken. Ein Link nicht. Wenn Sie sich für ADA interessieren (oder vorgeben müssen, sich darum zu kümmern), kann dies Sie beißen.
Bilderstürmer

2
Wie @jonaspas vorgeschlagen, ein im <div>Innern einer <a>absolut gültig in HTML5: validator.w3.org/nu/...
Socob

43

Wenn Sie Bootstrap 3 verwenden , funktioniert dies recht gut

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

funktioniert nicht gut mit einer runden Schaltfläche Schriftart tolles Symbol im Inneren
Toolkit

Die Verwendung von class = 'btn btn-default' stimmte mit den anderen Schaltflächen (MVC6) überein.
Crokusek

12

Nein.

Die folgende Lösung basiert auf JavaScript.

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

Wenn die Schaltfläche in einem vorhandenen <form>mit platziert werden soll method="post", stellen Sie sicher, dass die Schaltfläche das Attribut hat, type="button"andernfalls sendet die Schaltfläche die POST-Operation. Auf diese Weise können Sie eine haben <form>, die eine Mischung aus GET- und POST-Bedientasten enthält.


onclick funktioniert nicht mit dem Dateiprotokoll, daher ist es beispielsweise für die statische Darstellung nicht hilfreich. In diesem Fall ist Form Action Propety der richtige Weg.
Netalex

1
Wenn die Schaltfläche mit einer Seite verknüpft ist, handelt es sich nicht um eine Schaltfläche, sondern um einen Anker
Kapsel

@Capsule ist es heutzutage so üblich zu sehen. Schauen Sie sich einfach die Zielseite für jedes vorhandene Webentwicklungs-Framework an. Normalerweise bin ich alles für das puristische Argument, aber selbst ich muss zugeben, dass eine große rechteckige Schaltfläche einen besseren und offensichtlicheren Nutzen hat als ein Link, selbst wenn sie auf eine Seite verweist, anstatt eine echte Formularaktion zu initiieren.
TheDudeAbides

Im Moment habe ich ein <a>Inside mit <button>(mit dem gleichen href) als Backup, wenn JS deaktiviert ist, und in sechs Monaten wird es mir definitiv peinlich sein, dass ich das zugegeben habe.
TheDudeAbides

@TheDudeAbides Ich spreche nicht über den Aspekt, sondern über das Markup, das Sie verwenden möchten. Was hindert Sie daran, diesen Link als große rechteckige Schaltfläche zu gestalten? Es sei denn, Ihre Website verwendet überhaupt keine Stile? Übrigens ist die Antwort über der Antwort, die wir kommentieren, ein perfektes Beispiel dafür. Es ist ein Ankertag, der als Knopf gestaltet ist.
Kapsel

10

Ich bin gerade in das gleiche Problem gesprungen und habe es gelöst, indem ich das 'button'-Tag durch das' span'-Tag ersetzt habe. In meinem Fall verwende ich Bootstrap. So sieht es aus:

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

4
Mit Bootstrap brauchen Sie die Spanne überhaupt nicht. Verschieben Sie einfach den gesamten Klassenteil auf <a> und Sie erhalten eine Link-Schaltfläche. zB <a href="#register" class="btn btn-default btn-lg"> Abonnieren </a>
Ryan Buddicom

Auf dem Originalposter wurde gefragt, ob es möglich ist, einen Knopf in einem Ankertag zu platzieren. In der akzeptierten Antwort wird darauf hingewiesen, dass es gegen die W3C-Spezifikationen verstößt, ein <a> in ein <a> zu setzen. Ich denke, deshalb hat Golbeltri demonstriert, wie man einen <span> als Knopf stylt.
StackOverflowUser

Dies ist sinnvoll, wenn sich innerhalb <a>des Links andere Inhalte befinden , die Teil des Links sind, jedoch nicht wie eine Schaltfläche gestaltet sind. Zum Beispiel führt jeder Klick innerhalb eines div(Bild, Hintergrund, Text usw.) zu einem Link, aber nur das spansieht aus wie eine Schaltfläche.
Josiah

7

Es wäre wirklich komisch, wenn das gültig wäre, und ich würde erwarten, dass es ungültig ist. Was sollte es bedeuten, ein klickbares Element in einem anderen klickbaren Element zu haben? Was ist das - ein Button oder ein Link?


Danke Steve. Dies war eine Methode, die mir von einem Teamarbeiter vorgeschlagen wurde. Die Methode funktioniert. Gibt es eine bessere Möglichkeit, dies zu tun?
Marie

1
@Marie Wenn Sie möchten, dass ein Link wie eine Schaltfläche aussieht, können Sie einfach CSS-Stile verwenden, um ihn als solchen aussehen zu lassen. Fügen Sie einen ähnlichen Rahmenstil hinzu : border: 2px outset. Wenn Sie die Ecken etwas abrunden möchten, können Sie auch einen Randradius verwenden . Ein einfaches <img>Tag würde auch gut funktionieren.
Nutzloser Code

3

Eine andere Option ist die Verwendung des onclick-Attributs der Schaltfläche:

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

Dies funktioniert jedoch, der Benutzer sieht den Link beim Schweben nicht so, wie wenn er sich innerhalb des Elements befinden würde.


2

Selbst wenn die Spezifikation dies nicht zulässt, scheint es heutzutage immer noch zu funktionieren, die Schaltfläche in ein <a href...><button ...></a>Tag einzubetten , FWIW ...


2
Dies funktioniert, wenn das <button>nicht in a enthalten ist <form>. Sobald die Schaltfläche enthalten ist (z. B. <form>...<a><button>), funktioniert dies jedoch nicht mehr, es sei denn, man deaktiviert den On-Click-Handler der Schaltfläche. Dies ist genug Kreisel, um dieses Szenario zu vermeiden.
Bischof

0

Sie können der Schaltfläche eine Klasse hinzufügen und ein Skript einfügen, das sie umleitet.

Ich mache es so:

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

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

0

Warum nicht? Sie können auch ein Bild auf der Schaltfläche einbetten

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

2
Das Problem ist, dass <a> </a>, wie das OP damals fragte, etwas einschränkend ist, was es erlaubt, innerhalb seiner Grenzen zu sein. Siehe die akzeptierte Frage dort.
Thomas


-1

In HTML5 ist es illegal, ein Schaltflächenelement in einen Link einzubetten.

Besser CSS in der Standardeinstellung verwenden und: aktive (gedrückte) Zustände:

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>


-2

Ich probiere Ihre Javascript-Lösungen aus, aber für die Arbeit muss ich die e.preventDefault();in meine Javascript-Funktion einfügen .

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

-3

Verwenden Sie das Formatierungsattribut innerhalb der Schaltfläche

PS! Es funktioniert nur, wenn Ihre Schaltfläche type = "submit"

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

Sie müssen die Schaltfläche auch in ein <form> -Tag einfügen.
Denodster

-3

<a href="index.html">
  <button type="button">Submit</button>
</a>
Oder Sie können das Java-Skript in der Schaltfläche wie folgt verwenden:

<button type="submit" onclick="myFunction()">Submit</button>
<script>
  function myFunction() {
      var w = window.open(file:///E:/Aditya%20panchal/index.html);
    }
</script>


Nur einige Browser werden es zulassen, bedeutet nicht, dass es eine gute Idee ist.
Denodster
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.