Definición

button = botón.

Es el elemento crea botones marcadores.

La etiqueta de HTML <button> representa un elemento cliqueable de tipo botón que puede ser utilizado en formularios o en cualquier parte de la página que necesite un botón estándar y simple de aplicar. De forma predeterminada, los botones HTML se presentan con un estilo similar en todas las plataformas, estos estilos se pueden cambiar utilizando CSS.

Sus etiquetas son: <button> y </button> (ambas obligatorias).
Crea una caja: en linea.
Está definido como: Elemento de control para formulario.
Puede contener: Texto y/o cero o más elementos en Bloque o en linea, con las siguientes excepciones: (A|%formctrl;|FORM|FIELDSET)

Atributos

atributo descripción valor por omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip". Texto legible. Sensible a M/m.. Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento. Un nombre único. Sensible a M/m. Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS. Lista de clases separadas por espacio en blanco. Sensible a M/m. cdata Lo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS. Declaraciones de estilo. Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos. Un código de idioma. Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas. Uno de los siguientes: 'ltr' o 'rtl'. Lo fija el navegador. PD.: En castellano 'ltr'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
name Asigna un nombre de control. Texto con limitaciones Lo fija el navegador.
value Asigna un valor inicial que será enviado con el formulario. Texto Lo fija el navegador.
type Indica el tipo de botón. Uno de los siguientes: (button|submit|reset) PD.: submit.
disabled Indica que el control está desabilitado. disabled. Lo fija el navegador. disabled.
accesskey Define una tecla de acceso rápido. Importante para la Accesibilidad. Un carácter o letra. Lo fija el navegador.
tabindex Asigna un número de posición en el orden de tabulación. Un número entre 0 y 32767. Lo fija el navegador.
reserved Reservado para un uso futuro que nunca tubo. Inútil - -
Eventos: onfocus onblur
De transición
No tiene
atributo descripción valor por omisión

Ejemplos de uso

<button name="button">Click me</button>

Sobre Accesibilidad

Botones con íconos

Los botones que solamente utilizan un ícono para representar una funcionalidad no tienen un nombre accesible para los lectores de no-videntes. Para arreglar esto debemos proveer un nombre para el botón que describa la funcionalidad de este.

Ejemplo

<button name="favorito" type="button">
  <svg aria-hidden="true" viewBox="0 0 10 10"><path d="m7.4 8.8-2.4-1.3-2.4 1.3.46-2.7-2-1.9 2.7-.39 1.2-2.5 1.2 2.5 2.7.39-1.9 1.9z"/></svg>
  Agregar a favoritos
</button>

Esto también ayudará a los usuarios videntes que no estén familiarizados con el significado del ícono ya que podrán entender su significado pasando el cursor por encima del elemento.

Para más información (en inglés):

Proximidad

Si el sitio tiene una gran cantidad de elementos interactivos muy cercanos entre ellos esto puede generar una dificultad en los usuarios con discapacidades motrices. Es ideal que estos elementos tengan una separación para evitar que el usuario cliquee el incorrecto. Puedes utilizar la propiedad margin para separarlos.

Más información (en inglés):

Soporte

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Soporte básicoChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
autofocusChrome Soporte completo 5Edge Soporte completo SiFirefox Soporte completo 4IE Soporte completo 10Opera Soporte completo 9.6Safari Soporte completo 5WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Soporte completo 4Opera Android ? Safari iOS ? Samsung Internet Android ?
autocomplete
No estándar
Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo SiIE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoEdge Mobile Sin soporte NoFirefox Android Soporte completo SiOpera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
disabledChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
formChrome Soporte completo SiEdge Soporte completo 16Firefox Soporte completo SiIE Sin soporte NoOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
formactionChrome Soporte completo 9Edge Soporte completo SiFirefox Soporte completo 4IE Soporte completo 10Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android ? Safari iOS ? Samsung Internet Android ?
formenctypeChrome Soporte completo 9Edge Soporte completo SiFirefox Soporte completo 4IE Soporte completo 10Opera Soporte completo 10.6Safari ? WebView Android ? Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android ? Safari iOS ? Samsung Internet Android ?
formmethodChrome Soporte completo 9Edge Soporte completo SiFirefox Soporte completo 4IE Soporte completo 10Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android ? Safari iOS ? Samsung Internet Android ?
formnovalidateChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
formtargetChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
nameChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
typeChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
valueChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
No estandar . Esperar poco soporte entre navegadores.
No estandar . Esperar poco soporte entre navegadores.

Referencia


Estamos ampliando este documento, posiblemente contenga carencias y defectos. ¡Estamos en obras!... disculpen las molestias.

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

 

Etiquetas y colaboradores del documento

Colaboradores en esta página: MarielaBR, evaferreira, Sebastianz, jigs12, oece, teoli, ethertank, Jorolo
Última actualización por: MarielaBR,