path: root/files/es/web/html/elemento/input/botón/index.html

---
title: <input type ="button">
slug: Web/HTML/Elemento/input/Botón
tags:
  - Elemento
  - Elemento Input
  - HTML
  - Referencia
translation_of: Web/HTML/Element/input/button
---
<p>{{HTMLRef}}</p>

<p><span class="seoSummary">El elemento HTML <code><strong>&lt;input type="button"&gt;</strong></code> es una versión específica del elemento <strong><code>&lt;input&gt;</code></strong><code>,</code> que se usa para crear un botón en el que se puede hacer click sin ningún valor por defecto, es decir, <strong>no tiene un comportamiento predeterminado</strong> como por ejemplo <span class="seoSummary"><code><strong>&lt;input type="reset"&gt;</strong></code></span> <span class="seoSummary">. En HTML5  ha sido sustituido  por el elemento <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button">&lt;button&gt;</a></strong>.</span></span></p>

<p>Los navegadores generan un controlador para un botón clickable sin valor por defecto. El botón puede contener cualquier texto. El controlador puede varíar de un navegador a otro.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorías de contenido</a></th>
   <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenido de flujo</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">contenido de fraseo</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">contenido interactivo</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listado</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">etiquetable</a>, y elementos <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">entregables</a> con <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">contenido asociado a los formularios</a>, contenido evidente.</td>
  </tr>
  <tr>
   <th scope="row">Contenido permitido</th>
   <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Contenido de fraseo</a>.</td>
  </tr>
  <tr>
   <th scope="row">Omisión de etiquetas</th>
   <td>Ninguna, las etiquetas de inicio y cierre son obligatorias.</td>
  </tr>
  <tr>
   <th scope="row">Elementos padre permitidos</th>
   <td>Cualquier elemento que acepte <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenido de fraseo</a>.</td>
  </tr>
  <tr>
   <th scope="row">Interfaz DOM</th>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement" title="The HTMLButtonElement interface provides properties and methods (beyond the &lt;button> object interface it also has available to them by inheritance) for manipulating the layout and presentation of button elements."><code>HTMLButtonElement</code></a></td>
  </tr>
  <tr>
   <th scope="row">Tipo de elemento</th>
   <td>Inline</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributos">Atributos</h2>

<p>Este elemento puede tener cualquiera de los <a href="/en-US/docs/HTML/Global_attributes">atributos globales</a> además de los siguientes:</p>

