<button>: l'elemento 'pulsante'

L' elemento HTML <button> rappresenta un pulsante selezionabile, utilizzato per inviare moduli o in qualsiasi punto del documento per una funzionalità del pulsante standard accessibile.

Per impostazione predefinita, i pulsanti HTML sono presentati in uno stile simile alla piattaforma su cui viene eseguito lo user agent, ma puoi modificare l'aspetto dei pulsanti con CSS .

Attributi

Se il pulsante è un pulsante di invio, questo attributo booleano specifica che il modulo non deve essere convalidato al momento dell'invio. Se questo attributo viene specificato, sovrascrive l'attributo novalidate del proprietario del modulo del pulsante.

Questo attributo è disponibile anche su elementi <input type="image"> e <input type="submit">.

Se il pulsante è un pulsante di invio, questo attributo è un nome definito dall'autore o una parola chiave standardizzata con prefisso di sottolineatura che indica dove visualizzare la risposta dall'invio del modulo. Questa è la parola chiave per un contesto di navigazione (scheda, finestra o <iframe>). Se questo attributo viene specificato, sovrascrive l'attributo target del proprietario del modulo del pulsante. Le seguenti parole chiave hanno significati speciali:

• _self: carica la risposta nello stesso contesto di navigazione di quello corrente. Questa è l'impostazione predefinita se l'attributo non è specificato.
• _blank: carica la risposta in un nuovo contesto di navigazione senza nome, in genere una nuova scheda o finestra, a seconda delle impostazioni del browser dell'utente.
• _parent: carica la risposta nel contesto di navigazione principale di quello corrente. Se non è presente alcun genitore, questa opzione si comporta allo stesso modo di _self.
• _top: carica la risposta nel contesto di navigazione di primo livello (ovvero, il contesto di navigazione che è un predecessore di quello corrente e non ha un genitore). Se non è presente alcun genitore, questa opzione si comporta allo stesso modo di _self.

Il nome del pulsante, inviato in coppia con i pulsanti value come parte dei dati del modulo, quando quel pulsante viene utilizzato per inviare il modulo.

Il comportamento predefinito del pulsante. I valori possibili sono:

• submit: Il pulsante invia i dati del modulo al server. Questa è l'impostazione predefinita se l'attributo non è specificato per i pulsanti associati a <form>, o se l'attributo è un valore vuoto o non valido.
• reset: Il pulsante ripristina tutti i controlli ai valori iniziali, come <input type="reset">. (Questo comportamento tende a infastidire gli utenti.)
• button: Il pulsante non ha un comportamento predefinito e non fa nulla se premuto per impostazione predefinita. Può fare in modo che gli script lato client ascoltino gli eventi dell'elemento, che vengono attivati ​​quando si verificano gli eventi.

Definisce il valore associato al pulsante namequando viene inviato con i dati del modulo. Questo valore viene passato al server in parametri quando il modulo viene inviato utilizzando questo pulsante.

autofocus

Questo attributo booleano specifica che il pulsante deve avere lo stato attivo per l'input quando la pagina viene caricata. Solo un elemento in un documento può avere questo attributo.

disabled

Questo attributo booleano impedisce all'utente di interagire con il pulsante: non può essere premuto o focalizzato.

Firefox, a differenza di altri browser,persiste lo stato dinamico disabilitato di un <button> su più pagine. Utilizzare l'attributo autocomplete per controllare questa funzione.

form

L'elemento <form> a cui associare il pulsante ( proprietario del modulo). Il valore di questo attributo deve essere quello id di un <form> nello stesso documento. (Se questo attributo non è impostato, <button> è associato al suo elemento antenato <form>, se presente.)

Questo attributo ti consente di associare elementi <button> a <form> ovunque nel documento, non solo all'interno di un file <form>. Può anche sovrascrivere un elemento antenato <form>.

formaction

L'URL che elabora le informazioni inviate dal pulsante. Sostituisce l'attributo action del proprietario del modulo del pulsante. Non fa nulla se non c'è il proprietario del modulo.

formenctype

Se il pulsante è un pulsante di invio (è all'interno/associato a un <form> e non ha type="button" ), specifica come codificare i dati del modulo inviato. Possibili valori:

• application/x-www-form-urlencoded: Il valore predefinito se l'attributo non viene utilizzato.
• multipart/form-data: utilizzare per inviare elementi <input> con i relativi attributi type impostati su file.
• text/plain: Specificato come ausilio per il debug; non deve essere utilizzato per l'invio di moduli reali.

Se questo attributo viene specificato, sovrascrive l'attributo enctype del proprietario del modulo del pulsante.

formmethod

Se il pulsante è un pulsante di invio (è all'interno/associato a <form> e non ha type="button"), questo attributo specifica il metodo HTTP utilizzato per inviare il modulo. Possibili valori:

• post: I dati del modulo sono inclusi nel corpo della richiesta HTTP quando vengono inviati al server. Da utilizzare quando il modulo contiene informazioni che non dovrebbero essere pubbliche, come le credenziali di accesso.
• get: I dati del modulo vengono aggiunti all'URL del modulo, con un ? come separatore, e l'URL risultante viene inviato al server. Utilizzare questo metodo quando il modulo non ha effetti collaterali, come i moduli di ricerca.

Se specificato, questo attributo sovrascrive l'attributo method del proprietario del modulo del pulsante.

Appunti

Un pulsante di invio con l'attributo formaction impostato, ma senza un modulo associato non fa nulla. Devi impostare un proprietario del modulo, avvolgendolo in un <form> o impostando l'attributo form sull'id del modulo.

Gli elementi <buttton> sono molto più facili da definire rispetto agli elementi <input>. Puoi aggiungere contenuto HTML interno (pensa a <i>, <br> o anche <img> ) e utilizzare gli pseudo-elementi ::after e ::before per rendering complessi.

Se i tuoi pulsanti non servono per inviare i dati del modulo a un server, assicurati di impostare il loro attributo type su button. In caso contrario cercheranno di inviare i dati del modulo e di caricare la risposta (inesistente), eventualmente distruggendo lo stato attuale del documento.

Esempio

<button name="button">Cliccami</button>