Elemento input (type=button)

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento input, teniendo el valor "button" en su atributo type, representa un botón sin una acción predefinida asociada, lo que significa que por defecto, el botón no producirá ningún efecto cuando sea presionado. Estos botones son normalmente utilizados con programas del lado cliente que son ejecutados cuando el usuario los presiona.

El atributo value tiene un significado particular para este elemento: representa la etiqueta del botón, la cual es normalmente mostrada por los navegadores dentro de éste.

En contraste con los botones de envío y restauración que tienen etiquetas predeterminadas (que se usan cuando el atributo value está ausente), este tipo de botones puede tener a la cadena vacía como etiqueta.

Ejemplos

En este ejemplo crearemos un pequeño formulario con un par de campos y un botón de cada tipo ("submit", "reset" y "button"). Como no asociaremos al último botón con un programa, podrás comprobar que no hace nada cuando es presionado.

<form action="../../form-result.php" method="post" target="_blank">
  <p>Nombre: <input type=""text" name="nombrecompleto" value="Jhon Doe"></p>
  <p><label><input type="checkbox" name="myorde18"> Soy mayor de 18 años</label></p>
  <p>
    <input type="submit" value="Enviar">
    <input type="reset" value="Restaurar">
    <input type="button" value="Yo no hago nada">
  </p>
</form>

Nombre:

Ahora, usaremos un botón para ejecutar un programa. Este programa ha sido definido en otro lugar y cambia el color del elemento padre del botón (en este caso un elemento p) cuando se ejecuta.

<p><input type="button" value="Conseguí trabajo!" onclick="changeColor(this.parentNode)"></p>

Atributos

Atributos específicos

autofocus

Un valor booleano que instruye al navegador a establecer el enfoque sobre este control cuando el documento termina de cargarse o cuando el cuadro de diálogo (dialog) donde el control se encuentra es mostrado. Si el atributo tiene el valor "autofocus" o la cadena vacía (""), o si simplemente está presente, el control debería obtener el enfoque tan pronto como sea posible, luego de que la página o cuadro de diálogo hayan sido cargados.

Ejemplo

<p><input type="button" value="Cambiar color" autofocus></p>

disabled

Un valor booleano que indica si el control se encuentra deshabilitado o no. Si el atributo toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el control estará deshabilitado.

Los controles deshabilitados son representados en color gris (si son visibles), son impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen) no son enviados cuando el formulario es despachado.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>Apodo: <input type="text" name="apodo"></p>
  <p>
    <input type="submit" value="Enviar">
    <input type="button" value="Comprobar disponibilidad" disabled>
  </p>
</form>

Apodo:

form

El valor del atributo id del formulario con el que este control está asociado.

Este atributo es nuevo en HTML5 y ayuda a definir la pertenencia de los controles en formularios anidados o distantes.

Ejemplo

<form id="formulario1" action="../../form-result.php" method="post" target="_blank">
  <p>Nombre del producto: <input type="text" name="nombreproducto"></p>
</form>
<p><input type="button" value="Comprobar base de datos" form="formulario1" onclick="comprobarBD()"></p>

name

Un nombre para el control. Este nombre será enviado por el navegador al agente procesador, emparejado con el contenido del atributo value. Ambos atributos juntos conformarán un par nombre-valor que será utilizado para procesar la información del formulario.

Actualmente, el valor isindex, antiguamente utilizado de manera especial por algunos navegadores e incluido en el estándar HTML, no está permitido en este atributo.

El par nombre-valor de un botón es enviado, con el resto de los datos en el formulario, sólo si el botón ha sido utilizado para enviar el formulario.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>Anuncio: <input type="text" name="anuncio"></p>
  <p>
    <input type="submit" value="Enviar">
    <input type="button" name="solounboton" value="Soy solo un botón">
  </p>
</form>

Anuncio:

type

Un valor que indica el tipo de campo que representa este elemento. Existen veintidós valores posibles (insensibles a mayúsculas/minúsculas):

  • hidden: un control oculto utilizado para enviar información al servidor, típicamente manejado por programas.
  • text: un control usado para la entrada de una sola línea de texto.
  • search: igaul a text pero con fines de búsqueda.
  • tel: un control usado para proveer un número de teléfono.
  • url: una caja de texto usada para el ingreso de un único URL absoluto.
  • email: un control diseñado para editar una o más direcciones de e-mail.
  • password: una caja de texto para la edición de contraseñas, donde los caracteres son representados por puntos.
  • date: un control para ingresar una fecha específica.
  • month: un control para ingresar un mes específico.
  • week: un control para ingresar una semana específica.
  • time: un control para ingresar una hora específica.
  • datetime-local: un control para ingresar una fecha y hora local específica.
  • number: un control para ingresar un número.
  • range: un control para ingresar uno o dos números dentro de un rango.
  • color: un control para ingresar un color.
  • checkbox: un control para ingresar un valor booleano (verdadero/falso).
  • radio: un control para elegir una única opción entre varias.
  • file: un control usado para subir archivos al servidor.
  • submit: un botón usado para enviar el formulario.
  • image: igual a submit pero con la habilidad de verse como una imagen en lugar de usar la apariencia predeterminada de los botones.
  • reset: un botón usado para reiniciar los controles del formulario a sus valores iniciales.
  • button: un botón sin una acción predeterminada asociada.

Cuando este atributo está ausente, el elemento se comporta como si tuviera el valor "text".

Ejemplo

<p><input type="button" value="Change size" onclick="changeSize()"></p>

value

Un valor para el control. Este valor será enviado por el navegador al agente procesador, emparejado con el contenido del atributo name. Ambos atributos juntos conformarán un par nombre-valor que será utilizado para procesar la información del formulario.

Adicionalmente, los navegadores usarán el contenido de este atributo como etiqueta para el botón.

El par nombre-valor de un botón es enviado, con el resto de los datos en el formulario, sólo si el botón ha sido utilizado para enviar el formulario.

Los agentes procesadores encontrarán escasa utilidad en el par nombre-valor pasado por un botón. En cambio, el atirbuto value tiene una tarea más importante al proveer la etiqueta que los navegadores mostrarán como contenido del botón.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>Buscar: <input type="search" name="cadenabuscada" value="Amor"></p>
  <p>
    <input type="submit" value="Buscar">
    <input type="button" name="botonhacernada" value="Yo no hago nada">
  </p>
</form>

Buscar:

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.