Botones

Botones

Un botón es un dispositivo primordialmente diseñado para realizar una acción con el formulario que lo contenga. De echo, existen dos tipos básicos de botones: para enviar el formulario y para reestablecerlo (devuelve todos los campos a sus valores iniciales). Existe sólo un tipo más de botón que no posee una acción predefinida (la misma debe ser especificada con un lenguage del lado cliente).
Los botones pueden insertarse a través del tag HTML input (botones para enviar y reestabler y botones de imagen) o el elemento HTML button (botones de contenido).

Botones de envío

Este tipo de botones envía automáticamente el formulario en que se encuentra cuando es presionado. Es insertado utilizando el tag HTML input con el valor "submit" en su atributo "type".

Código

<form method="post" action="agente.php">
<input type="submit" value="Enviar este formulario" />
</form>

Vista

Botones de reestablecimiento

Este tipo de botones reestablecen los controles en un formulario a sus valores iniciales cuando es presionado. Son insertados con el tag HTML input con el valor "reset" en su atributo "type".

Código

<form method="post" action="agente.php">
<input type="text" name="texto1" value="Valor por defecto" /><br />
<input type="checkbox" name="reglas" checked="checked" /> Acepto las relgas<br />
<input type="reset" value="Reestablecer todos los campos a su valor predeterminado" />
</form>

Vista

Acepto las relgas

En el ejemplo anterior, puedes probar la funcionalidad del botón cambiando los valores de los elementos y presionando el botón para reestablecer los campos a sus valores iniciales.

Botones de imagen

Los botones de imagen funcionan exactamente como los botones de envío con la única diferencia que los de imagen son representados visualmente con la imagen especificada en el atributo "src". Otra particularidad es éstos envían además las coordenadas donde ha ocurrido el click cuando el formulario fue enviado, tomadas desde la esquina superior izquierda del botón (por ejemplo, para un botón de imagen llamado "boton1"las coordenadas serán enviadas en la forma "boton1.x" y "boton1.y").
Los botones de imagen se insertan con el tag HTML input, usando el valor "image" en su atributo "type".

Código

<form method="post" action="agente.php">
<input type="image" src="/img/p/tutorials/forms/3/submit.png">
</form>

Vista

Botones de contenido

Los botones de contenido pueden ser usados como botones de envío o reestablecimiento, o bien pueden no tener ninguna acción preestablecida (dependiendo del valor de su atributo "type"). Pero su características es que permite a los autores inserta contenido dentro de los mismos. Esto significa que una porción de código HTML puede ser mostrado dentro del botón (vínculos, párrafos, texto en negrita, imágenes, etc.).

Código

<form method="post" action="agente.php">
<button type="button">
El <b>tag HTML button</b><br />
permite contenido.
</button>
</form>

Vista