<dl>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>
 <p>Este atributo booleano indica que el usuario no puede interactuar con el botón. Si este atributo no está especificado, el botón hereda su configuración del elemento contenedor, por ejemplo, {{HTMLElement("fieldset")}}; si no hay elemento contenedor con el atributo <code><strong>disabled</strong></code> establecido, el botón estará habilitado. El valor de control desactivado no es enviado con el formulario y el evento <code>click</code> <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">no será enviado</a> en los controles desactivados.</p>
 </dd>
 <dd>
 <p>Firefox, al contrario que otros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">mantiene por defecto el estado de desactivación dinámico</a> de un {{HTMLElement("button")}} a lo largo de las cargas de la página. Use el atributo {{htmlattrxref("autocomplete","button")}} para controlar esta característica.</p>
 </dd>
 <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt>
 <dd>Este atributo booleano le permite especificar que el botón deba tener el foco cuando la página se cargue, a no ser que el usuario lo anule, por ejemplo, escribiendo en otro cuadro de texto. Únicamente un elemento asociado con los formularios en un documento puede tener este atributo especificado.</dd>
 <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt>
 <dd>El uso de este atributo en un {{HTMLElement("button")}} es algo fuera de lo común, y específico de Firefox. Firefox, por defecto y al contrario de otros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">mantiene por defecto el estado de desactivación dinámico</a> de un {{HTMLElement("button")}} a lo largo de las cargas de la página. Establecer el valor de este atributo a <code>off</code> (<code>autocomplete="off"</code>) desactiva esta característica.</dd>
 <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt>
 <dd>El elemento del formulario con el que el botón está asociado (es <em>dueño del formulario</em>). El valor del atributo debe ser el atributo <strong>id</strong> de un elemento {{HTMLElement("form")}} en el mismo documento. Si este atributo no está especificado, el elemento <code>&lt;button&gt; </code>debe ser hijo de un elemento "formulario". Este atributo le permite colocar elementos <code>&lt;button&gt;</code> en cualquier lugar de un documento, y no únicamento como hijos del elemento {{HTMLElement("form")}}.</dd>
 <dt>{{htmlattrdef("formenctype")}}</dt>
 <dd>Debido a que el elemento de input es un botón de envío, el atributo <code><strong>formenctype</strong></code> especifica el tipo de contenido que se usa para enviar el formulario al servidor. Los valores posibles son:
 <ul>
  <li><code>application/x-www-form-urlencoded</code>: Valor por defecto si el atributo no se especifica.</li>
  <li><code>multipart/form-data</code>: Este valor se usa si un elemento {{HTMLElement("input")}} es usado con el atributo {{htmlattrxref("type","input")}} fijado a <code>file</code>.</li>
  <li><code>text/plain</code></li>
 </ul>

 <p>Si este atributo se especifica, ignora el atributo {{htmlattrxref("enctype","form")}} del formulario dueño del botón.</p>
 </dd>
 <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt>
 <dd>La URI de la aplicación que procesa la información enviada por le botón. Si se especifica se anula el atributo {{htmlattrxref("action","form")}} del formulario dueño del botón.</dd>
 <dt>{{htmlattrdef("formmethod")}}</dt>
 <dd>Debido a que el elemento input es un botón de envío, el atributo <code><strong>formmethod</strong></code> especifica el método HTTP que el navegador utilizará para enviar el formulario. Los valores posibles son:
 <ul>
  <li><code>post</code>: Los datos del formulario son incluidos en su cuerpo y son enviados al servidor.</li>
  <li><code>get</code>: Los datos del formulario son agregados a la URI del formulario, utilizando un símbolo '?' como separador, la URI resultante es enviada al servidor. Use este método cuando el formulario no tenga efectos secundarios y contenga solo caracteres ASCII.</li>
 </ul>

 <p>Si se especifica, este atributo anula el atributo {{htmlattrxref("method","form")}} del formulario dueño del elemento.</p>
 </dd>
 <dt>{{htmlattrdef("formnovalidate")}}</dt>
 <dd>Debido a que el elemento de input es un botón de envío, el atributo <code><strong>formnovalidate </strong></code> especifica que el formulario no debe ser validado cuando sea enviado. Si este atributo es especificado, se anula el atributo {{htmlattrxref("novalidate","form")}} del formulario dueño del elemento. Este atributo es Booleano.</dd>
 <dt>{{htmlattrdef("formtarget")}}</dt>
 <dd>Debido a que el elemento de input es un botón de envío, el atributo <code><strong>formtarget</strong></code> es un nombre o palabra clave que indica donde mostrar la respuesta recibida después de enviar el formulario. Este es un nombre de, o palabra clave para, un <em>contexto navegable</em> (por ejemplo, pestaña, ventana, o inline frame). Si este atributo es especificado, se sobreescribirá el atributo {{htmlattrxref("target", "form")}} del formulario dueño del elemento. Las siguientes palabras claves tienen significados especiales:
 <ul>
  <li>_<code>self</code>: Carga la respuesta en el mismo contexto navegable<em> </em>que el actual. Este valor es el predeterminado si el atributo no es especificado.</li>
  <li><code>_blank</code>: Carga la respuesta en un nuevo contexto navegable sin nombre.</li>
  <li><code>_parent</code>: Carga la respuesta en el contexto navegable padre del actual. Si no hay padre, esta opción se comporta igual que <code>_self</code>.</li>
  <li><code>_top</code>: Carga la respuesta en el contexto navegable superior (es el contexto navegable que es un ancestro del actual y no tiene padre). Si no hay padre, esta opción se comporta igual que <code>_self</code>.</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>El nombre del botón que será enviado con los datos del formulario.</dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>El tipo dle botón. Los valores posibles son:
 <ul>
  <li><code>submit</code>: El botón envía los datos del formulario al servidor. Este es el valor predeterminado si no se especifica el atributo, o si el atributo es cambiado dinámicamente a un valor inválido o vacío.</li>
  <li><code>reset</code>: El botón reinicia todos los controles a sus valores iniciales.</li>
  <li><code>button</code>: El botón no tiene comportamiento predeterminado. Puede haber scripts de la parte del cliente asociados a los eventos del elemento, que serán lanzados cuando el evento ocurra.</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd>El valor inicial del botón.</dd>
</dl>

<h2 id="Ejemplos">Ejemplos</h2>

<p>Se crea un nuevo input tipo botón con el valor 'Click me'. </p>

<pre class="brush: html">&lt;input type="button" value="Click me"&gt;</pre>

<h2 id="Especificaciónes">Especificaciónes</h2>

<table class="standard-table" style="height: 137px; width: 1065px;">
 <tbody>
  <tr>
   <td>Especificación</td>
   <td>Status</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '&lt;button&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '&lt;button&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '&lt;button&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>formenctype</code> attribute</td>
   <td>9.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>10</td>
   <td>10.6</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>formmethod</code> attribute</td>
   <td>9.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>10</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>autofocus</code> attribute</td>
   <td>9.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>10</td>
   <td>9.6</td>
   <td>5.0</td>
  </tr>
  <tr>
   <td><code>formaction</code> attribute</td>
   <td>9.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>10</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>formenctype</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>formmethod</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>formaction</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p> </p>

<h2 id="Ver_también">Ver también</h2>

<p> </p>

<ul>
 <li>El elemento genérico {{HTMLElement("input")}} y la interface usada para manipularlo, {{domxref("HTMLInputElement")}}</li>
 <li>El reemplazo en HTML5 para <strong>&lt;input type="button"&gt;</strong>, el elemento <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button">&lt;button&gt;</a></strong>.</li>
</ul>