Código HTML:
<!DOCTYPE HTML> <html lang="es"> <head> <title>Formulariohtml_proyectoguiado</title> <meta charset=utf-8> <link rel="stylesheet" type="text/css" href="resources/estilos.css"/> <script language="javascript" type="text/javascript"> function capturaMOUSE(event) { return { x:(window.event)?(window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft):(event.clientX + (window.scrollX || document.body.scrollLeft || 0)), y:(window.event)?(window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop):(event.clientY + (window.scrollY || document.body.scrollTop ||0)) }; } function muestra(id){ var posMOUSE=capturaMOUSE(arguments[4] || window.event); var ex=document.getElementById(id); ex.style.top=posMOUSE.y + "px"; ex.style.left=posMOUSE.x + "px"; if(ex.style.display=='block' or ){ ex.style.display='none'; } else{ ex.style.display='block'; } } </script> </head> <body onmousemove="position(event);"> <form method="post"> <label for="campoNombre">Nombre</label><br/> <input type="text" id="campoNombre" name="campoNombre" value="" onMouseOver="muestra('exnom')" onMouseOut="muestra('exnom')"/></br> <label for="campoApellidos">Apellidos</label><br/> <input type="text" id="campoApellidos" name="campoApellidos" value=""onmouseover="muestra('exape')" onmouseout="muestra('exape')"/></br> <label for="campoDNI">DNI</label><br/> <input type="text" id="campoDNI" name="campoDNI" value="" onMouseOver="muestra('exdni')" onMouseOut="muestra('exdni')"/></br> <label for="campoEdad">Edad</label><br/> <input type="text" id="campoEdad" name="campoEdad" value="" onMouseOver="muestra('exedad')" onMouseOut="muestra('exedad')"/></br> <label for="campoAvatar">Avatar</label><br/> <input type="file" id="campoAvatar" name="campoAvatar" onMouseOver="muestra('exav')" onMouseOut="muestra('exav')"/></br> <label for="campoDomicilio">Domicilio</label><br/> <input type="text" id="campoDomicilio" name="campoDomicilio" maxlength="200" onMouseOver="muestra('exdom')" onMouseOut="muestra('exdom')"/></br> <label for="campoProvincia">Provincia</label><br/> <input list="provincias" type="text" id="campoProvincia" name="campoProvincia" value="" onMouseOver="muestra('exprov')" onMouseOut="muestra('exprov')"/></br> <label for="campoTelefono">Telefóno</label><br/> <input type="text" id="campoTelefono" name="campoTelefono" value=""onMouseOver="muestra('extef')" onMouseOut="muestra('extef')"/></br> <label for="campoMail">Mail</label><br/> <input type="text" id="campoMail" name="campoMail" value="" onMouseOver="muestra('exem')" onMouseOut="muestra('exem')"/></br> <label for="campoPassword">Contraseña</label><br/> <input type="password" id="campoPassword" name="campoPassword" value="" onMouseOver="muestra('expass')" onMouseOut="muestra('expass')"/></br> <label for="campoComprobarPassword">Comprobación de Contraseña</label><br/> <input type="password" id="campoComprobarPassword" name="campoComprobarPassword" value="" onMouseOver="muestra('excpass')" onMouseOut="muestra('excpass')"/></br></br> <input type="submit" value="Validar"/> </form> </div> <div id="exnom" style="display:none;">El campo Nombre es obligatorio.</div> <div id="exape" style="display:none;">El campo Apellidos es obligatorio.</div> <div id="exdni" style="display:none;">El campo DNI es obligatorio. Debe contener 9 cáracteres, 8 números y una letra.</div> <div id="exedad" style="display:none;">Este campo no es obligatorio. Deebe ser un valor numérico y estar comprendido entre 1 y 120.</div> <div id="exav" style="display:none;">Este campo no es obligatorio. Sera la imagen que te representará.</div> <div id="exdom" style="display:none;">Este campo no es obligatorio. Máxima longitud: 200 carácteres.</div> <div id="exprov" style="display:none;">Este campo no es obligatorio. Debe pertenecer a una de las listadas.</div> <div id="extef" style="display:none;">Este campo no es obligatorio. Deebe ser un numero válido: 9XXXXXXXX ó 6XXXXXXXX.</div> <div id="exem" style="display:none;">Este campo es obligatorio. Débe ser un email válido.</div> <div id="expass" style="display:none;">Este campo es obligatorio. Se indica la fortaleza de tu contraseña, pero no hay requisitos.</div> <div id="excpass" style="display:none;">Este campo es obligatorio. Repite la contraseña antes escrita, por favor.</div>
