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

HTMLDOMフォームオブジェクト

HTML DOM Formオブジェクトは、HTMLの

要素に関連付けられています。ドキュメントオブジェクトのcreateElement（）メソッドとgetElementById（）メソッドを使用して、フォーム要素を作成してアクセスできます。フォームオブジェクトのさまざまなプロパティを設定し、それらを取得することもできます。

プロパティ

フォームオブジェクトのプロパティは次のとおりです-

プロパティ 説明
acceptCharset フォームにaccept-charset属性値を設定または返すため。
アクション フォームのアクション属性値を設定または返すには
オートコンプリート フォームのオートコンプリート属性値を設定または返すため。
エンコーディング これは単なるenctypeのエイリアスです。
Enctype フォームのenctype属性値を設定または返すため。
長さ フォームに含まれる要素の数を返すため。
メソッド フォームのメソッド属性値を設定または返すため。
名前 フォームのname属性値を設定または返すため。
noValidate ユーザーが送信したときに、フォームデータを検証する必要があるかどうかを設定または返すため。
ターゲット フォームのターゲット属性値を設定または返すため。

メソッド

以下はフォームオブジェクトメソッドです-

メソッド 説明
reset（） フォームをリセットします。
submit（） フォームを送信します。

例

HTMLDOMフォームオブジェクトの例を見てみましょう-

<!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>

これにより、次の出力が生成されます-

HTMLDOMフォームオブジェクト

[作成]ボタンをクリックして、入力フィールドに何かを入力すると-

HTMLDOMフォームオブジェクト

上記の例では-

ユーザーがクリックするとcreateForm（）メソッドを実行するCREATEボタンを作成しました-

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

CreateForm（）メソッドは、ドキュメントオブジェクトのcreateElement（）メソッドを使用して要素を作成し、それを変数fに割り当てます。次に、フォーム要素は、appendChild（）メソッドを使用してドキュメント本文に追加されます。次に、createElement（）メソッドを使用して入力要素を作成し、setAttribute（）メソッドを使用して値が「password」のtype属性を作成します。

setAttribute（）メソッドは、属性が以前に存在しなかった場合に属性を作成します。最後に、フォーム要素でappendChild（）メソッドを使用し、入力要素をパラメーターとして渡すと、入力要素がフォーム要素の子として追加されます-

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

  1. HTMLDOMオブジェクトフォームプロパティ

    HTML DOM Object formプロパティは、要素の囲みフォームの参照を返します。 以下は構文です- フォームへの参照を返す オブジェクト ObjectElement.form オブジェクトフォームプロパティの例を見てみましょう − 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Object form</title> <style>    form {       width:70%;   &nbs

  2. HTMLDOMUlオブジェクト

    HTMLのHTMLDOMUlオブジェクトは、 を表します 要素。 を作成する 要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」 次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ 説明 コンパクト 順不同リストを通常より小さく表示するかどうかを設定/返します タイプ 順序付けされていないリストのtype属性の値を設定/返します 順不同リストの例を見てみましょう 要素- 例 <!DOCTYPE