HTML DOM 入力テキストの name プロパティとは？設定・取得方法を解説
HTML DOM の Input Text（テキスト入力フィールド）の name プロパティは、name 属性の値を設定または取得するために使用されます。name 属性は、フォームデータがサーバーへ送信された後、そのデータを識別するために重要な役割を果たします。
構文
name プロパティの構文は以下のとおりです。
name プロパティを設定する場合
textObject.name = name
ここでの name には、テキストフィールドに付ける名前を指定します。
name プロパティを取得する場合
textObject.name
サンプルコード
それでは、Input Text の name プロパティを使用した具体的な例を見てみましょう。ボタンをクリックすると、テキストフィールドの name 属性が動的に変更される仕組みです。
<!DOCTYPE html>
<html>
<body>
<h1>Input Text name Property</h1>
USERNAME: <input type="text" id="USR" name="user_name">
<p>Change the name of the text field by clicking the below button</p>
<button onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
function changeName() {
document.getElementById("USR").name ="NEW_USER" ;
document.getElementById("Sample").innerHTML = "Text field name is now NEW_USER";
}
</script>
</body>
</html>
実行結果
上記のコードをブラウザで開くと、次のような画面が表示されます。
「CHANGE NAME」ボタンをクリックすると、テキストフィールドの name 属性が「NEW_USER」に変更され、画面には完了メッセージが表示されます。
ポイントまとめ
- name プロパティを使えば、JavaScript から name 属性を動的に設定・取得できます。
- name 属性はフォーム送信時にデータのキーとして機能するため、サーバーサイドでのデータ受け取りに不可欠です。
- id 属性はページ内で一意である必要がありますが、name 属性は用途によっては複数要素で共有できる点も覚えておくと便利です。
-
HTML DOM 入力テキストの autofocus プロパティとは？使い方をサンプルコード付きで解説
HTML DOM の input Text autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性と関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際に入力テキストフィールドへ自動的にフォーカスを当てるかどうかを、設定または取得することができます。例えば、ログインフォームや検索ボックスなど、ユーザーにすぐに入力してほしい場面で活用すると、マウス操作なしでキーボード入力を開始できるため、ユーザビリティの向上につながります。構文autofocus プロパティを設定する場合の構文は以下の通りです。textObje
-
HTML DOM Input Text autocomplete（オートコンプリート）プロパティの使い方
HTML DOM の Input Text autocomplete プロパティは、type=text が指定された <input> 要素の autocomplete 属性と連動するプロパティです。この属性には「on」または「off」のいずれかの値を指定でき、「on」を設定すると Web ブラウザはユーザーの過去の入力履歴に基づいてテキストを自動補完します。一方、「off」を設定した場合は自動補完が行われません。 構文 autocomplete プロパティを設定する際の構文は以下のとおりです。 textObject.autocomplete = on|off 「on」を指定すると