質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

15362閲覧

form属性が適応されない

pac894398

総合スコア429

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2016/03/09 01:37

編集2016/03/09 01:45

記述したコードは以下の通りです。

test.html

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Test Page</title> 5 </head> 6 <body> 7 <label><input type="checkbox" form="formA" name="del[]" value="1">1</label> 8 <label><input type="checkbox" form="formA" name="del[]" value="2">2</label> 9 <label><input type="checkbox" form="formA" name="del[]" value="3">3</label> 10 11 <form id="formA" action="test.html" method="get"> 12 <label><input type="checkbox" form="formA" name="del[]" value="4">4</label> 13 <button type="submit">Send Data</button> 14 </form> 15 </body> 16</html>

value = 4 以外は送信されません。
なぜでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

手元で試したら問題ありませんでした。
ブラウザは何をお使いでしょう?
HTML5対応のモードで動いていないIEなどでは送信できない・・・
[以下コメントした内容を含めて編集済] のではなく、
IEとMS Edgeがinput要素のform属性に対応していないようですね。
http://caniuse.com/#feat=form-attribute

追記

JavaScript書いてみました。(jQuery使ってます)
本当はブラウザ判定はさんだ方がよいかも。

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Test Page</title> 5 <script type="text/javascript" src="/xxxxx/jquery-xxxx.min.js"></script> 6 <script type="text/javascript"> 7 function fixFormAttributeForMS(){ 8 $('#formA').append($('input').attr('form','formA')); 9 return true; 10 } 11 </script> 12 </head> 13 <body> 14 <label><input type="checkbox" form="formA" name="del[]" value="1">1</label> 15 <label><input type="checkbox" form="formA" name="del[]" value="2">2</label> 16 <label><input type="checkbox" form="formA" name="del[]" value="3">3</label> 17 18 <form id="formA" action="./" method="post" onsubmit="return fixFormAttributeForMS()"> 19 <label><input type="checkbox" form="formA" name="del[]" value="4">4</label> 20 <button type="submit">Send Data</button> 21 </form> 22 </body> 23</html>

投稿2016/03/09 02:04

編集2016/03/09 03:18
dupont_kedama

総合スコア925

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pac894398

2016/03/09 02:16

MS Edge です。 <!DOCTYPE html> あるので html5 モードだと思うのですが...汗
pac894398

2016/03/09 02:21

IE11 も駄目ですね...。 Firefox は動作しました。 required 属性を付けると value = 4 では Edge / IE11 Firefox どれでもしっかり適応されています。 ブラウザが form 属性未対応なのでしょうかね...。
pac894398

2016/03/09 02:56

form の 入れ子を回避したいのですが... JS 書かなければいけませんかね。。。
dupont_kedama

2016/03/09 03:07

ブラウザ対応のうち、JavaScriptで回避できるならまだマシな部類かと。 回答に追記したコードですが、手元にMS Edgeがないので試せていません。 IE11では動いているように見えました。
guest

0

value=1~3がformの外だからですよ。

<html> <head> <title>Test Page</title> </head> <body> <form id="formA" action="test.html" method="get"> <label><input type="checkbox" form="formA" name="del[]" value="1">1</label> <label><input type="checkbox" form="formA" name="del[]" value="2">2</label> <label><input type="checkbox" form="formA" name="del[]" value="3">3</label> <label><input type="checkbox" form="formA" name="del[]" value="4">4</label> <button type="submit">Send Data</button> </form> </body> </html>

投稿2016/03/09 01:48

Yousuck

総合スコア349

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pac894398

2016/03/09 01:51

実際はさらに複雑なので input を form 外に出したいのです。 http://uhyohyo.sakura.tv/html/5_3.html form 属性に form の ID を指定しておけば 一緒に送信されるのだと思っているのですが、 何が問題なのでしょうか? 引き続きご回答いただければ幸いです。
Yousuck

2016/03/09 02:32

すみません、勘違いしてました..HTML5だったのですね。失礼いたしました。 現状IEはform要素の外に部品を配置した場合、未対応みたいですよ。
pac894398

2016/03/09 02:34

やはりそうなのですか...。 ありがとうございます。 JS の パッチみたいなのって知っておられませんか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問