Esempi di Codice per un Pulsante con Link – Come Creare Hyperlink HTML Usando l'Attributo HREF sui Tag

Articolo originale: HTML Button Link Code Examples – How to Make HTML Hyperlinks Using the HREF Attribute on Tags

In questo articolo, andremo a esplorare tre modi diversi per creare un pulsante HTML che funge da link.

Ecco i tre metodi che tratteremo:

1. Applicare uno stile a un link in modo che sembri un pulsante
2. Usare gli attributi  action e formaction in un form
3. Usare l'evento onclick di JavaScript

Prima però vediamo il metodo sbagliato.

Perché usare l'elemento a non funziona?

Il frammento di codice qui sotto rappresenta un pulsante che, quando cliccato, porta al sito di freeCodeCamp.

  <a href="https://www.freecodecamp.org/">
    <button>freeCodeCamp</button>
  </a> 

Tuttavia questo non è HTML valido

L'elemento a può essere utilizzato per racchiudere interi paragrafi, liste, tabelle e così via, anche intere sezioni, fintanto che non ci sia contenuto interattivo all'interno (vale a dire pulsanti o altri link). - (Fonte: Web Hypertext Application Technology Working Group)

Questa è considerata una cattiva pratica in quanto non rende chiara l'intenzione all'utente.

I link sono concepiti per portare l'utente in un'altra parte della pagina web oppure in un sito esterno, mentre i pulsanti sono concepiti per eseguire un'azione specifica come l'invio di un form.

Quando annidi l'uno all'interno dell'altro, fai sì che l'azione che vuoi eseguire non sia chiara. Ecco perché è meglio non annidare un pulsante all'interno di un tag a.

Come applicare uno stile CSS in modo che un link sembri un pulsante

Il primo metodo non usa button in alcun modo. Possiamo applicare uno stile tramite CSS in modo che un tag a sembri un pulsante.

Questo è lo stile predefinito per un tag a.

Possiamo aggiungere una classe al tag a, poi utilizzare il selettore di classe per applicare lo stile all'elemento.

  <a class="fcc-btn" href="https://www.freecodecamp.org/">freeCodeCamp</a>  

Se vuoi che il link si apra in un'altra pagina, puoi aggiungere l'attributo target="_blank" in questo modo:

  <a target="_blank" class="fcc-btn" href="https://www.freecodecamp.org/">freeCodeCamp</a>  

Poi puoi aggiungere un colore di sfondo e cambiare il colore del font, così:

.fcc-btn {
  background-color: #199319;
  color: white;
}

Il passo successivo sarà quello di aggiungere un po' di riempimento attorno al testo:

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
}

Infine, possiamo usare la proprietà text-decoration per eliminare la riga di sottolineatura dal testo:

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
  text-decoration: none;
}

Ora abbiamo ottenuto un tag a che sembra un pulsante.

Possiamo anche rendere questo "pulsante" un po' più interattivo modificando il colore di sfondo quando il mouse è situato all'interno dell'elemento.

.fcc-btn:hover {
  background-color: #223094;
}

Potremmo anche complicare il design, ma questo è solamente per mostrarti le basi di come fare in modo che un link sembri un pulsante tramite uno stile CSS.

Potresti anche scegliere di usare una libreria CSS come Bootstrap.

  <a class="btn btn-primary" href="https://www.freecodecamp.org/">freeCodeCamp</a>  

Se il tuo progetto già include Bootstrap, allora puoi usare i suoi stili integrati per i pulsanti. Ma non importerei Bootstrap solo per applicare uno stile a un link.

Quali sono i problemi con questo metodo?

C'è un po' di discussione sul fatto che sia un buona pratica applicare uno stile ai link in modo che sembrino pulsanti. Alcuni sostengono che i link dovrebbero sempre sembrare link e i bottoni dovrebbero sempre sembrare bottoni.

Nel libro online Resilient Web Design, Jeremy Keith afferma che

un materiale non dovrebbe essere usato come sostituto di un altro, altrimenti il risultato finale sarà ingannevole.

Perché mi sono presa la briga di citare questa discussione?

Il mio scopo non è di farti scegliere da che parte stare. Voglio solo che tu sia conscio che è in corso un dibattito.

