Skip to main content
quitar etiqueta alert + correcciones de formato
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

¿Se puede personalizar el mensaje de alerta para que en lugar de que me salga el "alert("mensaje que deseemos);"alert("mensaje que deseemos); me aparezca el correspondiente<input> correspondiente de un color rojo para denotar que está erróneo el campo?

¿O también se podría centrar el mensaje del alert();alert(); para que salga en mitad del formulario y asi hacer click, con unos estilos más vistosos?

function validar() {
    var nombre, apellidos, email, dni, telefono, password1, password2;
    var expresion;
    
    nombre = document.getElementById("nombre").value;
    apellidos = document.getElementById("apellidos").value;
    email = document.getElementById("email").value;
    dni = document.getElementById("dni").value;
    telefono = document.getElementById("telefono").value;
    password1 = document.getElementById("password1").value;
    password2 = document.getElementById("password2").value;
    
    expresion = /^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,4})$/; 

  if (nombre 
 == "" || apellidos if(nombre==""== "" || apellidos==""email ||== email=="""" || dni==""dni == "" || telefono==""telefono == "" || password1==""password1 == "" || password2==""){
password2 == "") {
    alert("Todos los campos son obligatorios.");
       return false;
    } else if (nombre.length>20){
 length > 20) {
    alert("El nombre debe tener menos de 21 carácteres.");
        document.getElementById("nombre").focus();
        return false;
    } else if (apellidos.length>50){
 length > 50) {
    alert("Los apellidos superan los 50 carácteres de límite.");
        document.getElementById("apellidos").focus();
        return false;
    } else if (!expresion.test(email)) {
        alert("El formato del email es incorrecto.");
        document.getElementById("email").value = "";
        document.getElementById("email").focus();
        return false;
    } else if (email.length>50){
 length > 50) {
    alert("El email debe tener menos de 51 carácteres.");
        document.getElementById("email").value = "";
        document.getElementById("email").focus();
        return false;
    } else if (dni.length !=9= 9) {
        alert("El DNI debe tener exactamente 9 carácteres.");
        document.getElementById("dni").value = "";
        document.getElementById("dni").focus();
        return false;
    } else if (telefono.length !=9= 9) {
        alert("El teléfono debe tener exactamente 9 carácteres.");
        document.getElementById("telefono").value = "";
        document.getElementById("telefono").focus();
        return false;
    } else if (isNaN(telefono)) {
        alert("El teléfono debe contener únicamente dígitos.");
        document.getElementById("telefono").value = "";
        document.getElementById("telefono").focus();
        return false;
    } else if (password1 !=password2= password2) {
        alert("Las contraseñas no coinciden.");
        document.getElementById("password1").value = "";
        document.getElementById("password2").value = "";
        document.getElementById("password1").focus();
        return false;
    }
}
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: sans-serif;
    background: #204862;
}

h1 {
    margin-top: 100px;
    color: #fff;
    text-align: center;
}

.form-register {
    width: 95%;
    max-width: 500px;
    margin: auto;
    background: white;
    border-radius: 7px;
}

.form-titulo {
    background: green;
    color: #fff;
    padding: 20px;
    text-align: center;
    font-weight: 100;
    font-size: 30px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom: 5px solid red;
}

.contenedor-inputs {
    padding: 2px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

input {
    margin-bottom: 15px;
    padding: 4px;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid black;
}

label {
    font-size: 16px;
}

.input-2 {
    width: 48%;
}

.input-1 {
    width: 98%;
}

.registrar {
    background: crimson;
    color: #fff;
    margin: auto;
    padding: 10px 40px;
    cursor: pointer;
    font-size: 12px;
}

.registrar:active {
    transform: scale(1.05);
}

.form-link {
    width: 100%;
    margin: 7px;
    text-align: center;
    font-size: 14px;
}

.footer {
    color: #fff;
    text-align: center;
    font-size: 14px;
    position: relative;
    margin-top: 150px;
    height: 40px;
    padding: 5px 0px;
    clear: both;
}
<!DOCTYPE html>
<html lang="es">
     
<head>
        <meta charset="UTF-8">
        <title>Formulario de Registro</title>
        <link rel="stylesheet" href="estilos_registrar.css">
        <script type="text/javascript" src="validar.js"></script>
    </head>
     
<body>
        <h1>Formulario de Registro</h1>
        <form name="miformulario" id="miformulario" action="registrar.php" method="POST" class="form-register" onsubmit="return validar();">
            <h2 class="form-titulo">CREA UNA CUENTA</h2>
            <div class="contenedor-inputs">
                <!-- Por cada etiqueta de <input> <label for="id_mismo_que_input">XXXX: </label> -->
                <input type="text" name="nombre" id="nombre" placeholder="Nombre" tabindex="1" class="input-2">
                <input type="text" name="apellidos" id="apellidos" placeholder="Apellidos" tabindex="2" class="input-2">
                <br/>
                <input type="text" name="email" id="email" placeholder="Email" tabindex="3" class="input-1">
                <br/>
                <input type="text" name="dni" id="dni" placeholder="DNI" tabindex="4" class="input-2">
                <input type="text" name="telefono" id="telefono" placeholder="Teléfono" tabindex="5" class="input-2">
                <br/>
                <input type="password" name="password" id="password1" placeholder="Contraseña" tabindex="6" class="input-2">
                <input type="password" name="password" id="password2" placeholder="Repetir contraseña" tabindex="7" class="input-2">
                <br/>
                <input type="submit" value="Registrar" name="registrar" class="registrar" tabindex="8" />
                <?php
                    include "Clases/BD.php";
                    //Si pulsamos el botón insertar...
                    if(isset($_POST["registrar"])){
                        $nombre = $_POST["nombre"];
                        $apellidos = $_POST["apellidos"];
                        $dni = $_POST["dni"];
                        $telefono = $_POST["telefono"];
                        $email = $_POST["email"];
                        $password = $_POST["password"];
                        //Llamamos al método "insertarCliente" y le pasamos los parámetros del formulario.
                        BD::insertarCliente($email, $nombre, $apellidos, $dni, $telefono, $password);
                    }
                ?>
                <p class="form-link">¿Ya tienes una cuenta? <a href="iniciar_sesion.php">Ingresa aquí</a></p>
            </div>
        </form>
        <!--<div class="footer">
            <p>Copyrigth</p>
        </div>-->
    </body> 

</html>

¿Se puede personalizar el mensaje de alerta para que en lugar de que me salga el "alert("mensaje que deseemos);" me aparezca el correspondiente de un color rojo para denotar que está erróneo el campo?

¿O también se podría centrar el mensaje del alert(); para que salga en mitad del formulario y asi hacer click, con unos estilos más vistosos?

function validar(){
    var nombre, apellidos, email, dni, telefono, password1, password2;
    var expresion;
    
    nombre = document.getElementById("nombre").value;
    apellidos = document.getElementById("apellidos").value;
    email = document.getElementById("email").value;
    dni = document.getElementById("dni").value;
    telefono = document.getElementById("telefono").value;
    password1 = document.getElementById("password1").value;
    password2 = document.getElementById("password2").value;
    
    expresion = /^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,4})$/;
    
     if(nombre=="" || apellidos=="" || email=="" || dni=="" || telefono=="" || password1=="" || password2==""){
       alert("Todos los campos son obligatorios.");
       return false;
    }else if(nombre.length>20){
        alert("El nombre debe tener menos de 21 carácteres.");
        document.getElementById("nombre").focus();
        return false;
    }else if(apellidos.length>50){
        alert("Los apellidos superan los 50 carácteres de límite.");
        document.getElementById("apellidos").focus();
        return false;
    }else if(!expresion.test(email)){
        alert("El formato del email es incorrecto.");
        document.getElementById("email").value = "";
        document.getElementById("email").focus();
        return false;
    }else if(email.length>50){
        alert("El email debe tener menos de 51 carácteres.");
        document.getElementById("email").value = "";
        document.getElementById("email").focus();
        return false;
    }else if(dni.length!=9){
        alert("El DNI debe tener exactamente 9 carácteres.");
        document.getElementById("dni").value = "";
        document.getElementById("dni").focus();
        return false;
    }else if(telefono.length!=9){
        alert("El teléfono debe tener exactamente 9 carácteres.");
        document.getElementById("telefono").value = "";
        document.getElementById("telefono").focus();
        return false;
    }else if(isNaN(telefono)){
        alert("El teléfono debe contener únicamente dígitos.");
        document.getElementById("telefono").value = "";
        document.getElementById("telefono").focus();
        return false;
    }else if(password1!=password2){
        alert("Las contraseñas no coinciden.");
        document.getElementById("password1").value = "";
        document.getElementById("password2").value = "";
        document.getElementById("password1").focus();
        return false;
    }
}
*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: sans-serif;
    background: #204862;
}

h1{
    margin-top: 100px;
    color: #fff;
    text-align: center;
}

.form-register{
    width: 95%;
    max-width: 500px;
    margin: auto;
    background: white;
    border-radius: 7px;
}

.form-titulo{
    background: green;
    color: #fff;
    padding: 20px;
    text-align: center;
    font-weight: 100;
    font-size: 30px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom: 5px solid red;
}

.contenedor-inputs{
    padding: 2px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

input{
    margin-bottom: 15px;
    padding: 4px;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid black;
}

label{
    font-size: 16px;
}

.input-2{
    width: 48%;
}

.input-1{
    width: 98%;
}

.registrar{
    background: crimson;
    color: #fff;
    margin: auto;
    padding: 10px 40px;
    cursor: pointer;
    font-size: 12px;
}

.registrar:active{
    transform: scale(1.05);
}

.form-link{
    width: 100%;
    margin: 7px;
    text-align: center;
    font-size: 14px;
}

.footer{
    color: #fff;
    text-align: center;
    font-size: 14px;
    position: relative;
    margin-top: 150px;
    height: 40px;
    padding:5px 0px;
    clear: both;
}
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Formulario de Registro</title>
        <link rel="stylesheet" href="estilos_registrar.css">
        <script type="text/javascript" src="validar.js"></script>
    </head>
    <body>
        <h1>Formulario de Registro</h1>
        <form name="miformulario" id="miformulario" action="registrar.php" method="POST" class="form-register" onsubmit="return validar();">
            <h2 class="form-titulo">CREA UNA CUENTA</h2>
            <div class="contenedor-inputs">
                <!-- Por cada etiqueta de <input> <label for="id_mismo_que_input">XXXX: </label> -->
                <input type="text" name="nombre" id="nombre" placeholder="Nombre" tabindex="1" class="input-2">
                <input type="text" name="apellidos" id="apellidos" placeholder="Apellidos" tabindex="2" class="input-2">
                <br/>
                <input type="text" name="email" id="email" placeholder="Email" tabindex="3" class="input-1">
                <br/>
                <input type="text" name="dni" id="dni" placeholder="DNI" tabindex="4" class="input-2">
                <input type="text" name="telefono" id="telefono" placeholder="Teléfono" tabindex="5" class="input-2">
                <br/>
                <input type="password" name="password" id="password1" placeholder="Contraseña" tabindex="6" class="input-2">
                <input type="password" name="password" id="password2" placeholder="Repetir contraseña" tabindex="7" class="input-2">
                <br/>
                <input type="submit" value="Registrar" name="registrar" class="registrar" tabindex="8"/>
                <?php
                    include "Clases/BD.php";
                    //Si pulsamos el botón insertar...
                    if(isset($_POST["registrar"])){
                        $nombre = $_POST["nombre"];
                        $apellidos = $_POST["apellidos"];
                        $dni = $_POST["dni"];
                        $telefono = $_POST["telefono"];
                        $email = $_POST["email"];
                        $password = $_POST["password"];
                        //Llamamos al método "insertarCliente" y le pasamos los parámetros del formulario.
                        BD::insertarCliente($email, $nombre, $apellidos, $dni, $telefono, $password);
                    }
                ?>
                <p class="form-link">¿Ya tienes una cuenta? <a href="iniciar_sesion.php">Ingresa aquí</a></p>
            </div>
        </form>
        <!--<div class="footer">
            <p>Copyrigth</p>
        </div>-->
    </body>
</html>

¿Se puede personalizar el mensaje de alerta para que en lugar de que me salga el alert("mensaje que deseemos); me aparezca el <input> correspondiente de un color rojo para denotar que está erróneo el campo?

¿O también se podría centrar el mensaje del alert(); para que salga en mitad del formulario y asi hacer click, con unos estilos más vistosos?

function validar() {
  var nombre, apellidos, email, dni, telefono, password1, password2;
  var expresion;

  nombre = document.getElementById("nombre").value;
  apellidos = document.getElementById("apellidos").value;
  email = document.getElementById("email").value;
  dni = document.getElementById("dni").value;
  telefono = document.getElementById("telefono").value;
  password1 = document.getElementById("password1").value;
  password2 = document.getElementById("password2").value;

  expresion = /^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,4})$/; 

  if (nombre == "" || apellidos == "" || email == "" || dni == "" || telefono == "" || password1 == "" || password2 == "") {
    alert("Todos los campos son obligatorios.");
    return false;
  } else if (nombre.length > 20) {
    alert("El nombre debe tener menos de 21 carácteres.");
    document.getElementById("nombre").focus();
    return false;
  } else if (apellidos.length > 50) {
    alert("Los apellidos superan los 50 carácteres de límite.");
    document.getElementById("apellidos").focus();
    return false;
  } else if (!expresion.test(email)) {
    alert("El formato del email es incorrecto.");
    document.getElementById("email").value = "";
    document.getElementById("email").focus();
    return false;
  } else if (email.length > 50) {
    alert("El email debe tener menos de 51 carácteres.");
    document.getElementById("email").value = "";
    document.getElementById("email").focus();
    return false;
  } else if (dni.length != 9) {
    alert("El DNI debe tener exactamente 9 carácteres.");
    document.getElementById("dni").value = "";
    document.getElementById("dni").focus();
    return false;
  } else if (telefono.length != 9) {
    alert("El teléfono debe tener exactamente 9 carácteres.");
    document.getElementById("telefono").value = "";
    document.getElementById("telefono").focus();
    return false;
  } else if (isNaN(telefono)) {
    alert("El teléfono debe contener únicamente dígitos.");
    document.getElementById("telefono").value = "";
    document.getElementById("telefono").focus();
    return false;
  } else if (password1 != password2) {
    alert("Las contraseñas no coinciden.");
    document.getElementById("password1").value = "";
    document.getElementById("password2").value = "";
    document.getElementById("password1").focus();
    return false;
  }
}
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #204862;
}

h1 {
  margin-top: 100px;
  color: #fff;
  text-align: center;
}

.form-register {
  width: 95%;
  max-width: 500px;
  margin: auto;
  background: white;
  border-radius: 7px;
}

.form-titulo {
  background: green;
  color: #fff;
  padding: 20px;
  text-align: center;
  font-weight: 100;
  font-size: 30px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom: 5px solid red;
}

.contenedor-inputs {
  padding: 2px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

input {
  margin-bottom: 15px;
  padding: 4px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid black;
}

label {
  font-size: 16px;
}

.input-2 {
  width: 48%;
}

.input-1 {
  width: 98%;
}

.registrar {
  background: crimson;
  color: #fff;
  margin: auto;
  padding: 10px 40px;
  cursor: pointer;
  font-size: 12px;
}

.registrar:active {
  transform: scale(1.05);
}

.form-link {
  width: 100%;
  margin: 7px;
  text-align: center;
  font-size: 14px;
}

.footer {
  color: #fff;
  text-align: center;
  font-size: 14px;
  position: relative;
  margin-top: 150px;
  height: 40px;
  padding: 5px 0px;
  clear: both;
}
<!DOCTYPE html>
<html lang="es">
 
<head>
  <meta charset="UTF-8">
  <title>Formulario de Registro</title>
  <link rel="stylesheet" href="estilos_registrar.css">
  <script type="text/javascript" src="validar.js"></script>
</head>
 
<body>
  <h1>Formulario de Registro</h1>
  <form name="miformulario" id="miformulario" action="registrar.php" method="POST" class="form-register" onsubmit="return validar();">
    <h2 class="form-titulo">CREA UNA CUENTA</h2>
    <div class="contenedor-inputs">
      <!-- Por cada etiqueta de <input> <label for="id_mismo_que_input">XXXX: </label> -->
      <input type="text" name="nombre" id="nombre" placeholder="Nombre" tabindex="1" class="input-2">
      <input type="text" name="apellidos" id="apellidos" placeholder="Apellidos" tabindex="2" class="input-2">
      <br/>
      <input type="text" name="email" id="email" placeholder="Email" tabindex="3" class="input-1">
      <br/>
      <input type="text" name="dni" id="dni" placeholder="DNI" tabindex="4" class="input-2">
      <input type="text" name="telefono" id="telefono" placeholder="Teléfono" tabindex="5" class="input-2">
      <br/>
      <input type="password" name="password" id="password1" placeholder="Contraseña" tabindex="6" class="input-2">
      <input type="password" name="password" id="password2" placeholder="Repetir contraseña" tabindex="7" class="input-2">
      <br/>
      <input type="submit" value="Registrar" name="registrar" class="registrar" tabindex="8" />
      <?php
                    include "Clases/BD.php";
                    //Si pulsamos el botón insertar...
                    if(isset($_POST["registrar"])){
                        $nombre = $_POST["nombre"];
                        $apellidos = $_POST["apellidos"];
                        $dni = $_POST["dni"];
                        $telefono = $_POST["telefono"];
                        $email = $_POST["email"];
                        $password = $_POST["password"];
                        //Llamamos al método "insertarCliente" y le pasamos los parámetros del formulario.
                        BD::insertarCliente($email, $nombre, $apellidos, $dni, $telefono, $password);
                    }
                ?>
        <p class="form-link">¿Ya tienes una cuenta? <a href="iniciar_sesion.php">Ingresa aquí</a></p>
    </div>
  </form>
  <!--<div class="footer">
            <p>Copyrigth</p>
        </div>-->
</body> 

</html>
Publicación cerrada como "Duplicada" por Einer, lois6b
Origen Enlace
omaza1990
  • 2.8k
  • 36
  • 103
  • 163

Mensaje de alerta - HTML - CSS

¿Se puede personalizar el mensaje de alerta para que en lugar de que me salga el "alert("mensaje que deseemos);" me aparezca el correspondiente de un color rojo para denotar que está erróneo el campo?

¿O también se podría centrar el mensaje del alert(); para que salga en mitad del formulario y asi hacer click, con unos estilos más vistosos?

function validar(){
    var nombre, apellidos, email, dni, telefono, password1, password2;
    var expresion;
    
    nombre = document.getElementById("nombre").value;
    apellidos = document.getElementById("apellidos").value;
    email = document.getElementById("email").value;
    dni = document.getElementById("dni").value;
    telefono = document.getElementById("telefono").value;
    password1 = document.getElementById("password1").value;
    password2 = document.getElementById("password2").value;
    
    expresion = /^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,4})$/;
    
    if(nombre=="" || apellidos=="" || email=="" || dni=="" || telefono=="" || password1=="" || password2==""){
       alert("Todos los campos son obligatorios.");
       return false;
    }else if(nombre.length>20){
        alert("El nombre debe tener menos de 21 carácteres.");
        document.getElementById("nombre").focus();
        return false;
    }else if(apellidos.length>50){
        alert("Los apellidos superan los 50 carácteres de límite.");
        document.getElementById("apellidos").focus();
        return false;
    }else if(!expresion.test(email)){
        alert("El formato del email es incorrecto.");
        document.getElementById("email").value = "";
        document.getElementById("email").focus();
        return false;
    }else if(email.length>50){
        alert("El email debe tener menos de 51 carácteres.");
        document.getElementById("email").value = "";
        document.getElementById("email").focus();
        return false;
    }else if(dni.length!=9){
        alert("El DNI debe tener exactamente 9 carácteres.");
        document.getElementById("dni").value = "";
        document.getElementById("dni").focus();
        return false;
    }else if(telefono.length!=9){
        alert("El teléfono debe tener exactamente 9 carácteres.");
        document.getElementById("telefono").value = "";
        document.getElementById("telefono").focus();
        return false;
    }else if(isNaN(telefono)){
        alert("El teléfono debe contener únicamente dígitos.");
        document.getElementById("telefono").value = "";
        document.getElementById("telefono").focus();
        return false;
    }else if(password1!=password2){
        alert("Las contraseñas no coinciden.");
        document.getElementById("password1").value = "";
        document.getElementById("password2").value = "";
        document.getElementById("password1").focus();
        return false;
    }
}
*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: sans-serif;
    background: #204862;
}

h1{
    margin-top: 100px;
    color: #fff;
    text-align: center;
}

.form-register{
    width: 95%;
    max-width: 500px;
    margin: auto;
    background: white;
    border-radius: 7px;
}

.form-titulo{
    background: green;
    color: #fff;
    padding: 20px;
    text-align: center;
    font-weight: 100;
    font-size: 30px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom: 5px solid red;
}

.contenedor-inputs{
    padding: 2px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

input{
    margin-bottom: 15px;
    padding: 4px;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid black;
}

label{
    font-size: 16px;
}

.input-2{
    width: 48%;
}

.input-1{
    width: 98%;
}

.registrar{
    background: crimson;
    color: #fff;
    margin: auto;
    padding: 10px 40px;
    cursor: pointer;
    font-size: 12px;
}

.registrar:active{
    transform: scale(1.05);
}

.form-link{
    width: 100%;
    margin: 7px;
    text-align: center;
    font-size: 14px;
}

.footer{
    color: #fff;
    text-align: center;
    font-size: 14px;
    position: relative;
    margin-top: 150px;
    height: 40px;
    padding:5px 0px;
    clear: both;
}
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Formulario de Registro</title>
        <link rel="stylesheet" href="estilos_registrar.css">
        <script type="text/javascript" src="validar.js"></script>
    </head>
    <body>
        <h1>Formulario de Registro</h1>
        <form name="miformulario" id="miformulario" action="registrar.php" method="POST" class="form-register" onsubmit="return validar();">
            <h2 class="form-titulo">CREA UNA CUENTA</h2>
            <div class="contenedor-inputs">
                <!-- Por cada etiqueta de <input> <label for="id_mismo_que_input">XXXX: </label> -->
                <input type="text" name="nombre" id="nombre" placeholder="Nombre" tabindex="1" class="input-2">
                <input type="text" name="apellidos" id="apellidos" placeholder="Apellidos" tabindex="2" class="input-2">
                <br/>
                <input type="text" name="email" id="email" placeholder="Email" tabindex="3" class="input-1">
                <br/>
                <input type="text" name="dni" id="dni" placeholder="DNI" tabindex="4" class="input-2">
                <input type="text" name="telefono" id="telefono" placeholder="Teléfono" tabindex="5" class="input-2">
                <br/>
                <input type="password" name="password" id="password1" placeholder="Contraseña" tabindex="6" class="input-2">
                <input type="password" name="password" id="password2" placeholder="Repetir contraseña" tabindex="7" class="input-2">
                <br/>
                <input type="submit" value="Registrar" name="registrar" class="registrar" tabindex="8"/>
                <?php
                    include "Clases/BD.php";
                    //Si pulsamos el botón insertar...
                    if(isset($_POST["registrar"])){
                        $nombre = $_POST["nombre"];
                        $apellidos = $_POST["apellidos"];
                        $dni = $_POST["dni"];
                        $telefono = $_POST["telefono"];
                        $email = $_POST["email"];
                        $password = $_POST["password"];
                        //Llamamos al método "insertarCliente" y le pasamos los parámetros del formulario.
                        BD::insertarCliente($email, $nombre, $apellidos, $dni, $telefono, $password);
                    }
                ?>
                <p class="form-link">¿Ya tienes una cuenta? <a href="iniciar_sesion.php">Ingresa aquí</a></p>
            </div>
        </form>
        <!--<div class="footer">
            <p>Copyrigth</p>
        </div>-->
    </body>
</html>