El elemento <button> tiene la finalidad de crear botones que el usuario puede clicar. Los botones creados con este elemento pueden ser utilizados tanto en formularios como en cualquier parte de una página web, pues su implementación es sencilla. La apariencia de los botones se puede modificar con CSS.
Se trata de un elemento con múltiples propósitos. Con la ayuda del atributo type se puede especificar la finalidad de cada botón; por ejemplo: un botón estándar, un botón para enviar datos o uno para restaurar los datos del formulario. Dependiendo del valor de type, la disponibilidad de sus atributos variará.
Este elemento es de línea, es decir, que ocupa el mínimo espacio horizontal. Esto permite que otros elementos de línea quepan a sus lados sin saltar de línea. Tiene dos etiquetas: <button> (de apertura) y </button> (de cierre).
En contraste con los botones del elemento <input>, el elemento <button> no sólo puede contener texto, sino que también puede contener otros elementos no interactivos, ya sean de línea o de bloque.
Lista de valores del atributo type:
| Valor | Descripción |
|---|---|
button | Botón regular sin una acción asociada. |
submit | Botón que envía los datos del formulario. |
reset | Botón que restaura los campos del formulario. |
Botón de tipo ‘button’
El elemento <button> con el atributo type='button' crea un botón regular que no tiene ninguna acción asociada por defecto. Generalmente, las acciones se declaran con JavaScript a través de eventos. Si el botón no se asocia a ninguna acción, no realizará nada, como es lógico. Es simplemente un botón.
Es posible asociar acciones a través de los siguientes eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown y onkeyup.
La etiqueta descriptiva del botón se introduce a través del contenido del elemento. De este modo, podemos introducir texto con varios formatos y todo tipo de elementos de contenido dinámico, como una imagen.
Ejemplo de código HTML de un botón con texto formateado:
<button type='button'>Texto en <strong>negrita</strong>, en <em>cursiva</em> y <u>subrayado</u>.</button>
Resultado:
En el ejemplo siguiente, creamos un botón con una acción asociada a través del evento de JavaScript onclick: la acción se ejecutará cuando el usuario haga clic sobre el botón. En este caso, aparecerá un mensaje de alerta.
<button type='button' onclick='alert("¡Hola!")'>Saluda al visitante</button>
Haz clic sobre el botón para ver el resultado:
Botón de tipo ‘submit’
El elemento <button> con el atributo type='submit' crea un botón con una acción asociada: la de enviar los datos de los campos del formulario al que pertenece. Por tanto, es conveniente usar este elemento en asociación con un formulario concreto. La asociación se hace con el atributo form.
La etiqueta descriptiva del botón es el contenido que se introduce entre las etiquetas <button> y </button>. Si se quiere puede introducirse sólo texto, al igual que ocurre con el elemento <input> y el atributo type=submit, pero el elemento <button> permite cualquier contenido.
Ejemplo de código HTML de un botón de enviar:
<button type='submit'>Enviar</button>
Resultado:
Este botón de ejemplo no envía datos porque no está asociado a un formulario.
Atributos específicos del botón ‘submit’
Con la llegada de HTML5 se añadieron nuevos atributos a este elemento que permiten definir y anular parámetros previamente definidos en el elemento del formulario (<form>). Así podemos crear varios botones de envío independientes en un mismo formulario, cada uno con unas propiedades diferentes.
A continuación se describe los atributos específicos. Los atributos comunes entre los tres tipos de botón se describen al final de este artículo.
El atributo ‘formaction’
El atributo formaction especifica la ubicación del programa que llevará a cabo el procesamiento de los datos recolectados por el formulario. En general se trata de un programa escrito en un lenguaje del lado del servidor.
El atributo ‘formenctype’
Gracias al atributo formenctype es posible indicar el tipo de medio (MIME type) de la información antes de que sea enviada al servidor. Los valores de este atributo son, específicamente, los siguientes:
application/x-www-form-urlencoded: valor por defecto. Los caracteres se codifican antes de ser enviados: los espacios se convierten en+, y los caracteres especiales se convierten en valores HEX.multipart/form-data: valor que permite subir archivos binarios al servidor. En este caso, los datos no se codifican.text/plain: los datos no se codifican y se envían en texto plano. En este caso, los espacios también se convierten en el símbolo+.
El atributo ‘formmethod’
Con el atributo formmethod se puede indicar el método que se usará para enviar los datos contenidos en el formulario. Este atributo tiene dos valores posibles: GET y POST. Con GET la información se envía añadiendo las variables a la URL, y con POST la información se encapsula en el cuerpo de la petición HTTP.
El atributo ‘formnovalidate’
El atributo formnovalidate se utiliza para cuando queremos que los datos del formulario no se validen durante su envío. Al tratarse de un atributo binario, no necesita que se especifique ningún valor. Por tanto, añadir este atributo implica que los datos no se validarán cuando sean enviados.
El atributo ‘formtarget’
El atributo formtarget es idéntico al atributo target utilizado en los enlaces y en los formularios. Con este atributo se indica el contexto de navegación en el que debe cargarse la respuesta recibida después de haber enviado el formulario. Puede contener los valores siguientes:
_blank: la respuesta se abre en una nueva pestaña del navegador._parent: la respuesta se abre en el contexto de navegación padre._self: la respuesta se abre en el mismo contexto de navegación._top: la respuesta se abre en el contexto de navegación más alto.
Botón de tipo ‘reset’
El elemento <button> con el atributo type='reset' crea un botón que tiene por defecto la acción de restaurar los valores del formulario. En este sentido, es importante que el botón esté asociado con un formulario concreto. Como en el botón anterior, la asociación también se realiza con el atributo form.
El contenido que se introduce entre las etiquetas <button> y </button> será el que se muestre dentro del botón. A diferencia del elemento <input> junto con el atributo type='reset', el presente elemento puede contener todo tipo de elementos de contenido dinámico no interactivos.
En resumen, este tipo de botón permite restaurar el valor inicial de los controles contenidos en un formulario. El valor inicial de los controles se establece mediante el atributo value de forma individual para cada control. Los atributos checked y selected también pueden marcar opciones por defecto.
Ejemplo de código HTML de un botón de restaurar:
<button type='reset'>Restaurar</button>
Resultado:
Este botón de ejemplo no restaura datos porque no está asociado a un formulario.
Lista de atributos comunes en todos los tipos de botón
El atributo autofocus coloca el enfoque sobre este control interactivo cuando el documento HTML termina de cargarse. Se trata de un atributo binario y no requiere valor. Su inclusión activa esta función.
El atributo disabled deshabilita el control interactivo, en este caso: el botón. Esto implica que aparecerá de color gris y no se podrá clicar. Es un atributo binario que tampoco necesita contener un valor.
Con el atributo form se crea la asociación entre el botón y el formulario al que debe pertenecer. Es importante que el valor de este atributo coincida con el valor del atributo id del elemento de formulario (<form>).
El atributo name tiene la finalidad de asignar un nombre al botón. El nombre asignado se enviará al servidor junto con el contenido del atributo value en caso de estar declarado. Se usará para procesar la información.
El atributo type —ya ha explicado al principio de este artículo— es el que define el tipo de botón que se quiere crear. Los tres valores posibles son: button, submit y reset. El valor menu es antiguo y quedó obsoleto.
Finalmente, el atributo value permite definir un valor por defecto para el botón. Tal y como y a se ha dicho, este valor será enviado al servidor junto con el valor del atributo name, formando la pareja «nombre-valor».
