web-dev-qa-db-ja.com

ajax経由で送信するときにformタグを使用する理由

哲学的質問：

requires javascriptと最新のブラウザを備えたWebアプリがあるため、プログレッシブエンハンスメントは問題ありません。フォームがJavaScriptを介して構築され、データの更新がすべてajax POSTおよびPUTを介して行われている場合、フォームタグでコントロールをラップする理由は本当にありますか？たとえば、セマンティックまたは構造上の理由でタグを引き続き使用する場合、無視するアクションおよびメソッドのパラメーターがある理由はありますか？それは、私にとって、以前の時代からのホールドオーバーのような感じです。

javascripthtmlajaxforms
76
sprugman

フォームタグ内に入力をラップすることによって具体的に提供される、少なくとも1つの重要なユーザーエクスペリエンス機能があります。

エンターキーがフォームを送信します。実際、Mobile Safariでは、これがを取得する方法です「ボタン キーボードに表示される 。

入力をラップするフォームがなければ、送信するものは何もありません。

もちろん、キー押下イベントを通じてエンターキーの動作を提供できますが、これがモバイルデバイスで機能するかどうかはわかりません。私はあなたのことは知りませんが、イベントで模倣するよりも、ブラウザが提供するセマンティクスを使用したいです。

あなたの場合は、フォームのonsubmitイベントハンドラを提供するだけで、AJAX submit、then return false、実際の送信をキャンセルします。

単にaction=""（「自己」を意味する）、およびmethodは必須ではありません。デフォルトはGETです。

70
Nicole

プログレッシブエンハンスメントが必要ない場合、理論的にはそれらは必要ありません。

一方、formsには、クールなグループ化とセマンティックの効果があります。これらを使用して、フォーム要素を論理的にグループ化にでき、スクリプトが特定の要素の値を収集しやすくします。

たとえば、ユーザー入力をajax送信する場合は、「この入力、これら2つの選択、これら3つのテキストエリアを取得して送信する」よりも、「このフォームのすべての要素を取得して送信する」と言う方が簡単です。 「。私の経験では、formタグが存在する場合、実際に開発者を支援します。

15
kapa

AJAXは素晴らしいですが、JamWaffles（彼に+1）が言ったように、formタグを使用するとフォールバックメソッドが提供されます。

個人的にはAJAXで送信するものでもフォームタグを使用します。構文が明確で、特定のフォーム内のすべての入力を簡単に取得できるからです。はい、divまたは何でもですが、私が言ったように、フォームを使用することは構文的にいいです。

ちなみに、スクリーンリーダーはform内のコンテンツを異なる方法で処理するため、どの方法を選択しても、アクセシビリティの問題を考慮する必要があります。事例証拠は、Googleがランキングでアクセシビリティを考慮することを示唆しているため、SEOが懸念事項である場合は、フォームを使用して適切に実行することに注意してください。

12
Endophage

概要：MVC、単純なWebアプリ、コンポーネント指向のリッチWebアプリには不適切なフォーム。

理由：フォームは他のフォームをネストできません：コンポーネント指向アーキテクチャの大きな制限。

詳細：典型的なMVCアプリケーションの場合、フォームは優れています。多くのJavaScriptとAJAXを使用し、あちこちに多くのコンポーネントがあるリッチで複雑なWebアプリケーションでは、フォームが好きではありません。理由：フォームは別のフォームをネストできません。コンポーネントはフォームをレンダリングしますが、コンポーネントは互いにネストできません。残念です。すべてのフォームをdivに変更することでネストでき、ajaxに渡すためにすべてのパラメーターを取得したいときはいつでも（jQuery）

$（ "＃id_of_my_div"）。find（ "[name]"）。serialize（）;

（またはその他のフィルタリング）

の代わりに：

$（ "＃id_of_my_form"）。serialize（）;

しかし、感傷的およびセマンティック上の理由から、フォームとして機能しているときに、divにsomething_formという名前を付け続けています。

6
Alex Jurado - Bitendian

私が見ることができるというわけではありません。現在、<form>sを使用するWebアプリケーションを構築していますが、ユーザーがJavaScriptを無効にしている場合はフォールバックメソッドを使用しています（e.preventDefaultはフォームの投稿を正常に停止します）。ユーザーがJavaScriptを持っている必要があると言っている状況では、<form>タグは必要ありませんが、ブラウザで何かを行う必要がある場合や、アクセスする場合に備えて保持することをお勧めします。一種のクラスとして。

つまり、純粋なAJAXを実行している場合は<form>を使用する必要はありませんが、将来フォールバックコードを作成することにした場合はそのままにしておくことをお勧めします。

2
Bojangles

私の意見では、セマンティック上の理由で使用する場合は、意図したとおりに使用してください。 action属性は整形式である必要があります（空のままでもかまいません）。また、action属性を設定し、ajax呼び出しの前に読み取ることにより、URIをjsロジックから分離できます。

2
aorcsik

ここでformタグを使用する必要がある理由がわかりません。フォームタグを使用する唯一の理由は（マークアップを検証するため以外）、ユーザーにsumbit入力またはボタンタグを使用してデータを「送信」させる場合です。それをする必要がない場合、フォームは必要ありません。ただし、「有効な」マークアップと見なされるかどうかはわかりません。使用する場合は、<form action=""> as actionは、formタグの唯一の必須属性です。ただし、良い点を挙げてください。Webアプリケーションの将来は、おそらくフォームや従来の送信方法を必要としないでしょう。非常に興味深い、そして私を幸せにします。へへ:)

0
Brian Patterson