Premi il button

27 ottobre 2006

Questa è la traduzione dell’articolo Push my button di Aaron Gustafson pubblicato originariamente su Digital Web Magazine il 25 settembre 2005. La traduzione viene qui presentata con il consenso dell’editore e dell’autore.

Se c’è un elemento che secondo me non ha il rispetto che merita quello è button. Da sempre, infatti, ha svolto un ruolo secondario rispetto a input nei tutorial e negli esempi dedicati alla creazione di form. Le poche volte che ha attirato un po’ di attenzione, è stato usato e abusato dalla massa di programmatori DHTML, costretto ad accettare gestori di eventi inline ed intrusivi, ed altri crimini nefasti dello stesso genere contro il markup semantico.

Credo che le atrocità commesse contro l’elemento button abbiano contribuito direttamente al suo raro utilizzo nelle moderne applicazioni web. La sua reputazione è stata compromessa, è andato perso del tutto il suo significato. Di conseguenza, pochi sviluppatori prendono in considerazione questo controllo nei loro progetti. È davvero una vergogna. button è flessibile ed è un asset da tenere sempre a portata di mano nella scatola degli attrezzi dell’HTML. Iniziamo la nostra esplorazione intorno a questo elemento sottovalutato esaminando il suo utilizzo rispetto al più comune elemento input che ha preso di fatto il suo posto.

Comparazione funzionale

La più comune forma di input è un semplice pulsante di submit, quello che compare praticamente su tutti i form che realizziamo. La sintassi per la creazione di un input di questo tipo è straordinariamente semplice:

<input type=”submit” value=”Submit” />

In effetti, anche la sintassi per l’elemento button è semplice:

<button type=”submit”>Submit</button>

Sono praticamente identici dal punto di vista funzionale, ma button offre un più elevato livello di flessibilità. Il pulsante di submit realizzato come input può mostrare solo una stringa di testo, mentre button può contenere altro contenuto più ricco in termini di semantica. Per esempio, potremmo voler dare più importanza ad una parte del testo del pulsante:

<button type=”submit”>
Continue to the <strong>Next Page</strong>
</button>

Oppure potremmo usare un’immagine:

<button type=”submit”>
<img src=”next_page.png” alt=”Continue to the next page” />
</button>

Al di là dell’invio di form, l’elemento button può anche rimpiazzare un pulsante di reset.

<input type=”reset” value=”Reset this form” />

può essere tranquillamente sostituito con:

<button type=”reset”>Reset this form</button>

Un button può anche diventare la base per eventi basati su script, una volta che lo si sia trasformato in un pulsante generico con type="button" e manipolandolo con codice Javascript non intrusivo eseguito con onload:

<button type=”button” id=”something-doer”>Do Something</button>

Nota: Un pulsante generico di questo tipo, in grado di eseguire codice Javascript, dovrebbe essere generato nella pagina solo via Javascript, perché il button sarebbe praticamente inutile senza un browser in grado di supportare JavaScript. È inutile dare alla gente controlli di form che poi non possono usare.

La vera forza dell’elemento button, comunque, risiede nella possibilità di essere modificato nel suo aspetto tramite CSS. Diamo un’occhiata alle opzioni che ci offre.

Se vuoi aggiornamenti su Premi il button inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Premi il button

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy