1. Snippets
  2. ›
  3. HTML
  4. ›
  5. Wie kann man einen HTML-Button, der wie ein Link funktioniert, erstellen.

Wie kann man einen HTML-Button, der wie ein Link funktioniert, erstellen.

Es gibt mehrere Möglichkeiten, einen HTML-Button zu erstellen, der sich wie ein Link verhält (d. h. der Benutzer wird auf die angegebene URL umgeleitet).

Sie können eine der folgenden Methoden wählen, um einen Link zu einem HTML-Button hinzuzufügen.

1. Fügen Sie inline onclick Ereignis

  1. zum HTML-Tag <button> innerhalb des HTML-Elements <form> hinzu.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <button onclick="window.location.href = 'https://de.w3docs.com';">Hier klicken</button>
  </body>
</html>
Hinweis: Möglicherweise wird es nicht funktionieren, wenn sich die Schaltfläche im Tag form befindet.
  1. zum Tag <input> innerhalb des HTML-Elements <form> hinzu.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <form>
      <input type="button" onclick="window.location.href = 'https://de.w3docs.com';" value="w3docs"/>
    </form>
  </body>
</html>
Hinweis: Die Links können nicht funktionieren, wenn JavaScript deaktiviert ist, und die Suchmaschinen können solche Links ignorieren.

2. Verwenden Sie den Button ABSENDEN mit dem Attribut action oder formaction innerhalb des Elements <form>

  1. Das Attribut action

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <form action="https://de.w3docs.com/">
      <button type="submit">Klicken</button>
    </form>
  </body>
</html>

Um den Link in einem neuen Tab zu öffnen, fügen Sie das Attribut target="_blank hinzu.

Beispiel

<!DOCTYPE html>
<html>
   <head>
      <title>Der Titel des Dokuments</title>
   </head>
    <body>
      <form action="https://de.w3docs.com/" method="get" target="_blank">
        <button type="submit">Klicken</button>
      </form>
    </body>
</html>
Hinweis: Da es eigentlich kein Formular gibt und keine Daten übermittelt werden, kann das semantisch falsch sein. Diese Auszeichnung ist jedoch gültig.
  1. Das Attribut formaction 
<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <form>
      <button type="submit" formaction="https://de.w3docs.com">Klicken</button>
    </form>
  </body>
</html>
Hinweis: Das Attribut formaction wird nur für die Buttons mit type="submit" verwendet. Da dieses Attribut für HTML5 spezifisch ist, kann die Unterstützung in alten Browsern schlecht sein.

3. Ein als HTML-Button gestalteter Link (durch CSS) 

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .button {
      background-color: #FF4500;
      border: none;
      color: white;
      padding: 20px 34px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 20px;
      margin: 4px 2px;
      cursor: pointer;
      }
    </style>
  </head>
  <body>
    <a href="https://de.w3docs.com/" class="button">Hier klicken</a>
  </body>
</html>
Hinweis: Da es komplexes Styling erforderlich ist, wird das bei bestimmten Browsern möglicherweise nicht funktionieren.
Finden Sie das nützlich?

Ähnliche Artikel