Crea un pulsante HTML che funziona come un collegamento

Crea un pulsante HTML che funziona come un collegamento

  1. Utilizza i tag di ancoraggio <form> e <a> </a> per creare un pulsante HTML che funziona come un collegamento
  2. Usa i tag <form> e <button> per creare un pulsante HTML che funziona come un collegamento a
  3. Usa i tag <form> e <input> per creare un pulsante HTML che funziona come un collegamento

Questo articolo introdurrà tre diversi metodi per creare un pulsante HTML che funzioni come un collegamento. Useremo il modulo HTML, il pulsante, l’input e i tag di ancoraggio per la dimostrazione.

Utilizza i tag di ancoraggio <form> e <a> </a> per creare un pulsante HTML che funziona come un collegamento

Possiamo utilizzare i tag <form> e <a></a> per creare un pulsante HTML e farlo comportare come un collegamento web. Usiamo il tag <form> all’interno del corpo HTML. E all’interno del tag <form>, usiamo il tag anchor <a>. Il tag <a> definisce un collegamento ipertestuale utilizzato per collegare da una pagina all’altra. Possiamo specificare l’indirizzo di destinazione da caricare nell’attributo href del tag anchor. In assenza dell’attributo href, il tag <a> è solo il segnaposto per un collegamento.

Ad esempio, scrivi un tag <form> all’interno del corpo HTML. Quindi scrivi il tag di ancoraggio <a> e fornisci l’URL https://www.facebook.com/ nell’attributo href del tag di ancoraggio. Quindi creare un tag <input> e specificare l’attributo type per il pulsante. Scrivi il valore click here nell’attributo value. Quindi chiudi il tag di ancoraggio e quindi il tag del modulo.

L’esempio seguente crea un pulsante HTML. Quando facciamo clic sul pulsante, la pagina Web reindirizza a Facebook. In questo modo, possiamo creare il pulsante HTML che funge da collegamento.

Codice di esempio:

<html>
<body>
<form>
    <a href="https://www.facebook.com/">
        <input type="button" value="click here">
    </a>
</form>
</body>
</html>

Usa i tag <form> e <button> per creare un pulsante HTML che funziona come un collegamento a

Possiamo anche utilizzare il modulo con l’attributo action all’interno del tag per creare un pulsante HTML che funge da collegamento. Il valore dell’attributo action è la destinazione di destinazione quando il modulo viene inviato. Il tag button crea il pulsante e, quando lo facciamo clic, ci porta all’URL di destinazione che abbiamo dichiarato nell’attributo action.

Ad esempio, scrivi un tag <form> all’interno del corpo HTML. Quindi scrivi l’attributo action e fornisci il valore come URL https://www.youtube.com/. Successivamente, crea il tag button e scrivi sumbit come valore dell’attributo type. Quindi, scrivi il testo Continue prima di chiudere il tag button. Quindi chiudi il tag form.

L’illustrazione seguente crea un pulsante HTML. Quando facciamo clic sul pulsante, la pagina Web reindirizza a YouTube. Abbiamo usato il tag button direttamente in questo metodo, a differenza del primo metodo. Anche in questo modo possiamo realizzare il pulsante HTML che funge da collegamento.

Codice di esempio:

<html>
<body>
    <form action="https://www.youtube.com/">
        <button type="submit">Continue</button>
    </form>
</body>
</html>

Usa i tag <form> e <input> per creare un pulsante HTML che funziona come un collegamento

Proprio come il secondo passaggio, possiamo utilizzare nuovamente il modulo per creare un pulsante HTML che funge da collegamento in questo metodo. Tuttavia, utilizzeremo il tag <input> per creare un pulsante di invio. Possiamo specificare l’URL a cui verrà reindirizzata la pagina dopo aver inviato il modulo nell’attributo action. Il tag input ha un attributo type dove possiamo scrivere il valore submit per inviare i dati del modulo.

Ad esempio, scrivi un tag <form> all’interno del corpo HTML. Quindi scrivi l’attributo action e specifica l’URL https://google.com/. Successivamente, scrivi il tag input e scrivi il valore submit nell’attributo type. Nell’attributo value , scrivi "Go to Google". Quindi chiudi il tag form.

L’illustrazione seguente crea anche un pulsante HTML. Quando facciamo clic sul pulsante, la pagina Web reindirizza a Google. Nota che non abbiamo scritto i tag di apertura e chiusura per <input> perché è un tag a chiusura automatica. Anche in questo modo possiamo creare il pulsante HTML, che funge da collegamento.

Codice di esempio:

<html>
<body>
    <form action="https://google.com">
        <input type="submit" value="Go to Google" />
    </form>
</body>
</html>
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