1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
|
---
title: button
slug: Web/HTML/Element/button
tags:
- HTML
- HTML:Elemento
- Todas_las_Categorías
translation_of: Web/HTML/Element/button
original_slug: Web/HTML/Elemento/button
---
<h2 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h2>
<p><strong>button</strong> = botón.</p>
<p>Es el elemento crea botones marcadores.</p>
<p><span class="seoSummary">La etiqueta de<strong> HTML <code><button></code> </strong>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.</span> De forma predeterminada, los botones HTML se presentan con un estilo similar en todas las plataformas, estos estilos se pueden cambiar utilizando <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>.</p>
<dl>
<dd><strong>Sus etiquetas son</strong>: <button> y </button> (ambas obligatorias).</dd>
<dd><strong>Crea una caja</strong>: en linea.</dd>
<dd><strong>Está definido como</strong>: <a href="/es/docs/HTML/Elemento/Tipos_de_elementos#de_frase" title="HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de control para formulario</a>.</dd>
<dd><strong>Puede contener</strong>: Texto y/o cero o más elementos <a href="/es/docs/HTML/Elemento/Tipos_de_elementos#en_linea" title="HTML/Elemento/Tipos_de_elementos#en_linea">en Bloque</a> o <a href="/es/docs/HTML/Elemento/Tipos_de_elementos#en_linea" title="HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>, con las siguientes excepciones: (A|%formctrl;|FORM|FIELDSET)</dd>
</dl>
<h2 id="Atributos" name="Atributos">Atributos</h2>
<table class="fullwidth-table standard-table">
<tbody>
<tr>
<th>atributo</th>
<th>descripción</th>
<th>valor</th>
<th>por omisión</th>
</tr>
<tr>
<th colspan="4">Genéricos</th>
</tr>
<tr>
<td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td>
<td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td>
<td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td>
<td>Lo fija el navegador.</td>
</tr>
<tr>
<td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td>
<td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td>
<td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td>
<td>Lo fija el navegador.</td>
</tr>
<tr>
<td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td>
<td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td>
<td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td>
<td>Lo fija el navegador.</td>
</tr>
<tr>
<td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td>
<td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td>
<td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td>
<td>Lo fija el navegador.</td>
</tr>
<tr>
<td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td>
<td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td>
<td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td>
<td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td>
</tr>
<tr>
<td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td>
<td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td>
<td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td>
<td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: En castellano 'ltr'.</td>
</tr>
<tr>
<td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td>
</tr>
<tr>
<th colspan="4">Específicos</th>
</tr>
<tr>
<td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">name </span></a></td>
<td>Asigna un <a class="external" href="http://html.conclase.net/w3c/html401-es/interact/forms.html#control-name">nombre de control</a>.</td>
<td>Texto <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">con limitaciones</a></td>
<td>Lo fija el navegador.</td>
</tr>
<tr>
<td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">value </span></a></td>
<td>Asigna un valor inicial que será enviado con el formulario.</td>
<td>Texto</td>
<td>Lo fija el navegador.</td>
</tr>
<tr>
<td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">type </span></a></td>
<td>Indica el tipo de botón.</td>
<td>Uno de los siguientes: (button|submit|reset)</td>
<td><abbr title="Por defecto">PD.</abbr>: submit.</td>
</tr>
<tr>
<td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">disabled </span></a></td>
<td>Indica que el control está desabilitado.</td>
<td>disabled.</td>
<td>Lo fija el navegador. disabled.</td>
</tr>
<tr>
<td><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/forms.html#adef-accesskey"><span style="color: green;">accesskey </span></a></td>
<td>Define una tecla de acceso rápido. Importante para la <a href="/es/docs/Accesibilidad" title="Accesibilidad">Accesibilidad</a>.</td>
<td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-character">carácter</a> o letra.</td>
<td>Lo fija el navegador.</td>
</tr>
<tr>
<td><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/forms.html#adef-tabindex"><span style="color: green;">tabindex </span></a></td>
<td>Asigna un número de posición en el orden de tabulación.</td>
<td>Un número entre 0 y 32767.</td>
<td>Lo fija el navegador.</td>
</tr>
<tr>
<td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">reserved </span></a></td>
<td>Reservado para un uso futuro que nunca tubo. Inútil</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td colspan="4"><strong>Eventos</strong>: <code style="color: green;"> onfocus onblur </code></td>
</tr>
<tr>
<th colspan="4">De transición</th>
</tr>
<tr>
<td colspan="4">No tiene</td>
</tr>
<tr>
<th>atributo</th>
<th>descripción</th>
<th>valor</th>
<th>por omisión</th>
</tr>
</tbody>
</table>
<h2 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h2>
<pre class="brush:html"><button name="button">Click me</button>
</pre>
<h2 id="Soporte" name="Soporte">Sobre Accesibilidad</h2>
<h3 id="Botones_con_íconos">Botones con íconos</h3>
<p>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.</p>
<h4 id="Ejemplo">Ejemplo</h4>
<pre><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>
</pre>
<p>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.</p>
<p>Para más información (en inglés):</p>
<ul>
<li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">What is an accessible name? | The Paciello Group</a></li>
<li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust#Guideline_4.1_—_Compatible_Maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">MDN Understanding WCAG, Guideline 4.1 explanations</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h3 id="Proximidad">Proximidad</h3>
<p>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 <code>margin</code> para separarlos.</p>
<p>Más información (en inglés):</p>
<ul>
<li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem - Axess Lab</a></li>
</ul>
<h2 id="Soporte" name="Soporte">Soporte</h2>
<div class="hidden">La tabla de compatibilidad se genera automáticamente con datos estructurados. Si te gustaría colaborar puedes encontrar más información por <a href="https://github.com/mdn/browser-compat-data">acá y enviarnos un pull request</a>.</div>
<p>{{Compat("html.elements.button")}}</p>
<h2 id="Referencia" name="Referencia">Referencia</h2>
<ul>
<li>El elemento <a href="/es/docs/HTML/Elemento/button" title="HTML/Elemento/button">button</a> en el estándar <a class="external" href="http://html.conclase.net/w3c/html401-es/interact/forms.html#h-17.5">HTML 4.01</a></li>
</ul>
<hr>
<div class="note">
<p>Estamos ampliando este documento, posiblemente contenga carencias y defectos. ¡Estamos en obras!... disculpen las molestias.</p>
<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a href="/es/docs/Project:Como_ayudar" title="Project:Como_ayudar">MDC:Como ayudar</a>.</p>
</div>
<p> </p>
|
