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.
Input vs Button
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.
button con stile
Diversamente dai pulsanti basati su input, la maggior parte dei browser non forza nessun tipo particolare di aspetto per l'elemento button, lasciandolo praticamente grezzo, pronto per essere modificato a nostro piacimento. L'immagine qui sotto mostra come viene reso di default un button di tipo submit sui diversi browser e sistemi operativi:
Noterete che ogni browser (tranne Opera 9 su Mac OS X) tratta button in maniera piuttosto semplice. Un bella novità rispetto ai pulsanti input nativi dell'interfaccia utente del sistema operativo che ritroviamo in Safari e Camino:
Qualcuno potrebbe schierarsi a favore dell'uso dello stile nativo del sistema operativo perché "l'utente si sente così più a suo agio", ma se avete mai provato a spiegare ad un cliente perché i pulsanti non si accordano al design del resto del sito, sono sicuro che capirete cosa intendo. Dopo tutto quei pulsanti al gel con tono blue non stanno bene con tutto.
Figua 3 - Un pulsante non modificato
Usando l'elemento button, possiamo creare pulsanti che sono molto più accattivanti (e in tono con lo stile del sito):
Il tutto senza ricorrere alla pericolosa soluzione basata su <input type="image" />.
Un esempio d'uso
Sono certo che la maggior parte di voi ha già compreso le potenzialità dell'elemento button. Ecco allora un piccolo esempio per quelli non ancora del tutto convinti.
Autunno scorso. Lavoravo su una scheda natalizia per conto della mia ex azienda. Nella scheda, la "Grab Bag O’ Goodness", l'utente doveva scegliere una fondazione a cui avremmo destinato una somma in beneficenza al posto del solito regalo aziendale. Ho creato per l'occasione un form. Sotto trovate la parte importante:
<ol id="choices">
<li id="choice1">
<button type="submit" name="present" value="1">1</button>
</li>
<li id="choice2">
<button type="submit" name="present" value="2">2</button>
</li>
<li id="choice3">
<button type="submit" name="present" value="3">3</button>
</li>
<li id="choice4">
<button type="submit" name="present" value="4">4</button>
</li>
<li id="choice5">
<button type="submit" name="present" value="5">5</button>
</li>
</ol>
Se vi state chiedendo perché il contenuto di ciascun pulsante è così vago, è perché non volevamo rendere manifesto il risultato specificando il nome della fondazione. Abbiamo optato per fornire un numero per ciascun regalo da legare a ciascun button. Poi, usando i CSS, lo abbiamo trasformato in un bel pacchetto regalo come questo:
Quindi, in stato di :hover o :focus (dato il problema del Suckerfish Shoal su IE), mostravamo un'icona animata che lasciava intendere a quale fondazione sarebbe stata destinata la somma (in questo caso la Greater Hartford YMCA):
Usando una tecnica di image-replacement basata sui CSS, è stato relativamente semplice trasformare questo form in qalcosa che non somiglia affatto ad un form. È sicuramente meglio che usare una serie di radio button o ricorrere a Flash. In più, usando diversi pulsanti di submit ciascuno con il suo nome, sono stato in grado di registrare il valore dei singoli regali a livello di backend, senza ricorrere a campi aggiuntivi e senza richiedere ulteriori azioni all'utente, semplificando così sia il codice HTML sia l'interfaccia.
Opportunità e codice d'esempio
Usare l'elemento button al posto di un input apre la strada ad un mondo di opportunità. Consideriamo questa possibilità.
<form id="chooser" action="chooser.php" method="post">
<fieldset>
<legend>Please choose a plan from the following</legend>
<ul>
<li><button type="submit" name="plan" value="basic">
<h3>Basic Plan</h3>
<p>
You get 20<abbr title="gigabytes">GB</abbr> of
storage and a single domain name for
<strong>$2.99/<abbr title="month">mo</abbr></strong>
</p>
</button></li>
<li><button type="submit" name="plan" value="pro">
<h3>Pro Plan</h3>
<p>
You get 100<abbr title="gigabytes">GB</abbr> of
storage and a single domain name for
<strong>$12.99/<abbr title="month">mo</abbr></strong>
</p>
</button></li>
<li><button type="submit" name="plan" value="guru">
<h3>Guru Plan</h3>
<p>
You get 500<abbr title="gigabytes">GB</abbr> of
storage and unlimited domain names for
<strong>$22.99/<abbr title="month">mo</abbr></strong>
</p>
</button></li>
</ul>
</fieldset>
</form>
diventa:
Oppure questo:
<form class="pagination" action="paginate.php" method="get">
<ol>
<li class="prev">
<button type="submit" name="submit" value="1">
1
<span></span>
</button>
</li>
<li class="curr">
<button type="submit" name="submit" value="2">2</button>
</li>
<li class="next">
<button type="submit" name="submit" value="3">
3
<span></span>
</button>
</li>
<li>
<button type="submit" name="submit" value="4">4</button>
</li>
<li>
<button type="submit" name="submit" value="5">5</button>
</li>
</ol>
</form>
che si trasforma in:
Dal punto di vista del markup, è possibile inserire praticamente qualunque cosa all'interno di elementi button. Le eccezioni riguardano l'elemento a e altri controlli di form (per ovvie ragioni). Dal punto di vista stilistico, c'è veramente poco che non si possa fare. Insomma, fuori la creatività e diamoci dentro con l'elemento button!
