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

HTML DOM フォームオブジェクトの使い方｜主要なプロパティとメソッドをわかりやすく解説

HTML DOM のフォームオブジェクト（Form Object）は、HTML の <form> 要素に対応するオブジェクトです。document オブジェクトが持つ createElement() メソッドや getElementById() メソッドを使用することで、フォーム要素を動的に生成したり、既存のフォームへアクセスしたりできます。また、フォームオブジェクトにはさまざまなプロパティがあり、値の設定（set）と取得（get）の両方が可能です。

フォームオブジェクトの主なプロパティ

フォームオブジェクトで利用できる代表的なプロパティは以下のとおりです。

プロパティ説明
acceptCharsetフォームの accept-charset 属性の値を設定または取得します。
actionフォームの action 属性の値を設定または取得します。
autocompleteフォームの autocomplete 属性の値を設定または取得します。
encodingenctype の別名（エイリアス）です。
enctypeフォームの enctype 属性の値を設定または取得します。
lengthフォーム内に含まれる要素の数を返します。
methodフォームの method 属性の値を設定または取得します。
nameフォームの name 属性の値を設定または取得します。
noValidateユーザーが送信した際にフォームデータを検証するかどうかを設定または取得します。
targetフォームの target 属性の値を設定または取得します。

フォームオブジェクトのメソッド

フォームオブジェクトには、次の2つのメソッドが用意されています。

メソッド説明
reset()フォームの内容を初期状態にリセットします。
submit()フォームを送信します。

サンプルコード

それでは、HTML DOM のフォームオブジェクトを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<script>
    function CreateForm() {
       var f = document.createElement("FORM");
       document.body.appendChild(f);
       var i = document.createElement("INPUT");
       i.setAttribute("type", "password");
       f.appendChild(i);
    }
</script>
</head>
<body>
<h1>Form object example</h1>
<p>Create a FORM element containing an input element by clicking the below button</p>
<button onclick="CreateForm()">CREATE</button>
<br><br>
</body>
</html>

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

HTML DOM フォームオブジェクトの使い方｜主要なプロパティとメソッドをわかりやすく解説

CREATE ボタンをクリックし、入力フィールドに文字を入力すると、次のように表示されます。

HTML DOM フォームオブジェクトの使い方｜主要なプロパティとメソッドをわかりやすく解説

コードの解説

このサンプルでは、まずクリックされると CreateForm() 関数を実行する CREATE ボタンを作成しています。

<button onclick="CreateForm()">CREATE</button>

CreateForm() 関数の中では、document オブジェクトの createElement() メソッドを使って <form> 要素を生成し、変数 f に代入しています。その後、appendChild() メソッドによって、このフォーム要素を document の body に追加します。

続いて、同じく createElement() メソッドで input 要素を生成し、setAttribute() メソッドを使って type 属性に「password」を設定しています。setAttribute() メソッドは、指定した属性がまだ存在しない場合には新しく属性を作成する働きもあります。

最後に、フォーム要素に対して appendChild() メソッドを呼び出し、引数として input 要素を渡すことで、input 要素をフォームの子要素として追加しています。

  1. HTML DOM Object の form プロパティとは？使い方とサンプルコードを解説

    HTML DOM Object の form プロパティとはHTML DOM の form プロパティは、<object> 要素が配置されている親フォーム（enclosing form）への参照を返すプロパティです。このプロパティを使うことで、JavaScript からオブジェクト要素がどのフォームに属しているかを動的に取得できます。構文form オブジェクトへの参照を取得する場合、以下のように記述します。ObjectElement.form戻り値として、該当する <object> 要素を囲んでいるフォームオブジェクトが返されます。もし <object> 要

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注