- ベストアンサー
フォームボタンがフッターにあるときの記述について
- フォームを使用したサイト作成時のスマートな書き方についての質問です。
- 商品選択からカートに入れるボタンまでの間に他の要素がたくさんある場合について教えてください。
- フッターにフォームボタンを配置するときの効果的な記述方法について教えてください。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
JavaScript(jQuery)を使えば <div id="contents"> <form> ・ ・ ・ </form> </div> の内容を <div id="footer"> <input /> </div> のボタンで送信することもできます。 ユーザがJavaScriptをONにしていることが前提ではありますが。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞その場合の記述はどのようになるのでしょうか？ リキッドデザイン・・ウィンドウ幅に制約されない・・簡単なサンプル書いておきます。(画像は用意してください。) ご覧になるとわかるとおり、HTMLは文書構造しか書いていませんから簡単ですね。誰でも手を入れられるはずです。 一方のスタイルシートは、HTMLの文書構造を基に書いていますから、HTMLを開かなくても修正が出来るはずです。 このように文書構造とプレゼンテーションを分離することで、とても簡単になり、どのようにでもデザインできます。 ポイントはHTMLは文書構造しか書かない・・。 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) ★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みのHTML4.01strict+CSS2.1です。 タブは＿に置換してあるので戻すこと。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} p{margin:0 auto;text-indent:1em;} div.header{height:100px;background-color:red;} div.header h1{margin:0 auto;} div.section{padding-bottom:100px;} div.section div.section{padding-bottom:10px;} div.section ul,div.section ul li{display:block;list-style:none;margin:0;padding:0;} div.section ul,div.section div.section,div.section h2{margin-left:30%;} div.section ul li ul{margin-left:0;} div.section ul li{width: 200px;height:300px;float:left;margin-left:10px;} div.section ul li ul li{float:none;height:auto;} div.section div.section{clear:left;} div.footer{position:fixed;width:100%;background-color:gray;height:100px;bottom:0;font-size:0.9em;} div.footer>*{margin:0 50% 0 0} form input[type="submit"]{position:fixed;bottom:20px;right:20px;z-index:10;font-size:2em;} #contentTable{position:fixed;top:120px;left:10px;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>商品一覧</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section" id="productList"> ＿＿<h2>商品を選択してください。</h2> ＿＿<form action="#"> ＿＿＿<ul> ＿＿＿＿<li><img src="./images/photo/01.jpg" width="200" height="200" alt="商品1"> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>なんたらかんかたら</li> ＿＿＿＿＿＿<li>価格:10,000円</li> ＿＿＿＿＿＿<li>かごに入れる<input type="text" size="2" name="p1" value=""></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><img src="./images/photo/02.jpg" width="200" height="200" alt="商品2"> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>なんたらかんかたら</li> ＿＿＿＿＿＿<li>価格:10,000円</li> ＿＿＿＿＿＿<li>かごに入れる<input type="text" size="2" name="p2" value=""></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><img src="./images/photo/03.jpg" width="200" height="200" alt="商品3"> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>なんたらかんかたら</li> ＿＿＿＿＿＿<li>価格:10,000円</li> ＿＿＿＿＿＿<li>かごに入れる<input type="text" size="2" name="p3" value=""></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><img src="./images/photo/04.jpg" width="200" height="200" alt="商品4"> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>なんたらかんかたら</li> ＿＿＿＿＿＿<li>価格:10,000円</li> ＿＿＿＿＿＿<li>かごに入れる<input type="text" size="2" name="p4" value=""></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li>いくつでも増やせます。ウィンドウ幅を変えてもOK!!</li> ＿＿＿</ul> ＿＿＿<p><input type="submit" name="productList1" value=" バスケットに入れる "></p> ＿＿</form> ＿＿<div class="section" id="tediously1"> ＿＿＿<h3>御託１</h3> ＿＿＿<p>ここに御託を並べる・・・</p> ＿＿＿<p>ここに御託を並べる・・・</p> ＿＿＿<p>ここに御託を並べる・・・</p> ＿＿＿<p>ここに御託を並べる・・・</p> ＿＿＿<p>ここに御託を並べる・・・</p> ＿＿＿<p>ここに御託を並べる・・・</p> ＿＿＿<p>ここに御託を並べる・・・</p> ＿＿＿<p>ここに御託を並べる・・・</p> ＿＿＿<p>ここに御託を並べる・・・</p> ＿＿</div> ＿＿<div class="section" id="tediously2"> ＿＿＿<h3>御託２</h3> ＿＿＿<p>ここに御託を並べる・・・</p> ＿＿</div> ＿＿<div id="contentTable"> ＿＿＿<ol> ＿＿＿＿<li><a href="#productList">商品</a></li> ＿＿＿＿<li><a href="#tediously1">御託1</a></li> ＿＿＿＿<li><a href="#tediously2">御託2</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
ご回答ありがとうございます。 丁寧な対応ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
formが他の要素をまたいでいます。HTML5的に記述すると <section> <form> コントロール 送信 </form> </section> でなければなりません。 <div class="header"> ヘッダ </div> <div class="section"> <form> フォームコントロール (送信ボタン) </form> </div> <div class="footer"> フッタ文書情報など </div> で良いです。このときdiv.sectionをstaticで置いておけば、良いです。 HTMLはデザインのために書くものではありません。HTMLのデザイン機能なんてしょぼいものです。デザインなどは考えずに、きちんと書きましょう。
お礼
早速のご回答ありがとうございます。 そうなんです、他の要素をまたいでいるんです。。 コンテンツの部分で商品を選択し その情報を(固定)フッターの送信ボタンで送りたいんです。 その場合の記述はどのようになるのでしょうか？ ・・・フォームを２つに分ければいいのでしょうか？ お手数をおかけしますが、よろしくお願いいたします。
お礼
ご回答ありがとうございます！ javascriptですね！ 助かりました！！