diff options
Diffstat (limited to 'files/es/web/html/element/input/button/index.html')
| -rw-r--r-- | files/es/web/html/element/input/button/index.html | 254 |
1 files changed, 254 insertions, 0 deletions
diff --git a/files/es/web/html/element/input/button/index.html b/files/es/web/html/element/input/button/index.html new file mode 100644 index 0000000000..7fbe354405 --- /dev/null +++ b/files/es/web/html/element/input/button/index.html @@ -0,0 +1,254 @@ +--- +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><input type="button"></strong></code> es una versión específica del elemento <strong><code><input></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><input type="reset"></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"><button></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 <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><button> </code>debe ser hijo de un elemento "formulario". Este atributo le permite colocar elementos <code><button></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"><input type="button" value="Click me"></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', '<button>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</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><input type="button"></strong>, el elemento <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><button></a></strong>.</li> +</ul> |