ホームページ > 記事 > ウェブフロントエンド > JavaScriptを使用して動的にフォームを作成する方法
###############概要###
完全に動的な HTML フォームを作成するには、createElement()
、setAttribute()
###文法### このタスクで使用される構文 - createElement()
メソッドは、HTML 要素を作成するために使用されます。例: div、ボタン、p、ラベルなど。リーリー
setAttribute() メソッドは、要素に属性を挿入するために使用されます。 setAttribute() メソッド内の値は、キーと値のペアとして渡されます。例: ("プレースホルダー"、"名前")、("タイプ"、"送信")、("値"、"送信") など。
appendChild() メソッドは、createElement() を使用して作成した要素を任意の body タグに挿入します。直接要素の要素参照は、引数として appendChild() に渡されます。
− エディターで簡単な HTML 定型コードを作成します。また、動的フォームが読み込まれるボタンとフォーム ラベルも作成します。
− 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 サイトの他の関連記事を参照してください。