HTMLでパスワードを隠す方法?
パスワードを隠すことは一般的にパスワードマスキングとして知られています.これは、弾丸(の)、アスタリスク(*)、またはいくつかの他の文字を使用してユーザーが入力したときにパスワード文字を隠している.
それは常にセキュリティを確保し、その誤用を避けるためにパスワードを使用して良い練習です.一般的に、パスワードマスキングは、パスワードが公開されないように画面が公開されているときに、任意のユーザーから文字を非表示にするのに役立ちます.
この記事では、HTMLを使用してパスワードを隠すことを学びます.
このメソッドは非常に好まれません、このメソッドでは、我々はちょうど我々自身の選択の若干の性格にテキストを偽装しています. このメソッドはセキュリティを奪われ、四角形や円などの他の文字でパスワードマスクのみを推奨します.
正方形のための :- WebKitテキスト・セキュリティ:スクエア 円のための:- WebKitテキストセキュリティ:円
それは常にセキュリティを確保し、その誤用を避けるためにパスワードを使用して良い練習です.一般的に、パスワードマスキングは、パスワードが公開されないように画面が公開されているときに、任意のユーザーから文字を非表示にするのに役立ちます.
この記事では、HTMLを使用してパスワードを隠すことを学びます.
アプローチ
方法1 :入力タイプ=パスワードを使用する
<input type="password" placeholder="Enter your Password">
<!DOCTYPE html>
<html>
<head>
<style>
@import url(https://fonts.googleapis.com/css?family=Salsa);
* {
font-family: Salsa;
font-weight: bolder;
margin: 2px;
padding: 10px;
text-align: center;
position: flex;
}
h2 {
margin-left: 350px;
background: #000;
color: #fff;
padding: 10px;
width: 100px;
position: inline;
text-align: center;
border-radius: 10px;
}
body {
margin-top: 10%;
}
input{
font-weight: normal;
}
button{
background: #0275d8;
color: #fff;
padding: 15px;
border: none;
border-radius: 30px;
width: 100px;
}
</style>
</head>
<body>
<h2>DEV</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>
方法2 :入力タイプ=" text "を使う
正方形のための
例:
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-family: Arial;
margin: 2px;
padding: 10px;
text-align: center;
position: flex;
}
button{
background: #000;
color: #fff;
font-weight: bolder;
padding: 15px;
border: none;
border-radius: 30px;
width: 100px;
}
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>
Reference
この問題について(HTMLでパスワードを隠す方法?), 我々は、より多くの情報をここで見つけました https://dev.to/hariketsheth/how-to-hide-passwords-in-html-3oenテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol