Ingreso de contraseña con PHP & HTML

Iniciado por Rax0r, 28 Junio 2012, 00:53 AM

0 Miembros y 1 Visitante están viendo este tema.

Rax0r

Buenas soy nuevo en este foro me ha parecido  muy interesante y de gran ayuda. mi problema es que quiero hacer un ingreso con contraseña es muy facil de hacer claro esta con un campo de texto pero lo que quiero hacer la contraseña es tipo con botones como con interfaz hay va el codigo para que me entiendan.
Código (html4strict) [Seleccionar]

<html>
<head>
<title>Password</TITLE>
</head>
<body bgcolor = "black">
<form action "pass.php" method="post" name = "form">
<font color = "red">
<center>
<h1>::Ingrese Password::</h1><br>
<input type ="button" name="boton7" value=  " 7 ">
<input type ="button" name="boton8" value=  " 8 ">
<input type ="button" name="boton9" value=  " 9 "><br>
<input type ="button" name="boton6" value=  " 6 ">
<input type ="button" name="boton5" value=  " 5 ">
<input type ="button" name="boton4" value=  " 4 "><br>
<input type ="button" name="boton7" value=  " 3 ">
<input type ="button" name="boton7" value=  " 2 ">
<input type ="button" name="boton7" value=  " 1 "><br><br>
<input type ="submit" name="confirmar" size = "20" value= "Confirmar " >
</center>



</body>
</html>

Lo que quiero sabes como como ponerle funciones a los botones para que la combinacion correcta entre y la que no sea correcta mande el mensaje de "password errada" de Antemano Gracias.

rommel89

a lo que entendi que lo tube que leer dos veces jajaja quieres hacer algo asi

9 8 7
6 5 4
3 2 1 
enviar

se me ocurre que aca boton le coloques un id a tus botones y la funcion de onClick para llamar a una funcion que crearas en otro
arrchivo

<input type ="button" name="boton7" value=  " 7 " id="boton7" onClick="guardarNumero(7)">

en otro archivo js

se aria esto

var numero="";
function guardarNumero(numeroBoton)//Aqui se concatenara el valor del boton casa vez que se presione alguno
{
    numero+=numeroBoton;
}

y si presionas los botones 1 9 y 6 en la variable numero se guardara 196 y ya faltaria compara que si este texto 196 es igual
al texto que ocupas para ingresar o
tambien lo puedes guardar como un numero y no como una cadena con la diferencia que tendrias que hacer
que por ejemplo la clave para ingresar es 10 entonces se tendria que presionar los botones 1 y 9 para que sumado sean 10

ahora se hace otra funcion  en el mismo archivo js

function validarPass()
{
   if (numero == "196")
  {
      alert("entrastes");
  }
else
{
    alert("Clave rechazada");
  }
}

y al boton de confirmar le colocas la funcion de onClick
y creo que el form quedaria asi
<form>
            //aqui van tus demas botones
           <input type ="button" name="confirmar" size = "20" onClick="validarPass()" value= "Confirmar " >
</form>

a y en el head colocas el archivo js que se creo
<head>
<title>Password</TITLE>
<script src="archivoValidar.js"></script>
</head>
algo asi podria ser


te recomiendo que si no sabes acceder a otras archivos que se encunetren dentro de otra carpeta de tus proyectos que hagas
colocalo al mismo nivel de tu pagina principal y asi cuando lo llames solo coloques el nombre y la extension del archivo a y si njo sabes java script lee un poco hay much informacion

Mypagina(CarpetaProyecto)
   PAginaprincipal.html
   Archivo validar.js

espero haberte ayudado o a darte una idea este codigo que escribe no lo he probado pero halgo asi es la idea jajaj

Hadess_inf

Estos tipos de logeo existen a por montones, pero sin aun deseas hacerlo tu mismo la cosa esta sencilla...

Para empezar una funcion javascript

function numero(num){
var txt = document.getElementById('txtPass');
txt.value = txt.value + num;
}

y en los botones:

<input type="text" name="txtPass" id="txtPass"><br>

<button onclick="numero(0)">0</button><br>
<button onclick="numero(1)">1</button><br>
<button onclick="numero(2)">2</button><br>
<button onclick="numero(3)">3</button><br>
<button onclick="numero(4)">4</button><br>
<button onclick="numero(5)">5</button><br>
<button onclick="numero(6)">6</button><br>
<button onclick="numero(7)">7</button><br>
<button onclick="numero(8)">8</button><br>
<button onclick="numero(9)">9</button><br>

Bueno esa es la idea .. inclusive podria programar un algoritmo en php para que los numeros no siempre esten en la misma posicion sino siempre cambien... Saludos.

Yoghurt

#3
Creo que es algo como un "teclado virtual" en donde no ves lo que escribes ni tampoco puedes borrarlo en caso de equivocacion :/  ...procura poner un boton "reset".

Puedes implementar md5 en tu web, php ya lo trae solo debes poner un script con md5 y puedes enviar la contraseña "cifrada" para que no la vean. Porque si planeas enviar los datos debe ser de una forma segura. No puedes enviar la password si la tienes en una variable en javascript.

Para enviar informacion en un formulario existe un objeto que te ayudará bastante y se llama "hidden". Este objeto lo puedes modificar internamente pues no se muestra al usuario por lo que en él escribiras los datos desde javascript:

Pon botones como dice @Hadess_inf, solo que en vez de escribir el password en un text lo harás en el objeto "hidden" dentro del form:

function numero(num){
var txt = document.getElementById('txtPass');
txt.value = txt.value + "" + num; //que no sume los numeros.
}

y en los botones:

<button onclick="numero(0)">0</button>
<button onclick="numero(1)">1</button>
<button onclick="numero(2)">2</button><br>
<button onclick="numero(3)">3</button>
<button onclick="numero(4)">4</button>
<button onclick="numero(5)">5</button><br>
<button onclick="numero(6)">6</button>
<button onclick="numero(7)">7</button>
<button onclick="numero(8)">8</button>
<button onclick="numero(9)">9</button><br>
...
<form action="pass.php" method="post" name="form1">
 <input type="hidden" name="passwd" id="txtPass" value="">
</form>

y para enviar los datos:

<input type="button" value="confirmar" onclick="javascript:document.form1.submit()">

...Luego en el archivo "pass.php" recibes el "passwd" en la variable global POST.