HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Input Email placeholderプロパティの使い方とサンプルコード解説

HTML DOM の Input Email placeholder プロパティは、メールアドレス入力フィールド（<input type="email">）に対して、ユーザーがどのような内容を入力すべきかを示すヒント文字列を設定・取得するためのプロパティです。プレースホルダーとして設定されたテキストは、入力欄が空の状態でグレー表示され、ユーザーが入力を始めると自動的に消えます。

構文

placeholder プロパティの基本的な構文は以下のとおりです。

値を取得する場合

inputEmailObject.placeholder

値を設定する場合

inputEmailObject.placeholder = stringValue

stringValue には、入力欄に表示したいヒントとなる文字列を指定します。

サンプルコード

以下は、Input Email placeholder プロパティを使用した実際の動作例です。ボタンをクリックすると、JavaScript によって placeholder が動的に設定されます。

<!DOCTYPE html>
<html>
<head>
<title>Input Email placeholder</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Email-placeholder</legend>
<label for="EmailSelect">社員ID：
<input type="email" id="EmailSelect">
</label>
<input type="button" value="どんな内容を入力すればいい？" onclick="setPlaceholder()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputEmail = document.getElementById("EmailSelect");
    function setPlaceholder() {
        inputEmail.placeholder = 'Name-ID@MNC.com';
        divDisplay.textContent = inputEmail.placeholder+' --> Name と ID を実際の情報に置き換えて入力してください。';
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のように動作します。

「どんな内容を入力すればいい？」ボタンをクリックする前：

入力欄は空の状態で表示され、プレースホルダーのヒントはまだ設定されていません。

「どんな内容を入力すればいい？」ボタンをクリックした後：

JavaScript の setPlaceholder() 関数が実行され、入力欄に「Name-ID@MNC.com」というヒントが表示されます。同時に、div 要素には「Name と ID を実際の情報に置き換えて入力してください」という説明文が出力されます。

ポイントまとめ

  • placeholder プロパティは、<input type="email"> 要素の入力ヒントを動的に操作できる
  • 値の取得も設定も同じプロパティ名で行える
  • プレースホルダーはあくまでヒントであり、label 要素の代わりにはならないため、アクセシビリティの観点では両方の併用が推奨される
  1. HTML DOM パスワード入力フィールドのplaceholderプロパティの使い方

    HTML DOM の Input Password（パスワード入力）オブジェクトにおける placeholder プロパティは、パスワード入力フィールドの placeholder 属性の値を取得・設定するために使用されます。placeholder（プレースホルダー）は、ユーザーが何も入力していない状態で入力フィールド内にヒントとなるテキストを表示する機能です。デフォルトではグレー表示され、value プロパティとは異なり、フォーム送信時にはその値が送信されない点に注意してください。構文placeholder プロパティを設定する場合の構文は以下のとおりです。passwordObject.pla

  2. HTML DOM Textareaのplaceholderプロパティとは？取得・設定方法をサンプルコード付きで解説

    HTML DOM の Textarea placeholder プロパティを使用すると、HTMLドキュメント内のテキストエリア（<textarea>）要素に設定された placeholder 属性の値を取得したり、変更したりすることができます。placeholder 属性は、ユーザーが入力する前にテキストエリア内に表示されるヒントテキスト（例：「お問い合わせ内容をご記入ください」など）を指定するために使われます。JavaScriptからこの値を動的に操作できるのが、このプロパティの特徴です。構文placeholder プロパティの基本的な構文は以下の通りです。1. placehol