HTML DOM Input Searchオブジェクトとは？主なプロパティと使い方を解説
HTML DOMのInput Searchオブジェクトは、type属性に「search」が指定された<input>要素に関連付けられています。JavaScriptでは、新しい検索フィールドの作成にcreateElement()メソッドを、既存の要素へのアクセスにgetElementById()メソッドを使用します。
Input Searchオブジェクトの主なプロパティ
Input Searchオブジェクトには、検索フィールドの状態や属性を操作するための以下のプロパティが用意されています。
| プロパティ | 説明 |
|---|---|
| autocomplete | オートコンプリート機能の有効・無効を設定または取得します。 |
| autofocus | ページ読み込み時に検索フィールドへ自動的にフォーカスを当てるかどうかを設定または取得します。 |
| defaultValue | 検索フィールドのデフォルト値を設定または取得します。 |
| disabled | 検索フィールドが無効化されているかどうかを設定または取得します。 |
| form | 検索フィールドを含むフォームへの参照を返します。 |
| list | 検索フィールドに関連付けられたdatalist要素への参照を返します。 |
| maxLength | 検索フィールドに入力できる最大文字数（maxlength属性の値）を設定または取得します。 |
| name | 検索フィールドのname属性値を設定または取得します。 |
| pattern | 入力値の検証に使用されるpattern属性値を設定または取得します。 |
| placeholder | 検索フィールドのplaceholder属性値（ヒントテキスト）を設定または取得します。 |
| readOnly | 検索フィールドが読み取り専用かどうかを設定または取得します。 |
| required | フォーム送信前に検索フィールドの入力が必須かどうかを設定または取得します。 |
| size | 検索フィールドのsize属性値（表示幅）を設定または取得します。 |
| type | 読み取り専用プロパティです。検索フィールドのフォーム要素としての種類を返します。 |
| value | 検索フィールドのvalue属性値を設定または取得します。 |
構文
Input Searchオブジェクトを作成する際の基本的な構文は以下の通りです。
var P = document.createElement("INPUT");
P.setAttribute("type", "search");サンプルコード
次の例では、ボタンをクリックするとtype="search"の入力フィールドがページに動的に追加されます。
<!DOCTYPE html>
<html>
<head>
<script>
function createSearch() {
var S = document.createElement("INPUT");
S.setAttribute("type", "search");
document.body.appendChild(S);
}
</script>
</head>
<body>
<p>下のボタンをクリックすると、type="search"の入力フィールドが作成されます</p>
<button onclick="createSearch()">CREATE</button>
<br><br>
FRUITS:
</body>
</html>実行結果
このコードを実行すると、以下のように表示されます。
CREATEボタンをクリックすると、検索フィールドがページに追加されます。
-
HTML DOMのInput Textオブジェクトとは？基本構文・プロパティ一覧と実例コードを解説
HTML DOMのInput Textオブジェクトは、<input>要素のうちtype=textが指定された要素に対応するオブジェクトです。テキスト入力欄を表すこのオブジェクトは、新規に作成する場合はcreateElement()メソッドを、既存の要素へアクセスする場合はgetElementById()メソッドを使用します。本記事では、Input Textオブジェクトで利用できる主なプロパティの一覧と、基本的な構文、実際に動作するサンプルコードをわかりやすく解説します。Input Textオブジェクトの主なプロパティInput Textオブジェクトには、以下のようなプロパティが用意
-
HTML DOM 入力パスワード（Input Password）オブジェクトとは？使い方を解説
HTML DOM 入力パスワードオブジェクトとはHTML DOM の入力パスワード（Input Password）オブジェクトは、type属性に「password」が指定された <input> 要素に関連付けられたオブジェクトです。パスワード入力欄として表示されるこの要素は、文字が「●」や「＊」などでマスクされ、第三者から入力内容が見えないようになっています。JavaScript を使ってパスワード入力要素を操作するには、新規に作成する場合は createElement() メソッド、既存の要素へアクセスする場合は getElementById() メソッドを使用します。Input