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

【初心者向け】HTML DOM Input Search の placeholder プロパティの使い方

HTML DOM の Input Search placeholder プロパティは、検索用入力フィールド（<input type="search">）の placeholder 属性の値を取得・設定するために使用されるプロパティです。

placeholder プロパティとは？

placeholder プロパティを利用すると、ユーザーがまだ何も入力していない状態で、入力フィールドの中にヒントとなるテキストを表示できます。これにより、「何を入力すればよいのか」をユーザーに事前に伝えることが可能になります。

なお、プレースホルダーのテキストはデフォルトで薄いグレー色で表示され、value プロパティの値とは異なり、フォーム送信時にはサーバーへ送信されない点に注意してください。

構文

placeholder プロパティを設定する場合

searchObject.placeholder = text

ここで text には、検索フィールドの使い方などをユーザーに伝えるヒントとして表示したいテキストを指定します。

placeholder プロパティを取得する場合

searchObject.placeholder

値を指定せずにプロパティを参照すると、現在設定されているプレースホルダーのテキストを文字列として取得できます。

サンプルコード

以下は、Input Search の placeholder プロパティを使用した具体的な例です。ボタンをクリックすると、JavaScript によってプレースホルダーのテキストが動的に変更されます。

<!DOCTYPE html>
<html>
<body>
<h1>Search placeholder property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>
<p>下のボタンをクリックすると、上の入力フィールドのプレースホルダーテキストが変更されます。</p>
<button onclick="changeHolder()">CHANGE</button>
<script>
    function changeHolder() {
        document.getElementById("SEARCH1").placeholder = "Search for the fruits here..";
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のように表示されます。

【初心者向け】HTML DOM Input Search の placeholder プロパティの使い方

続いて CHANGE ボタンをクリックすると、placeholder の値が書き換わり、入力欄に表示されるヒントテキストが「Search for the fruits here..」に変わります。

【初心者向け】HTML DOM Input Search の placeholder プロパティの使い方

まとめ

placeholder プロパティを使えば、JavaScript から検索フィールドのヒントテキストを自由に読み書きできます。入力例や記述フォーマットの案内など、ユーザービリティ向上のためにぜひ活用してみてください。

  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