HTML DOM パスワード入力フィールドの type プロパティとは？使い方を解説
HTML DOM の Input Password オブジェクトが持つ type プロパティは、type 属性に「password」が設定された input 要素に関連付けられたプロパティです。このプロパティは、パスワード入力フィールドに対して常に文字列「password」を返します。
構文
パスワード型 input 要素の type プロパティは、以下のように記述します。
passwordObject.type
サンプルコード
それでは、Input Password の type プロパティを使った具体的な例を見てみましょう。
<!DOCTYPE html>
<html>
<body>
<h1>password type property</h1>
PASSWORD: <input type="password" id="PASS1">
<p>Get the above element type by clicking the below button</p>
<button onclick="getType()">Get Type</button>
<p id="Sample"></p>
<script>
function getType() {
var t = document.getElementById("PASS1").type;
document.getElementById("Sample").innerHTML = "The type for the input field is : "+t;
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、次のような画面が表示されます。
続いて、「Get Type」ボタンをクリックすると以下のようになります。
コードの解説
上記の例では、以下のような処理を行っています。
まず、type 属性に「password」を指定し、id を「PASS1」とした input 要素を作成しています。
PASSWORD: <input type="password" id="PASS1">
次に、「Get Type」ボタンを配置し、ユーザーがクリックすると getType() 関数が実行されるように設定しています。
<button onclick="getType()">Get Type</button>
getType() 関数の中では、getElementById() メソッドを使って対象の input 要素を取得し、その type 属性の値を変数 t に代入します。その後、innerHTML プロパティを利用して、id が「Sample」の段落要素に取得した値を表示しています。
function getType() {
var t = document.getElementById("PASS1").type;
document.getElementById("Sample").innerHTML = "The type for the input field is : "+t;
}
まとめ
type プロパティを使えば、JavaScript からフォーム要素の種類を簡単に判別できます。パスワード入力フィールドの場合は必ず「password」が返されるため、フォームのバリデーションや動的な UI 制御を実装する際に役立ちます。ボタンクリックなどのユーザーアクションと組み合わせることで、直感的なインターフェースを構築できます。
-
HTML DOM Input Reset typeプロパティとは?使い方をわかりやすく解説
HTML DOMのInput Resetオブジェクトのtypeプロパティは、type=resetが設定されたinput要素(リセットボタン)に関連付けられています。このプロパティは、リセットボタン要素に対して常に「reset」という文字列を返します。 構文 reset typeプロパティの基本的な構文は以下の通りです。 resetObject.type サンプルコード それでは、reset typeプロパティの具体的な使用例を見ていきましょう。 <!DOCTYPE html> <html> <body> <h1>Input reset type
-
HTML DOM パスワード入力フィールドの type プロパティとは？使い方を解説
HTML DOM の Input Password オブジェクトが持つ type プロパティは、type 属性に「password」が設定された input 要素に関連付けられたプロパティです。このプロパティは、パスワード入力フィールドに対して常に文字列「password」を返します。 構文 パスワード型 input 要素の type プロパティは、以下のように記述します。 passwordObject.type サンプルコード それでは、Input Password の type プロパティを使った具体的な例を見てみましょう。 <!DOCTYPE html> <html