Controles TEXT y PASSWORD
Lección 33: Controles TEXT y PASSWORD
Vamos a ver más controles que se puedan utilizar en un formulario. En este caso, el tipo "text", que es muy importante. Esto nos sirve para que el usuario introduzca un valor en una caja de texto. Y el control "password" es una caja de texto también, pero con la peculiaridad de que no se verá lo que el usuario está escribiendo, por eso es password.
Crearemos un ejemplo donde el usuario tendrá que introducir el nombre y contraseña. Haremos una función en Javascript para mostrar el nombre que ha introducido el usuario. (El password no se puede mostrar, puesto que son datos protegidos, por decirlo así).
Analicemos el ejemplo:
La función "mostrar" simplemente obtiene el valor del "text" de nombre.
var nom = document.getElementById('nombre').value;
Creamos una variable para introducir el valor, y con el método getElementById(<id_text>).value, obtenemos el valor que el usuario ha introducido en dicha "id_text". El "id", como sabréis de HTML, viene dado en el campo de texto del formulario, como veis más abajo en el ejemplo.
Eso por parte de Javascript. Ahora veamos el formulario:
Escribe tu nombre:
<input type="text" id="nombre"><br>
Escribe un password:
<input type="password" id="clave">
<input type="button" value="Confirmar" onClick="mostrar()">
Los campos de texto se ponen con type="text" y se le da de "id" el nombre que queramos, que será el que necesitemos si queremos obtener el valor de ese campo. El password es igual, pero type="password". Es también un campo de texto, pero con los datos ocultos.
Para terminar, creamos un botón que envíe el formulario. Y en el evento onClick, llamamos a nuestra función javascript, para que cuando se pulse el botón se ejecute la función.
El ejemplo completo aquí: Controles text y password
Un video del funcionamiento del programa:
Text y password
