カテゴリー:
HTML5
閲覧数:753 配信日:2015-03-21 08:35
きっかけ
button要素を、<form>の外で使用したい
・「JS」処理や「デザイン」等の事由により、フォーム関連要素を＜form＞外部に記述したいケースは割と多い
事例
問題となるケース
・フォーム関連要素を＜form＞内部に記述すると、問題が発生するケース
例1
・ボタンクリックしたら、Ajax処理でフォーム要素に入力項目を付与したい
・＜form＞内部に<button>記述
・クリックした際、submitされて、リロードされてしまう
→ <button>クリック処理はしたいが、フォーム全体をsubmitはしたくない
例2
・＜form＞内部の<a>を目立たせるため、<button>にしたい
・＜form＞内部に<button>記述
・クリックした際、submitされて、リロードされてしまう
→ リンクなので、クリック処理はしたいが、フォーム全体をsubmitはしたくない
対応
button要素を、<form>外部で記述すれば良い
・上記事例の対応は、ここで終了
紐付け
・「フォーム関連要素を単に＜form＞外部に記述したいケース」についての対応は、以下のとおり