Vamos a revisar en este sencillo post los atributos height y width HTML5. Dichos atributos de alto y ancho solo se pueden aplicar a los input de tipo ‘image’, así de esta manera podemos jugar con las dimensiones de la imagen que sustituye al botón de enviar formularios.
Recomiendo meter un input de tipo ‘image’ por formulario para no liar al navegador a resolver el submit a ejecutar.
Sintaxis de los atributos height y width HTML5
Según la documentación oficial la sintaxis de estos atributos HTML5 es:
|
1 |
<input type="image" src="ruta_imagen.jpg" alt="Enviar" width="100" height="50"> |
Tal y como veis la sintaxis es idéntica a la que se suele poner en las etiquetas ‘img’.
Ejemplo de los atributos height y width HTML5
He preparado este ejemplo de los atributos con el mismo código que la sintaxis superior para que los veais funcionando:
|
1 2 3 4 |
<form action="/demos/2014/030-ejemplo-atributos-height-width-html5.php" method="POST"> Nombre: <input type="text" name="nombre"><br><br> <input type="image" src="/wp-content/uploads/2013/04/html5.png" alt="Enviar" width="100" height="50"> </form> |
En el código superior podéis ver un formulario con método POST, que contiene un input de tipo ‘text’ y otro de tipo ‘image’ con los mencionados atributos height y width.
Solo tenemos que entrar en la url del ejemplo y comprobar el funcionamiento.
Listado de los nuevos atributos HTML5
En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.
Listado de los nuevos input HTML5
En esta url tenéis el listado completo de los nuevos input de HTML5.