button
======

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
---------------


```html
<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):

* What is an accessible name? | The Paciello Group
* MDN Understanding WCAG, Guideline 4.1 explanations (en-US)
* Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0
### 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):

* Hand tremors and the giant-button-problem - Axess Lab
Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # the-button-element |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Referencia
----------

* El elemento button en el estándar HTML 4.01

---

**Nota:** 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.