input type=”image”

La etiqueta <input> en HTML tiene como valor 'image' en su atributo type, input type=”image”, esto simboliza a un botón de envío gráfico, es decir es una imagen normal pero al ser presionada, envía el contenido del formulario al que pertenece este control.

Uno de sus funcionalidades de este control de botón de envío con imagen, cuando una vez es enviada el contenido del formulario, se incluye al envío las coordenadas donde el click ha sido hecha las medidas son en píxeles y desde la esquina superior izquierdo. Esta funcionalidad es de Gran utilidad a la hora de indicarle al usuario final qué área de la imagen quiere seleccionar dentro del formulario, pero nosotros debemos estar atentos a las dificultades de lo que se podría mostrar en los navegadores que no podrían soportar el imagen envió correctamente del contenido del formulario.

Con la llegada de HTML5, se agregaron varios atributos a esta etiqueta los cuales son: formtarget, formaction, formnovalidate, formenctype y formmethod.  Atributos anulan ciertos parámetros relacionados con el envío del formulario, como por ejemplo para un envío sin rellenar el formulario.

ejemplos:

En este presente ejemplo de input type=”image”, tenemos un formulario con dos controles de texto lo cual Pide al usuario ingresar su nombre y su apellido, así también tenemos un botón de envío gráfico, lo cual una vez hecho click en este botón de envío gráfico, enviará automáticamente el contenido del formulario, así también enviará las coordenadas en dónde has hecho click dentro del botón de envío gráfico.

Así como también tenemos tenemos el atributo method, esto indica al formulario con qué método será enviado, el valor es get, con este valor nos permitirá ver en el url los componentes que están enviando, así como también se incluirá las coordenadas del click a partir del control de botón de envío gráfico, como usted verá la funcionalidad de este control en el url, el nombre del botón será separado por un punto (.) en la posición (x) y en la posición (y), este (.) lo cual en el servidor será reemplazado por un guion (-).

<form style="background-color: #3f6a9e;" method="get">
    <fieldset>
        <legend>image</legend>
        <p>Campo de imagen: <br>
           <input type="text" placeholder="nombre" required name="nombre">
           <input type="text" placeholder="apellido" required name="apellido">
            <input type="image" name="boton" src="/1.png">
         </p>
    </fieldset>
</form>

 

image

Campo de imagen: