HTML: Il tag <button>
Il tag HTML <button> serve a creare un pulsante generico
Definizione e utilizzo
Il tag <button> viene utilizzato per creare un pulsante che può essere parte di un form, o semplicemente inserito all’interno della pagina.
Il contenuto del tag <button> è costituito principalmente da testo, ma è possibile inserire anche immagini (cosa che rende questo tag di gran lunga più personalizzabile del tag <input>).
La sintassi è la seguente:
<button type="button">Sono un pulsante</button>
È consigliabile specificare sempre l’attributo type, per evitare che il pulsante si comporti in maniera imprevedibile: in caso di una mancata dichiarazione del tipo, Internet Explorer assegnerà di default type=”button”, mentre tutti gli altri browser (seguendo le specifiche W3C) assegneranno type=”submit”.
Esempi di utilizzo del tag BUTTON
Ecco alcuni esempi di utilizzo del tag BUTTON.
Gli attributi del tag BUTTON
Attributi richiesti
Nessuno.
Attributi opzionali
DTD (Document Type Definition, Definizione del tipo di documento): indica in quali Doctype il tag è consentito. S=Strict, T=Transitional e F=Frameset.
Il tag <button> supporta i seguenti attributi opzionali:
| Attributo | Valore | Descrizione | DTD |
|---|---|---|---|
| disabled | disabled | Specifica se il pulsante è disattivato | STF |
| name | name | Specifica un nome per il pulsante | STF |
| type | button reset submit |
Specifica la tipologia di appartenenza del pulsante | STF |
| value | testo | Specifica un valore che verrà visualizzato come tooltip | STF |
Attributi standard
DTD (Document Type Definition, Definizione del tipo di documento): indica in quali Doctype il tag è consentito. S=Strict, T=Transitional e F=Frameset.
Il tag <button> supporta i seguenti attributi standard:
| Attributo | Valore | Descrizione | DTD |
|---|---|---|---|
| accesskey | carattere | Specifica una scorciatoia da tastiera per un elemento. | STF |
| class | nome classe | Specifica il nome di una classe per un elemento. | STF |
| dir | ltr rtl |
Specifica la direzione del testo all’interno di un elemento. | STF |
| id | id | Specifica un id univoco per un elemento. | STF |
| lang | codice lingua | Può essere utilizzato per indicare il codice della lingua dell’elemento. | STF |
| style | definizione stile | Specifica uno stile in linea per un elemento. | STF |
| tabindex | testo | Specifica l’ordine di tabulazione per un elemento. | STF |
| title | testo | Può essere utilizzato per fornire dati aggiuntivi sull’elemento. | STF |
| xml:lang | codice lingua | Può essere utilizzato, nei documenti XHTML, per indicare il codice della lingua dell’elemento. | STF |
Attributi Evento
Il tag <button> supporta i seguenti eventi Javascript:
| Attributo | Valore | Descrizione | DTD |
|---|---|---|---|
| onblur | script | Specifica uno script da eseguire quando un elemento perde il focus (passa in secondo piano) | STF |
| onclick | script | Specifica uno script da eseguire al click del mouse | STF |
| ondblclick | script | Specifica uno script da eseguire al doppio click del mouse | STF |
| onfocus | script | Specifica uno script da eseguire quando un elemento prende il focus (passa in primo piano). | STF |
| onmousedown | script | Specifica uno script da eseguire quando è premuto il pulsante sinistro del mouse | STF |
| onmousemove | script | Specifica uno script da eseguire al movimento del mouse | STF |
| onmouseout | script | Specifica uno script da eseguire quando il puntatore del mouse esce fuori dall’area dell’elemento | STF |
| onmouseover | script | Specifica uno script da eseguire al passaggio del mouse sull’elemento | STF |
| onmouseup | script | Specifica uno script da eseguire quando viene rilasciato il pulsante sinistro del mouse | STF |
| onkeydown | script | Specifica uno script da eseguire alla pressione di un tasto sulla tastiera | STF |
| onkeypress | script | Specifica uno script da eseguire quando viene premuto e rilasciato un tasto sulla tastiera | STF |
| onkeyup | script | Specifica uno script da eseguire al rilascio di un tasto sulla tastiera | STF |
Browser supportati
Il tag <button> è supportato da tutti i principali browser.
| Firefox | Safari | Chrome | Opera | IE 8 | IE 7 | IE 6 |
|---|---|---|---|---|---|---|
| SI | SI | SI | SI | SI | SI | SI |
L'autore
2 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo