1つのウェブページで2つのフォームを扱う

Question

私はdivエリアを持つウェブページを持っています。この領域には、2つの異なる形式があります。だから、2つの異なる形態がある

<div id="data" ...> 
    <form action="/action2" method="post"> 
     <label for="label1">ID</label> 
     <input type="text" name="id" id="label1" value="" /> 
     <label for="label2">Firstname</label> 
     <input type="text" name="first" id="label2" value="" /> 
     <label for="label3">Lastname</label> 
     <input type="text" name="last" id="label3" value="" /> 
     <label for="label4">Address</label> 
     <input type="text" name="address" id="label4" value="" /> 
     <label for="label5">eMail</label> 
     <input type="text" name="mail" id="label5" value="" /> 
    </form> 
</div> 

：

フォーム1：

<div id="data" ...> 
    <form action="/action1" method="post"> 
     <label for="label1">ID</label> 
     <input type="text" name="id" id="label1" value="" /> 
     <label for="label2">Name</label> 
     <input type="text" name="name" id="label2" value="" /> 
     <label for="label3">Description</label> 
     <input type="text" name="desc" id="label3" value="" /> 
     <label for="label4">Address</label> 
     <input type="text" name="address" id="label4" value="" /> 
    </form> 
</div> 

フォーム2 それはこのようになります。値はjQuery（バックエンドへのAjax呼び出し）で設定されます。

これらの2つのフォームを処理する最も良い方法は何ですか？私はフォームだけで2つのファイルを作成する必要があり、必要なときにフォームをロードする必要がありますか？ （フォーム1は、ボタン1をクリックするときに必要です。フォーム2は、ボタン2をクリックすると必要です。イベントはクライアント側で処理されます）。 または、両方のフォームを単一のHTMLファイルに配置して、フォームを有効または無効にする必要がありますか？

Answer 1

HTMLに両方のフォームがあり、条件付きで非表示にする/アクティブにしたいものを表示することは何もありません。あなたは、各フォーム（またはそのdivを含む）に一意のIDを与え、これを使用してjQueryを使用して表示/非表示にすることをお勧めします。

Answer 2

私は両方のフォームを同じページに保管してください。必要なフォームを表示/非表示にします。

フォームを別々のHTMLファイルに保存してユーザーがいずれかのボタンをクリックすると、フォームのHTMLを取得するためにXMLHttpRequestにする必要があります。同じページ内のフォームのHTML。

ウェブサイトの視聴者が非常に多いかどうかわかりません。しかし、単一のHttpRequestを保存すると非常に便利です。

Minimize HTTP Requests by Yahoo developersを参照してください。彼らは明らかにHTTP要求を最小限にすることを提案します。