opos2008_HTML5

<!DOCTYPE html>
<html>
  <head>
    <title>Boton</title>
    <style type="text/css">
        a:link, a:visited, a:active { color:black;  text-decoration:none; }
        a:hover {   color:#00F;     text-decoration:none;   }
        .asterisco{color:red;}
        p{text-align:center;}
        dt,dd{display:inline-block;}
        dt{width:8em;}
        input[type=submit], input[type=reset]{margin-left:12em;}
        input:invalid {box-shadow: 0 0 5px 1px red;}
        input:focus:invalid { outline: none;}
    </style>
    <script type="text/javascript">
function verificaCampos() {
// Creamos variables para los campos a verificar
nombre = document.getElementById("nombre");
dni = document.getElementById("dni");
passwd1 = document.getElementById("pass1");
passwd2 = document.getElementById("pass2");
//Comprueba que el nombre no esté vacío
    if (nombre.value.length == 0)  {
        alert("Tiene que escribir su nombre");
        nombre.focus();
        return (false); }
// NÚMEROS, comprueba que el dni solo tiene números
if (isNaN(dni.value) == true) {
        alert ("el dni tiene que ser solo numérico");
        dni.value ="";
        dni.focus();
        return (false); }
if (dni.value.length < 7 || dni.value.length > 8) {
        alert("Escriba entre 7 y 8 números en el campo \"DNI\".");
        dni.value="";
        dni.focus();
        return (false);  }
//Comprueba que el campo clave no este vacio
if (passwd1.value.length == 0) {
        alert("Tiene que escribir su clave") ;
        passwd1.focus();
        return (false); }
//Para que compare si las claves son iguales
if (passwd1.value != passwd2.value) {
alert("Las dos claves son distintas") ;
        passwd2.value="";
        passwd2.focus();
        return (false);  }
    return (true);
    }
window.onload=function() {
    formu = document.getElementsByTagName("form")[0];
    formu.setAttribute("onsubmit","return verificaCampos()");
}
</script>
  </head>
  <body>
    <form action="p1.php" method="post" name="formulario">
        <dl>
            <dt><label for="nombre">Nombre<span class="asterisco">*</span>:</label></dt>
            <dd><input type="text" required="required" value="" name="nombre" id="nombre" size="60" /></dd><br />
            <dt><label for="apellidos">Apellidos:</label></dt>
            <dd><input type="text" value="" name="apellidos" id="apellidos" size="60" /></dd> <br />
            <dt><label for="dni">DNI<span class="asterisco">*</span>:</label></dt>
            <dd><input type="text" required="required" value="" name="dni" id="dni" pattern="\d{8,9}" /></dd><br />
            <dt><label for="pass1">Clave<span class="asterisco">*</span>:</label></dt>
            <dd><input type="password" value="" name="pass1" id="pass1" required="required" /></dd><br />
            <dt><label for="pass2">Repita la clave<span class="asterisco">*</span>:</label></dt>
            <dd><input type="password" value="" name="pass2" id="pass2" required="required" /></dd>
        </dl>
        <input type="submit" name="enviar" value="Enviar" /><input type="reset" name="borrar" value="Borrar" />
        <hr />
        <p><a href="http://www.misitioweb.com">Visita mi Sitio Web</a></p>
    </form>
  </body>
</html>