- ベストアンサー
tableタグとformタグの組み合わせ
tableタグとformタグの組み合わせでどのように記述すれば、構文上正しいのでしょうか？ 私は下のパターンで書いておりますが、間違いでしたら早めに改めたいので お聞きしました。 ＜table＞ ＜form＞ ＜input type="hidden" name="a" value="1"> ＜tr＞ ＜td＞ ＜input type="text" name="b" value=""＞ ＜/td＞ ＜/tr＞ ＜tr＞ ＜td＞ ＜input type="submit" value="OK" value=""＞ ＜/td＞ ＜/tr＞ ＜/fomr> ＜/table＞
- kounesi
- お礼率1% (12/798)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
恐らく、<form>タグを入れると1行分の隙間ができるのでそのように記述しているのでしょう。私も4年ほど前に何かの雑誌でそのように記述しましょう、を確かに見ました。W3Cの理論を無視すれば別に表示するのだから構わないとも思います。 しかし、私の場合、今は、前者様の回答のように<table>の外に記述します。そして、スタイルシートで <form style="margin:0px;"> とすれば、隙間が無くなります。
その他の回答 (1)
- mousengoke
- ベストアンサー率50% (197/388)
まず、<table>タグの直下には<form>タグは置けません。<form>タグを外側にするのが自然でしょう。 それから、 <input type="submit" value="OK" value=""> のように value が二つあります。 それから、ミスタイプだと思われますが </fomr> となっています。というわけで <form> <input type="hidden" name="a" value="1"> <table> <tr> <td> <input type="text" name="b" value=""> </td> </tr> <tr> <td> <input type="submit" value="OK"> </td> </tr> </table> </form> となると思います。 もっといえば、<tbody>入れたほうがいいとかありますが無視してもいいですね。というより入れてるところあまり見かけないけど。
関連するQ&A
- IEでFORMタグを入れると空白ができる
IEだけなのですがFORMタグを入れるとTABLEとTABLEの間に空白ができます。 自分なりに切り分けをしたみたところ下記のような結果になりました。 １、XHTML1.0をHTML4.0に変更すると正常に表示 ２、Firefoxで開くと正常に表示 ３、FORMタグを外すと正常に表示 ４、このhtmlファイルをローカル(自身のPC上)で表示すると正常に表示 (Webサーバにアップロードすると現象が現れる) ソースは以下の通りです <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <table border="0" width="800"><tr> <td><font color="#000080"><b>サブメニュー</b></font></td> <td width="20"></td> <td align="right"> <input type="button" value="戻る" onclick=window.open("http://www.xxxx.xxx/xxx.html","_top")> </td></tr></table> ※この間に空白ができます※ <table border="1" cellspacing="0" cellpadding="5" width="800"> <tr><th nowrap class="l" width="270">商品A</th> <th nowrap class="l" width="100">商品A</th> <th nowrap class="l" width="270">商品名B</th> <th nowrap class="l" width="100">商品B</th> <p></tr> <tr> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> </tr> <tr> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> </tr> </table> </p> </html> 実際にはもっと長い表になるのですが<tr></tr>を増やせば増やすほど空白が大きくなります。 どうすれば解消できるでしょうか ご存知の方がいらっしゃいましたらご教授願います。 いろいろなサイトを拝見して試してみましたが解決できないのでよろしくお願いします。
- ベストアンサー
- HTML
- form要素とtable要素
元はこちらです。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1483846324 <table> <tr><td><input form="form1" type="text" value="text1"></td></tr> <tr><td><input form="form1" type="submit" value="submit1"></td></tr> <tr><td><input form="form2" type="text" value="text2"></td></tr> <tr><td><input form="form2" type="submit" value="submit2"></td></tr> </table> <form id="form1" action="cgi1.cgi" method="POST"></form> <form id="form2" action="cgi2.cgi" method="POST"></form> 上記はHTML5の仕様に従って書いていますが、これを、HTML4.01の仕様に反さないように書くと、どの様にすればいいのでしょうか。 添付画像は、実際のテーブルの様子です。
- ベストアンサー
- HTML
- 楽天アフィの検索窓(form)の左右中央化
こんにちは。 ホームページを製作しているものです。楽天ブックスの検索窓を設置しようと考えています。それが下記です。 <form method=get action="http://pt.afl.rakuten.co.jp/c/秘密にさせて下さい/"><input type=hidden name=sv value=6><input type="hidden" name="sid" value="213310"> <input type="hidden" name="su" value="rakutenbooks"> <input type="hidden" name="sn" value="楽天ブックス"> <input type="hidden" name="cord" value="s"><table width=150 border=0 cellspacing=0 cellpadding=1 bgcolor=#107400><tr><td align=center><table cellspacing=0 cellpadding=3 border=0 width=100% bgcolor=#FFFFFF><tr> <td bgcolor=#107400 align=center><b><font size=2 color=#FFFFFF>楽天ブックスで探す</font></b></td> </tr><tr bgcolor=#fffcdd><td nowrap align=center><input type=text size=14 name=sitem value=></td></tr><tr bgcolor=#fffcdd><td align=center><input type=submit value=商品検索 name=submit></td></tr><tr><td nowrap align=center><img src=https://image.books.rakuten.co.jp/books/img/bookimg/_h1529_bookslogo.gif width=145 height=27 border=0 alt=楽天ブックス></td></tr></table></td></tr></table><input type="hidden" name="scid" value="af_ich_link_search"></form> この<form>を<center>タグではなくCSSで左右中央化がどうCSSで指定しても出来ませんでした。 CSSファイルで下記を記述し<form>を挟んでも不可でした。 .cent { margin-left:auto; margin-right:auto; text-align:center; } お分かりの方、どなたかご教示願えないでしょうか？ 何卒よろしくお願い申し上げます。
- ベストアンサー
- CSS
- 別formのhidden項目を自form値として送信したい
同ページ内に <form name="form1" action="aa"> <input type="text" value="123"> <!-- hidden項目は無い場合もある --> <input type="hidden" name="form1_1" value="xxx"> <input type="hidden" name="form1_2" value="yyy"> <input type="submit"> </form> <form name="form2" action="bb"> <input type="text" value="456"> <input type="hidden" name="form2_1" value="www"> <input type="hidden" name="form2_2" value="zzz"> <input type="submit"> </form> といった感じのformタグをおいています。 そこで、form2を送信する時に、form1のhiddenのみform2のformValueとして送信したいのですが、どんな風に飛ばしたらよいのでしょうか？ というより、from2を飛ばすときに、他のformのhidden項目があったら自formの値として送信することってできるんでしょうか？ javascriptでできるんでしょうか？ 素人質問ですいませんが、何か足がかりになるようなものをご教授いただければと思います。
- 締切済み
- Perl
- FORMメソッドでvalueがうまく渡されない
Perlで下記のようにFORMメソッドを 色々なところで使っているのですが ↓のFORMメソッドだけVALUEが渡らないのです。 print "<FORM ACTION=\"$homeurl\" METHOD=$method>\n"; print "<TABLE BORDER=1>\n"; print "<TR>\n"; print "<TD>会員番号</TD>\n"; print "<TD><TT>会員番号-</TT><INPUT type=text name=mytonum value=\"$mynum\"></TD>\n"; print "</TR>\n"; print "<TR>\n"; print "<TD COLSPAN=2>\n"; print "<INPUT TYPE=SUBMIT VALUE=\" 基本情報 \">\n"; print "<INPUT TYPE=hidden NAME=mynum VALUE=\"$c_mynum\">\n"; #非表示。クッキー用 print "<INPUT TYPE=HIDDEN NAME=mycmd VALUE=write2>\n"; print "</TD>\n"; print "</TR>\n"; print "</TABLE>\n"; print "</FORM>\n"; それで改変したのが↓です。 こちらはボタンを押したらちゃんと値が渡りました。 ただ、予定した位置にテキストボックスが表示されず別の位置に表示されそれも困っています。 上の表記はどこが間違っているのでしょうか？ print "<FORM ACTION=\"$homeurl\" METHOD=$method>\n"; print "<TABLE BORDER=1>\n"; print "<TR>\n"; print "<TD>編集先の会員番号</TD>\n"; # print "<TD><TT>会員番号-</TT><INPUT type=text name=mytonum value=\"$mynum\"></TD>\n"; #コメントにして・・・ print "</TR>\n"; print "<TR>\n"; print "<TD COLSPAN=2>\n"; print "<INPUT TYPE=SUBMIT VALUE=\" 基本情報 \">\n"; print "<INPUT TYPE=text NAME=mynum VALUE=\"$mynum\">\n"; #こちらtypeを変更→OK ～～以下上記同じ～～
- 締切済み
- Perl
- ボタンクリックでフォーカス移動
JavaScript超ビギナーなので方法がよくわかりません。 フォームにテキストボックス（配列）４個あり ボタンを押すたびに未記入のテキストボックスにカーソルを移動したいのですが。どのようにしたらいいでしょうか。 <form name="form1" method="post"> <table width="200" border="1"> <tr><td ><input type="submit" name="Submit" value="送信"></td></tr> <tr><td ><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> </table> </form>
- ベストアンサー
- JavaScript
- formのtextフィールドが認識されない
下記のようなフォームに対し、JavaScriptで処理を行おうとしています。 <form name="dateForm" method="post" action=""> <table> <tr><td>0</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111001'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> <tr><td>1</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111002'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> <tr><td>2</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111003'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> </table> <input type='text' name='date_0' maxlength='8' size=12 value='20111000'><br><br> <input type="submit" name="button" value="Check" onClick="send_self();"> <input type="submit" name="button" value="Enter" onClick="set_action();"> </form> Checkボタン押下で上記の関数を呼び出し、テキストフィールドdate[0]の値を表示すると、(1)では「20111001」と正しい値が表示されますが、(2)では下記のエラーが出てしまいます。 「プロパティ '0' の値を取得できません: オブジェクトは Null または未定義です。」 また、 alert(document.dateForm.elements[0]); // … (3) alert(document.dateForm.date); // … (4) とすると、(3)では[object]、(4)では[undefined]と表示されます。 alert(document.dateForm.date_0.value); はvalueも正しく表示されobjectとしても正しく認識されるので、配列へのアクセスに問題があるように思うのですが…。 問題点と解決法をご存知の方がいらっしゃいましたら、どうぞよろしくお願い致します。m(＿ ＿；)m
- ベストアンサー
- JavaScript
- formの中で別のactionをもったsubmitボタンの設置。
formの中で別のactionをもったsubmitボタンの設置。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>sample</title> <script language="JavaScript" type="text/javascript"> <!-- //＜クリックした時に実行される関数＞ //*** 送信画面 function func1(form){ document.form1.text.value =form.text.value; document.form1.file.value =form.file.value; document.form1.dummy.value =form.dummy.value; document.form1.submit(); } //*** ユーザー追加画面 function func2(form){ document.form2.text.value =form.text.value; document.form2.file.value =form.file.value; document.form2.dummy.value =form.dummy.value; document.form2.submit(); } //--> </script> </head> <body class="index"> <form enctype="multipart/form-data"> <table id="table" width="100%"> <tr><th width="10%">テキスト</th><td><input type="text" name="text"> <br /> <div style="text-align:left;"> <input type="button" onClick="func2(this.form)" value="テキスト確認"> </div> </td></tr> <tr><th width="10%">添付</th><td><input type="file" name="file"></td></tr> </table> <div style="text-align:left;"> <input type="button" onClick="func1(this.form)" value="確認"> </div> </form> <!-- sousin.php画面へ --> <form method="post" name="form1" action="sousin.php" enctype="multipart/form-data"> <input type="hidden" name="text"> <input type="hidden" name="file"> <input type="hidden" name="dummy"> </form> <!--- text.php画面へ ---> <form method="post" name="form2" action="text.php" enctype="multipart/form-data"> <input type="hidden" name="text"> <input type="hidden" name="file"> <input type="hidden" name="dummy"> </form> </body> </html> 上記のように記述し、フォームの中に別のactionをもったsubmitボタンを設置しました。 textの内容は渡せるのですが、添付したいファイルを渡すことができません。 添付ファイルも渡せるようにするにはどうすればよいのでしょうか
- ベストアンサー
- HTML
- formタグ
HTMLで、formを使用し、CGIへテキストエリアのデータをpostしたいと 考えております。 テキストエリアを3つ、ボタンを1つ設けるならば 通常以下のようにすると思います。（必要部分の抜粋） <form action="foo1.cgi" method="post" ENCTYPE="multipart/form-data"> <input type="text" name="text1" value="text1" size=50 maxlength=100> <input type="text" name="text2" value="text2" size=50 maxlength=100> <input type="text" name="text3" value="text3" size=50 maxlength=100> <input type="submit" name="aaa" value="実行"> </form> こうすると、実行ボタンをクリックすると、text1、text2、text3のテキストエリアに 記述されているテキストが送信されますが、ここにボタンをもう一つ設け、 上記3つのデータを別のCGIに送信したいのですが、 この場合どのようにHTMLを記述したらよいでしょうか？ 新たに下記のようにformタグを設けると、テキストエリアは6つになってしまいますし。。。 <form action="foo2.cgi" method="post" ENCTYPE="multipart/form-data"> <input type="text" name="text1" value="text1" size=50 maxlength=100> <input type="text" name="text2" value="text2" size=50 maxlength=100> <input type="text" name="text3" value="text3" size=50 maxlength=100> <input type="submit" name="aaa" value="実行２"> </form> どなたか分かる方情報頂けますか。
- ベストアンサー
- HTML
- FormのSubmitボタン
こんにちは。 <table align="center"> <form action="getdata.html" method="post"> <tr> <th>Customer Name :</th> <td><input type="text" name="CustNameEdit" value=""></td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" name="SearchButton" value="Search"> <input type="submit" name="SearchButton" value="Show All"> </td> </tr> </form> </table> このようなフォームで、CustNameEditに文字列を入力し、Searchボタンをクリック すると、getdata.htmlでSearchButtonの値は"Search"になっているのですが、 文字列入力後、キーボードのEnterキーを押すと、getdata.htmlへは行くのですが、 SearchButton変数が存在しないと言われてしまいます。 で、この現象ですが、Internet Explorer（試したのはバージョン6.0と7.0）で 発生しますが、Operaで試してみたところ、問題ありません。 何か原因として考えられることはありますでしょうか。
- ベストアンサー
- HTML