Come usare gli attributi action e formaction per creare un pulsante in un form

Come usare l'attributo action

Un'altra alternativa è annidare il pulsante all'interno di un form e usare l'attributo action.

Esempio con il tag input:

  <form action="https://www.freecodecamp.org/">
    <input type="submit" value="freeCodeCamp">
  </form>

Esempio con il tag button:

  <form action="https://www.freecodecamp.org/">
    <button type="submit">freeCodeCamp</button>
  </form>

Questo è lo stile predefinito applicato al pulsante.

Potremmo usare gli stessi stili usati in precedenza, ma dovremmo aggiungere la proprietà cursor: pointer ed eliminare il contorno (border: none), in questo modo:

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
  text-decoration: none;
  cursor: pointer;
  border: none;
}

Come usare l'attributo formaction

In modo simile al metodo precedente, possiamo creare un form e usare l'attributo formaction.

Esempio con il tag input:

  <form>
    <input type="submit" formaction="https://www.freecodecamp.org/" value="freeCodeCamp">
  </form>

Esempio con il tag button:

  <form>
    <button type="submit" formaction="https://www.freecodecamp.org/">freeCodeCamp</button>
  </form>

Puoi usare l'attributo formaction solo con i tag input e button che abbiano l'attributo type="image" oppure type="submit".

È semanticamente corretto?

Sebbene questa sembri una soluzione che funziona, ci si pone la domanda se sia semanticamente corretta.

Stiamo usando i tag di un form che in realtà non funziona come un vero form. Lo scopo di un form è di raccogliere e inviare dati, ma stiamo usando il pulsante di tipo submit per mandare l'utente in un'altra pagina.

Quando si parla di semantica, questo non è un buon modo per usare i tag form.

Effetti collaterali dell'uso degli attributi action e formaction

Quando fai click sul pulsante, talvolta accadono cose interessanti con l'URL. L'URL ora ha un punto interrogativo alla fine.

La ragione di questo è che il form sta usando il metodo GET. Potresti passare al metodo POST, ma potrebbero esserci casi in cui anche questa soluzione non è l'ideale.

  <form method="POST" action="https://www.freecodecamp.org/">
    <button type="submit">freeCodeCamp</button>
  </form>

Anche se questo metodo è HTML valido, contiene anche un effetto collaterale indesiderato.

Come usare l'evento JavaScript onclick per creare un pulsante

Negli approcci precedenti, abbiamo adottato soluzioni HTML e CSS. Possiamo anche usare JavaScript per ottenere lo stesso risultato.

Esempio con il tag input:

 <form>
    <input type="button" onclick="window.location.href='https://www.freecodecamp.org/';" value="freeCodeCamp" />
 </form>

Esempio con il tag button:

<button onclick="window.location.href='https://www.freecodecamp.org/';">freeCodeCamp</button>  

Window.location.href rappresenta la posizione di un URL specifico, in questo caso ritorna https://www.freecodecamp.org/.

Inconvenienti di questo metodo

Sebbene questa soluzione funzioni, ci sono alcuni potenziali problemi da considerare.

Se l'utente ha deciso di disabilitare JavaScript nel suo browser, chiaramente questa soluzione non funzionerà. Sfortunatamente, ciò potrebbe portare a una scarsa esperienza utente.

Conclusione

Lo scopo di questo articolo era di mostrarti tre modi diversi per fare in modo che i pulsanti agiscano come link.

Il primo metodo è progettare un link in modo che sembri un pulsante. Abbiamo anche considerato che modificare le sembianze di un link in modo che sembri un altro elemento può essere una buona idea o meno.

Il secondo metodo è usare gli attributi del form action e formaction, ma questa soluzione ha qualche effetto collaterale con l'URL e non è semanticamente corretta.

Il terzo metodo usa l'evento JavaScript onclick e Window.location.href. Ma abbiamo imparato che questo anche metodo potrebbe non funzionare se gli utenti decidono di disabilitare JavaScript nei loro browser.

Come sviluppatore, è davvero importante esaminare i pro e contro di un particolare metodo prima di adottarlo nel tuo progetto.

Spero tu abbia apprezzato questo articolo e imparato qualcosa di nuovo.

Buona programmazione!