Pulsar iconos para que despliegue la casilla input

Hola a todos! Dejo aqui mis dudas porque me estoy volviendo loca intentando resolverlas, no llevo mucho tiempo en esto y a lo mejor es una tonteria pero no doy con ello. Gracias de ante mano!!
En mi pagina web me gustaria que al pulsar un icono(que ya tengo en ella) se me desplegase la tipica casilla de input, concretamente con lo que lo estoy haciendo es con la casilla de usuario y contraseña, yo he puesto un icono tipico de usuario y me gustaria que al pulsarle se me desplegase la casilla para introducir el email y asi tambien en la de contraseña...
Espero que me podais ayudar!! Ya me lei entera la pagina cctw y no encontre nada parecido!
Muchas gracias!!

Hola!

Es simple, pero te recomiendo que uses un plugin de jQuery y no te compliques mucho. Te recomiendo que aprendas y comiences por aquí: click aquí.

Una vez que hayas aprendido jQuery, bastaría con algo así:

jQuery(document).ready(function($) {
    $('#login-form').hide(); // Ocultas el formulario al cargar el documento.
    $('#icono-login').on('click', function(e) {
        e.preventDefault();
        $('#login-form').show();
    });
});

<a href="#" id="icono-login"><img src="icono-login.png" alt="Login" /></a>
<form id="login-form" ...>
</form>

Saludos!

Muchas gracias!!! te seguiré el consejo y miraré algo de jQuery antes de meterlo en la página!
gracias por la rapidezz!!