Bienvenida a Foros del Web.
Lo primero puedes conseguirlo mediante un simple cálculo: la resta del número máximo de caracteres que puede poseer el DNI menos la cantidad de caracteres ingresados por el usuario.
¿Cómo logras obtener el segundo dato?
El elemento que estés utilizando para el ingreso de datos —que supongo se trata de un
<input> de tipo
text—, posee una propiedad llamada
value. Dicha propiedad devuelve el valor contenido en el elemento como una cadena de texto. Todas las cadenas de texto poseen una propiedad llamada
length con la cual puedes obtener el número de caracteres que componen a la cadena en cuestión.
Lo único que tendrías que hacer es, primero, definir el número máximo de caracteres que puede tener el dato a ingresar, luego, obtener la cantidad de caracteres ingresados por cada vez que ocurra alguno de los
eventos del teclado, por ejemplo, el evento
keypress, el cual se produce cuando se ha pulsado la tecla pero aún no se ha levantado el dedo de la misma (la tecla físicamente aún no retorna a su posición original). Bastará con que
registres dicho evento a la caja de texto y ejecutes una función cuando este se produzca. En dicha función, tomas a los valores anteriormente mencionados y los restas. Dicho resultado lo puedes mostrar en algún elemento en línea, por ejemplo, un
<label>. Para establecer el valor como contenido del elemento, necesitas utilizar la propiedad
innerHTML (para compatibilidad, échale un vistazo a
esto).
Para lograr lo último que mencionaste, primero debes saber qué son los
estilos en el diseño web. Una vez que entiendas eso, sabrás cómo cambiar la apariencia tanto del formulario como de cualquier otro elemento del documento.
Un saludo