Ocultar la contraseña se conoce comúnmente como enmascaramiento de contraseña. Oculta los caracteres de la contraseña cuando los ingresan los usuarios mediante viñetas (•), un asterisco (*) u otros caracteres.
Siempre es una buena práctica utilizar el enmascaramiento de contraseñas para garantizar la seguridad y evitar su uso indebido. En general, el enmascaramiento de contraseñas es útil para ocultar los caracteres de cualquier usuario cuando la pantalla está expuesta a ser proyectada para que la contraseña no se publique.
En este artículo, aprenderemos a ocultar la contraseña usando HTML.
Acercarse:
Método 1: Usar el tipo de entrada = «contraseña»
<input type="password" placeholder="Enter your Password">
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-family: Arial;
margin: 2px;
padding: 10px;
text-align: center;
position: flex;
}
h2 {
color: green;
padding: 2px;
}
body {
margin-top: 10%;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<b>Hiding password</b>
<form action="#" method="POST">
<label> <b>Username:</b> </label>
<input type="text"
placeholder="Enter Username" required />
<br /><br />
<label> <b>Password:</b> </label>
<input type="password"
placeholder="Enter Password" required />
<br /><br />
<button type="submit">Submit</button>
</form>
</body>
</html>
Producción:
Método 2: Usar el tipo de entrada = «texto»
- Este método no es muy preferido, en este método simplemente estaríamos camuflando el texto en algunos caracteres de nuestra elección.
- Este método carece de seguridad y se recomienda solo para enmascarar contraseñas con otros caracteres como cuadrados, círculos, etc.
-
Para cuadrados: -webkit-text-security: cuadrado
-
Para círculos: -webkit-text-security: círculo
-
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-family: Arial;
margin: 2px;
padding: 10px;
text-align: center;
position: flex;
}
body {
margin-top: 10%;
}
</style>
</head>
<body>
<form action="#" method="POST">
<label> <b>Username</b> </label>
<input type="text"
placeholder="Enter Username" required />
<br /><br />
<label> <b>Password</b> </label>
<input type="text"
style="-webkit-text-security: circle"
placeholder="Enter Password" required />
<br />
<label> <b>Password</b> </label>
<input type="text"
style="-webkit-text-security: square"
placeholder="Enter Password" required />
<br /><br />
<button type="submit">Submit</button>
</form>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por hariketsheth y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA