概要
状態:-
閲覧数:4,974
投稿日:2015-03-21
更新日:2016-04-06
HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い
・<button> … フォームの外で直接使用しても良い
・<input> … フォームの外で直接使用しても良い
・<form>内で、<button>クリックすると、submit指定していないのにフォーム送信される
HTML5
・フォーム関連要素（＜input＞＜button＞＜textarea＞など）を、＜form＞外部に記述しても、そのフォームに所属しているものとして取扱可能
・フォーム関連要素 … ＜form＞外部に記述しても良い
HTML 4.01
・フォーム関連要素（＜input＞＜button＞＜textarea＞など）を、＜form＞外部に記述すると、そのフォームに所属しているものとして取扱不可
・フォーム関連要素 … ＜form＞外部に記述しても良い？ → 未調査に付き不明
関連付けできないことと、＜form＞外部に記述しても良いか、は別次元の話
・しかし、HTML 4.01は今後使用することはないので、気にする必要はない
・大事なことは、HTML5では「フォーム関連要素を＜form＞外部に記述しても良い」という点
・<button> … フォームの外で直接使用しても良い
・<input> … フォームの外で直接使用しても良い
・<form>内で、<button>クリックすると、submit指定していないのにフォーム送信される
より正確には
HTML5
・フォーム関連要素（＜input＞＜button＞＜textarea＞など）を、＜form＞外部に記述しても、そのフォームに所属しているものとして取扱可能
・フォーム関連要素 … ＜form＞外部に記述しても良い
HTML 4.01
・フォーム関連要素（＜input＞＜button＞＜textarea＞など）を、＜form＞外部に記述すると、そのフォームに所属しているものとして取扱不可
・フォーム関連要素 … ＜form＞外部に記述しても良い？ → 未調査に付き不明
関連付けできないことと、＜form＞外部に記述しても良いか、は別次元の話
・しかし、HTML 4.01は今後使用することはないので、気にする必要はない
・大事なことは、HTML5では「フォーム関連要素を＜form＞外部に記述しても良い」という点
何が問題なの？
きっかけ
button要素を、<form>の外で使用したい
・「JS」処理や「デザイン」等の事由により、フォーム関連要素を＜form＞外部に記述したいケースは割と多い
事例
問題となるケース
・フォーム関連要素を＜form＞内部に記述すると、問題が発生するケース
例1
・ボタンクリックしたら、Ajax処理でフォーム要素に入力項目を付与したい
・＜form＞内部に<button>記述
・クリックした際、submitされて、リロードされてしまう
→ <button>クリック処理はしたいが、フォーム全体をsubmitはしたくない
例2
・＜form＞内部の<a>を目立たせるため、<button>にしたい
・＜form＞内部に<button>記述
・クリックした際、submitされて、リロードされてしまう
→ リンクなので、クリック処理はしたいが、フォーム全体をsubmitはしたくない
対応
button要素を、<form>外部で記述すれば良い
・上記事例の対応は、ここで終了
紐付け
・「フォーム関連要素を単に＜form＞外部に記述したいケース」についての対応は、以下のとおり
＜form＞外部に記述したフォーム関連要素を＜form＞と関連付けするためには、form属性を使用
form属性
「formタグ」とは異なる
・HTML5 で新たに定められた属性
・使用することで、＜form＞外部に記述したフォーム関連要素と、<form> 要素を紐付けることが可能
<button>要素
form属性
<input>要素
form属性
具体例
<form>外部で使用している<button>を関連付け
<button form = "test">ボタン</button>
<form id = "test">
<input type="text" name="★★">
<input type="submit" value="送信">>
</form>
<form id = "test">
<input type="text" name="★★">
<input type="submit" value="送信">>
</form>
<form>外部で使用している<fieldset>を関連付け
<fieldset form = "test">
名前：<input type="text" name="★★">
電話：<input type="tel" name="tel">
メール：<input type="email" name="email">
住所：<input type="text" name="address">
</fieldset>
<form id="test">
<button type="submit">送信</button>
</form>
名前：<input type="text" name="★★">
電話：<input type="tel" name="tel">
メール：<input type="email" name="email">
住所：<input type="text" name="address">
</fieldset>
<form id="test">
<button type="submit">送信</button>
</form>
Link
・form内のbuttonとform外のbuttonの違い
・フォーム — HTML5 日本語訳