Formularios simpáticos con HTML

Lo primero que deciros que me ha dado tiempo a terminar el curso de introducción al desarrollo de apps para móvil ¡Bien!! la verdad es que se me hizo mas difícil que el de desarrollo web, pues de este tema ya llevaba muchos meses estudiando por mi cuenta pero después de terminarlo tengo ganas de hacer algo con html5 y algo para Android aunque solo sea por probar ¿Y a vosotros? 

En el capítulo anterior dejé el HTML un poco por los suelos y tampoco se lo merece el pobre :) así que en este post voy a proponer algunas formas de hacer formularios  solo con Html y con un toque personal. Releyendo documentación he encontrado que se puede sustituir el formulario por un enlace e incluso con una imagen lo que nos aun nos permite sacarle algo de partido al código, aun con las limitaciones que vimos en el post anterior.

Primero vamos a ver un "formulario" entre comillas porque no se si se podría llamar así, siendo únicamente un enlace. Como vimos en el post anterior, da igual que pongamos un campo de texto, puesto que si se va abrir el gestor de correos, allí el usuario podrá escribir lo que quiera, además con la comodidad de que usará el programa al que está acostumbrado y que le resultará seguro mas cómodo (por ejemplo a la hora de darle formato al texto)

<a href="mailto:direccion@destinatario.com"><h3>Enviar mail</h3>
</a>

Con esta línea obtenéis un enlace que abrirá el gestor de correo.  Podéis probarlo en este enlace: http://probandohtml.informaticafacil.xyz/contacto3.html

Bueno, no es muy impresionante pero con las cualidades del CSS podemos dejarlo elegante y demostrar que somos humildes pero con recursos. Además hay otros truquillos para facilitar un poco la tarea al usuario. Podemos poner por ejemplo un asunto predefinido con lo que solo le quedaría escribir el mensaje. ¿Como? el protocolo mailto nos permite pasar datos por GET (en vez de POST que usamos anteriormente) de esta manera:

<a href="mailto:direccion@destinatario.com?subjet=Contacto%20desde%20la%20web"><h3>Enviar mail</h3>
</a>

Como veréis en vuestro gestor de correo (recordamos, si esta configurado) ya no tenemos nuestra dirección de mail, la dirección de destino y el asunto, solo os queda escribir el cuerpo del mensaje. Hemos hecho esto añadiendo "?subject" y a continuación la frase que queremos en el asunto separando las palabras con %20, observad cuando ponemos el puntero del ratón encima del enlace, que este nos aparece en la parte de abajo del navegador. Lo que hace el GET es enviar la frase a través de la URL por decirlo de alguna manera; por eso se separan las palabras con %20 ¿habéis visto alguna URL con espacios?

Podéis comprobar el resultado en el enlace.

Ahora vamos a ver otra manera un poco mas sofisticada aunque mas o menos es lo mismo. Si habéis ido estudiando el lenguaje HTML ya sabréis que se pueden usar imágenes como enlaces, pero también podemos usar una imagen para un formulario, pero además como en el caso de mi página que va a ser en teoría para una biblioteca virtual, sería interesante que los usuarios pudieran enviar archivos en caso de que en vez de descargar quisieran compartir (que bonito compartir) así que veamos como lo haríamos:

 <form action="mailto:direccion-decorreo" method="POST" enctype="multipart/form-data">
     <label>Para añadir un libro-->></label>
     <input type="file" name="adjunto" />
     <label>Para enviarme un correo haz clic en la imagen</label>      
     <input type="image" name="imagen" src="images/buzón.png" />
          
</form>

Vayamos por partes:

 <form action="mailto:direccion-decorreo" method="POST" enctype="multipart/form-data">

<input type="file" name="adjunto" />

Aquí declaramos el formulario, para poder añadir archivos adjuntos el atributo enctype debe ser multipart/form-data pero lo que no podremos añadir aquí es el asunto como antes, pues el method debe ser post para poder adjuntar archivos. Luego en el input type ponemos file (archivo) ahora tendremos la típica pestaña "examinar" que todos hemos usado mil veces


<input type="image" name="imagen" src="images/buzón.png" />


Y aquí declaramos un botón que será una imagen de la que especificamos la ruta mas a la derecha. Como veis el HTML es fácil y divertido, vamos a ver como ha quedado:
http://probandohtml.informaticafacil.xyz/contacto2.html

Como veis le hemos dado otro aire al formulario aunque siga teniendo las limitaciones que vimos en el post anterior. Se me ocurre que se podría utilizar  para haceros una web con nuestro curriculum como un ejercicio que hicimos durante el curso y al final añadirle un enlace o un imagen con formulario que permita al que visitante contactar con vosotr@s. También se podría editar el estilo cambiando los tipos de letra y tamaño, el fondo tal vez, decorando el cuadro del buzón, no se muchas cosas de las que veremos algunas en un siguiente post (Primero tengo que hacerlo yo que estoy aprendiendo igual que vosotros).

Queda pendiente hacer un formulario con PHP que sería lo mejor y mas profesional, y ahora que tengo mas tiempo libre pues he terminado mis tareas pendientes espero actualizar el blog mas a menudo y seguir aprendiendo con ustedes. Saludos y hasta pronto.