[解決済み】HTMLフォームのネスト制限を克服する方法は?
質問
XHTMLがネストしたフォームタグをサポートしないことは知っていますし、このテーマに関してStack Overflowの他の回答も読みましたが、この問題に対するエレガントな解決策がまだ見つかっていません。
必要ない」「必要なシナリオが思いつかない」という意見もあります。まあ、個人的には、このようなシナリオは考えられませんが していない 必要です。
ごく簡単な例を見てみましょう。
ブログアプリを作っていて、新しい記事を作成するためのいくつかのフィールドを持つフォームと、"Save", "Delete", "Cancel" といったアクションを持つツールバーを持っているとします。
<form
action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"
method="post">
<input type="text" name="foo" /> <!-- several of those here -->
<div id="toolbar">
<input type="submit" name="save" value="Save" />
<input type="submit" name="delete" value="Delete" />
<a href="/home/index">Cancel</a>
</div>
</form>
私たちの目的は、フォームを次のように書くことです。 JavaScriptを必要としない HTMLのフォームと送信ボタンだけです。
アクションの URL は Form タグで定義され、個々の送信ボタンでは定義されないので、唯一の選択肢は汎用 URL に投稿して、送信されたボタンの名前を決定するために "if...then...else" を開始することです。あまりエレガントではありませんが、JavaScriptに頼りたくないので、唯一の選択肢です。
唯一の問題は、このアクションに必要なのはpost-idのHidden入力だけなのに、"Delete"を押すと、サーバー上のすべてのフォームフィールドを送信してしまうことです。この小さな例ではそれほど大きな問題ではありませんが、私は何百ものフィールドとタブを持つフォームを、私の LOB のアプリケーションでは、(要件により)すべてを一度に送信する必要があり、いずれにしても非常に非効率的で無駄が多いように思われます。もしフォームのネストがサポートされていれば、少なくとも投稿ボタンを独自のフォームにラップして、post-idフィールドだけを表示させることができるようになると思うのですが。
と言われるかもしれませんが、quot;Delete" を submit" の代わりにリンクとして実装すればいいだけです。これは多くの点で間違っていますが、最も重要なことは、ここでの "Delete" のような副作用のあるアクションは、決して GET リクエストであってはならないということです。
そこで質問ですが、(特にフォームのネストを必要としたことがないとおっしゃる方に)皆さんはどうされていますか?私が見逃しているエレガントなソリューションがあるのでしょうか、それとも本当に"JavaScriptを必要とするか、すべてを送信するか"なのでしょうか?
解決方法は?
サーバーにすべてを送信し、どのボタンがクリックされたかをチェックするために単純なif/elseを実行します。
そして、フォームのonsubmitイベントに結びついたJavascriptコールを実装し、フォームが送信される前にチェックし、関連するデータのみをサーバーに送信します(おそらく、処理に必要なIDを隠し入力としてページにある第2のフォームを介して、またはGETリクエストとして渡された必要なデータでページの場所を更新するか、サーバーへのAjaxポスト、または...)。
この方法では、Javascriptを持たない人もフォームを問題なく使用でき、Javascriptを持っている人は必要なデータ1つだけを送信するため、サーバーの負荷は相殺されます。 どちらか一方だけをサポートすることにこだわると、選択肢が不必要に狭くなってしまいます。
また、企業のファイアウォールの内側で作業していて、誰もがJavascriptを無効にしている場合、2つのフォームを作成し、CSSで削除ボタンが最初のフォームの一部であるかのように見せかけることも可能です。
関連
-
[解決済み] 名前が''の無効なフォームコントロールはフォーカスされない
-
[解決済み] Favicon.icoを表示させることができません。
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] フォーム送信のようなJavaScriptのポストリクエスト
-
[解決済み] <form>タグの外にあるボタンでフォームを送信する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】CSSの背景画像が表示されない。
-
[解決済み】iframeを水平方向にセンタリングする方法は?
-
[解決済み】私のCSS3メディアクエリがモバイルデバイスで機能しないのはなぜですか?
-
[解決済み] Bootstrapのカラムが機能しない
-
[解決済み] CSS - display: none; が機能しない
-
[解決済み] カーソルを指ポインタに変更
-
[解決済み] 文字列が部分文字列で終わっているかどうかをXPathでテストする?
-
[解決済み] htmlフォームのネストは可能ですか?
-
[解決済み] html フォームの中に別の html フォームがあるのは有効ですか?
-
[解決済み] ネストされたJSONオブジェクトをフラット化/アンフラット化する最速の方法