Link in HTML-Schaltfläche erstellen

Sushant Poudel 19 Februar 2023
  1. Verwenden Sie die Tags <a> und <button>, um eine Schaltfläche zu erstellen, die als Link in HTML fungiert
  2. Verwenden Sie das onclick-Attribut im button-Tag, um eine Schaltfläche zu erstellen, die als Link in HTML fungiert
  3. Verwenden Sie die Tags <a> und <input>, um eine Schaltfläche zu erstellen, die als Link in HTML fungiert
  4. Verwenden Sie ein HTML-Formular, um eine Schaltfläche zu erstellen, die als Link in HTML fungiert
Link in HTML-Schaltfläche erstellen

Wir veranschaulichen Methoden zum Erstellen einer HTML-Schaltfläche, die als Link fungiert.

Wir können eine HTML-Schaltfläche erstellen, indem wir das Tag <button> verwenden. Das Tag <button> definiert eine anklickbare Schaltfläche. Wir verwenden das Anchor-Tag <a>, um einen Hyperlink zu erstellen. Es verknüpft eine Seite mit einer anderen Seite. Wir können eine Schaltfläche erstellen, die als Link fungiert, indem wir das Tag <button> in das Anker-Tag einbetten. Wir können die Adresse des Links über das Attribut href angeben.

Erstellen Sie beispielsweise ein Ankerelement innerhalb des HTML-Textkörpers. Schreiben Sie in das Ankerelement das Attribut href und geben Sie die URL https://www.youtube.com an. Danach erstellen Sie die Schaltfläche mit dem Tag <button>. Schreiben Sie in das Tag <button> den Text Youtube. Schließen Sie nun das Button-Tag gefolgt vom Anker-Tag.

Das folgende Beispiel zeigt den Prozess der Erstellung einer HTML-Schaltfläche, die als Link fungiert. Es wird eine Schaltfläche erstellt, die zu Youtube weiterleitet.

Beispielcode:

<a href="https://www.youtube.com">
<button>Youtube</button>
</a> 

Wir können auch das Attribut onclick innerhalb des Button-Tags verwenden, um eine Schaltfläche zu erstellen, die als Link in HTML fungiert. Dieses Attribut wird bei einem Mausklick auf das Element ausgelöst. Das Skript wird ausgeführt, wenn mit der Maus geklickt wird. Bei diesem Vorgang erstellen wir jedoch zuerst den Button und fügen dann nur unsere gewünschte URL hinzu. Wir werden auch ein wenig JavaScript in dieser Methode verwenden. Wir verwenden das Objekt window.location, um die aktuelle Seitenadresse zu ermitteln und auf eine neue Seite umzuleiten.

Erstellen Sie beispielsweise innerhalb des HTML-Bodys zunächst ein <button>-Tag. Verwenden Sie innerhalb des Button-Tags das Attribut onclick und setzen Sie es auf window.location.href. Als nächstes geben Sie die Ziel-URL https://www.facebook.com/ mit window.location.href an. Schreiben Sie dann den Text Facebook zwischen das Tag <button>.

Wir haben das Attribut onclick verwendet, das Teil des Ereignisattributs in HTML ist. Auf diese Weise können wir einen HTML-Button erstellen, der als Link fungiert.

Beispielcode:

<button onclick="window.location.href='https://www.facebook.com/'">Facebook</button>

Wir können das Tag <input> verwenden, um einen HTML-Button zu erstellen. Das <input>-Tag ist auch ein <form>-Tag-Element. Es gibt ein Eingabefeld an, in das der Benutzer Daten eingeben kann. Wir können einen Button erstellen, indem wir das Attribut type verwenden und ihn mit dem Wert button spezifizieren. Wir können das Attribut value verwenden, um den Inhalt des Buttons zu schreiben. Dann können wir das Anker-Tag verwenden, um das <input>-Tag einzuschließen. Dann wird eine Schaltfläche gebildet, die als Link fungiert.

Schreiben Sie beispielsweise ein Anchor-Tag und geben Sie die Ziel-URL darin über das Attribut href an. Schreiben Sie die URL als https://www.facebook.com/. Schreiben Sie dann das Tag <input> und geben Sie sein type-Attribut als button an. Geben Sie dann im Attribut Wert den Text Facebook an. Schließen Sie das Anker-Tag.

Das folgende Beispiel erstellt einen Button mit dem Namen Facebook darin. Es leitet beim Anklicken zu Facebook weiter. Auf diese Weise können wir eine Schaltfläche erstellen, die als Link fungiert.

Beispielcode:

<a href="https://www.facebook.com/">
<input type="button" value="Facebook">
</a>

Bei dieser Methode verwenden wir das Tag <form>, um eine Schaltfläche zu erstellen, die als Link fungiert. Wir verwenden das action-Attribut, um die Ziel-URL anzugeben. Das Attribut method gibt an, wie die Formulardaten gesendet werden. Das Formular wird an die im Attribut action angegebene Seite geliefert. Wir können den Button type auf submit setzen, während er die Formulardaten abschickt.

Erstellen Sie beispielsweise innerhalb des HTML-Bodys das Tag <form> und verwenden Sie get für das Attribut method. Geben Sie nun Ihre gewünschte URL im Attribut action an. Erstellen Sie dann den Button mit dem Element <button> und setzen Sie das Attribut type auf submit. Geben Sie dann den gewünschten Text für Ihre Schaltfläche ein. Schließen Sie dann das Tag <button> gefolgt vom Tag <form>. Schließen Sie dann alle verbleibenden oben geöffneten Tags.

Beispielcode:

<form method="get" action="https://www.youtube.com/">
<button type="submit">Continue</button>
</form>
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn

Verwandter Artikel - HTML Button