Valor IMAGE del atributo "type" del elemento input


"image" introduce un botón definido por una imagen, en vez del formato estándar de botones, con lo que podemos así personalizar el botón. 

Admite los parámetros:
  • name="nombre", que asigna un nombre al botón para identificarlo de forma única y poder así acceder luego a sus propiedades.
  • src= "ruta imagen", que establece la ruta dónde localizar el fichero de imagen. Esta ruta puede ser relativa al directorio web en el servidor o una URL absoluta que define unívocamente la localización de la imagen.
  • width= "w", que fija la anchura del botón de imagen.
  • height= "h", que fija la altura del botón de imagen.
  • align= "left / middle / right / bottom / baseline...", que define la posición del texto que rodea el botón respecto a este.
  • hspace= "x", que fija el espacio horizontal que habrá entre el botón y el texto que lo circunda.
  • vspace= "x", que fija el espacio vertical que habrá entre el botón y el texto que lo circunda.
  • alt = "texto", que asocia un texto explicativo al botón de imagen. Al situar el cursor encima del botón se mostrara este texto en forma de tip de Windows. Siempre es conveniente poner este atributo, para que en caso de navegadores de sólo texto, de que la imagen no se encuentre en la ruta por cualquier motivo o de que la pagina tarde mucho en cargarse por su peso, el usuario puede ver qué hace el botón de imagen y pueda en consecuencia utilizarlo para tal fin.
  • disabled, que desactiva el botón, de tal forma que no se produce ninguna acción cuando se pulsa, pues permanece inactivo
  • tabindex = "n", que especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.
  • usemap= "#nombre de mapa", que nos permite el uso de un mapa de imágenes en el cliente como un dispositivo mas de entrada de datos.
Ejemplo:

< form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miform">
  <input type="image" name="boton" src="images/1.jpg" width="50" height="20" hspace="10" align="middle">
< /form>
con el que obtenemos:

pulsa aquí

Imagenes de botones: botón color verde a la izquierda dedo pulgar para arriba utilizado para indicar "me gusta". Botón rojo a la derecha, dedo pulgar hacia abajo para indicar "no me gusta"



Fuentes: Activate, Google España
  
 

Comentarios

Entradas populares de este blog

Códigos Hex de color

Enlaces Intradocumentales

Etiqueta header HTML5