ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptを使用して動的にフォームを作成する方法

JavaScriptを使用して動的にフォームを作成する方法

WBOY
WBOY転載
2023-09-13 23:53:08881ブラウズ

###############概要###

完全に動的な HTML フォームを作成するには、如何使用 JavaScript 动态创建表单createElement()

setAttribute()

、## などのドキュメント オブジェクト モデル (DOM) メソッドを使用して作成できます。 #appendChild( )

。これらの DOM メソッドは、動的な HTML フォームを構築するのに役立ちます。この動的フォームを構築する方法は、スクリプト タグ内にすべての要素を作成し、プロパティを設定して機能を追加し、最後に要素を提供する準備ができたら、それを要素の親要素に追加します。したがって、親 form タグ内に追加されるすべての要素は子要素です。

###文法### このタスクで使用される構文 - createElement()

メソッドは、HTML 要素を作成するために使用されます。例: div、ボタン、p、ラベルなど。

リーリー

  • setAttribute() メソッドは、要素に属性を挿入するために使用されます。 setAttribute() メソッド内の値は、キーと値のペアとして渡されます。例: ("プレースホルダー"、"名前")、("タイプ"、"送信")、("値"、"送信") など。

  • リーリー
  • appendChild() メソッドは、createElement() を使用して作成した要素を任意の body タグに挿入します。直接要素の要素参照は、引数として appendChild() に渡されます。

  • リーリー ###アルゴリズム###
    ステップ 1
  • エディターで簡単な HTML 定型コードを作成します。また、動的フォームが読み込まれるボタンとフォーム ラベルも作成します。

ステップ 2

script タグ内に JavaScript アロー関数を作成します。 ステップ 3

フォーム タグは ID 名によって定義されているため、document.getElementById() を使用して変数内のフォームを取得します。 ステップ 4

ここから動的フォームの構築を開始します。ドキュメントの createElement() メソッドを使用して新しい要素を作成します。 リーリー ステップ 5

次に、setAttribute() メソッドを使用して、上で作成した要素に属性を設定します。 リーリー ステップ 6

appendChild() メソッドを使用して、上記で作成した要素を ID 名「dform」として親要素「form」に追加します。 リーリー ステップ 7

ステップ 4 ~ 6 を繰り返し、フォームに必要なフィールドをすべて作成します。 ステップ 8

createElement() を使用して別の要素 div を作成し、それぞれ送信とリセットの 2 つのボタンを作成し、これらの 2 つのボタンをそれにアタッチします。 ステップ 9

「フォームの生成」ボタンをクリックして「gForm()」関数をトリガーし、フォームを動的に生成します。 ###例### 指定された例では、JavaScript を使用してフォームを構築しました。したがって、form タグ内のすべての要素は、body タグ内の要素のように静的に構築されません。このフォームには学生登録用の特定のフィールドが含まれています。フィールドは名前、電子メール、住所、生年月日、電話番号であるため、これらはすべてスクリプト タグから動的にレンダリングされます。 リーリー

以下の画像は、上記の例の出力を示しており、学生登録フォーム生成ボタンが表示されています。フォーム生成ボタンをクリックしない場合は、以下のようなシンプルなページが表示されます。

上の [フォームの生成] ボタンをクリックすると、スクリプト タグ内に作成されたアロー関数がトリガーされ、その結果、学生登録に必要なすべてのフィールドを含むフォームが動的に生成されます。 ###結論は### このタスクを完了すると、Web ページに動的要素を作成できるようになります。 Web ページ内の動的コンテンツにより、ページの読み込み時にサーバーが最初に巨大なコード全体に応答する必要がなくなるため、ページの読み込みが速くなります。動的フォームにより、ページがよりインタラクティブになります。

以上がJavaScriptを使用して動的にフォームを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。