Tag HTML <button>

Definizione e uso

<button> Il tag definisce un pulsante cliccabile.

In <button> All'interno dell'elemento, puoi inserire testo (e tag come <i>, <b>, <strong>, <br>, <img> e così via). Questo è utilizzato <input> Tutto ciò che i pulsanti di creazione degli elementi non possono fare!

Suggerimento:Si prega di specificare sempre <button> elemento specificato proprietà type, per informare il browser del tipo di pulsante.

Suggerimento:Puoi aggiungere facilmente stili ai pulsanti con CSS! Vedi gli esempi di seguito o visita il nostro Tutorial pulsante CSS.

Descrizione dettagliata

<button> Controllo con <input type="button"> fornisce funzionalità più potenti e un contenuto più ricco.<button> con </button> Tutta la contenuto tra i tag è il contenuto del pulsante, inclusi qualsiasi contenuto testuale accettabile, come testi o contenuti multimediali. Ad esempio, possiamo includere un'immagine e il testo correlato per creare un'etichetta visiva accattivante nel pulsante.

L'unico elemento che non deve essere utilizzato è la mappa di immagini, poiché le azioni sensibili al mouse e alla tastiera possono interferire con il comportamento dei pulsanti del modulo.

Si prega di specificare sempre proprietà type. Il valore predefinito di Internet Explorer per il tipo è "button"mentre nel caso degli altri browser (inclusi i criteri di norma W3C) il valore predefinito è "submit".

Vedi anche:

Manuale di riferimento HTML DOM:Oggetto Button

Tutorial CSS:Stile del pulsante

Esempio

Esempio di pulsante cliccabile:

<button type="button">Clicca qui!</button>

try it yourself

Suggerimento:Forniamo ulteriori esempi nella parte inferiore della pagina.

Proprietà

Proprietà Valore Descrizione
autofocus autofocus Specificare che il pulsante deve ottenere automaticamente il focus durante il caricamento della pagina.
disabled disabled Specificare che il pulsante deve essere disabilitato.
form form_id Specificare a quale modulo appartiene il pulsante.
formaction URL

Specificare dove devono essere inviati i dati del modulo al momento della presentazione.

Applicabile solo se type="submit".
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

Specificare come devono essere codificati i dati del modulo prima di inviarli al server.

Applicabile solo se type="submit".
formmethod
  • get
  • post

Specificare come devono essere inviati i dati del modulo (quali metodo HTTP utilizzare).

Applicabile solo se type="submit".
formnovalidate formnovalidate

Specificare che i dati del modulo non devono essere validati al momento della presentazione.

Applicabile solo se type="submit".
formtarget
  • Nome della cornice

Specificare dove deve essere visualizzata la risposta dopo la presentazione del modulo.

Applicabile solo se type="submit".
name Nome Specificare il nome del pulsante.
popovertarget element_id Specificare l'elemento della finestra emergente da chiamare.
popovertargetaction
  • hide
  • show
  • toggle
 Specify the operation on the popup element when the button is clicked.
type
  • button
  • reset
  • submit
 Specify the type of the button.
value Text Specify the initial value of the button.

Global attributes

<button> Tags also support Global attributes in HTML.

event attributes

<button> Tags also support Event attributes in HTML.

Default CSS settings

None.

More examples

Example 2

Set button styles using CSS:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button1 {background-color: #4CAF50;} /* green */
.button2 {background-color: #008CBA;} /* blue */
</style>
</head>
<body>
<button class="button button1">green</button>
<button class="button button2">blue</button>
</body>
</html>

try it yourself

Example 2

Set button styles using CSS (with hover effect):

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}
.button1:hover {
  background-color: #4CAF50;
  color: white;
}
.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}
.button2:hover {
  background-color: #008CBA;
  color: white;
}
</style>
</head>
<body>
<button class="button button1">green</button>
<button class="button button2">blue</button>
</body>
</html>

try it yourself

browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto