フォームボタンがフッターにあるときの記述について

解決済

質問者：webtamago
質問日時：2012/08/29 14:00
回答数：3件

１．フォームを使用し、下のようなサイトを作る場合
このようなコードで作ったのですが、どのような書きかたがスマートなのでしょうか？
（※商品選択からカートに入れるボタンまでの間に、他に要素がたくさんあります。）

よろしくお願いいたします。

<div id="header">
　　・
　　・
　　・
</div>
<div id="contents">
<form>
<input>
<select>
　　・　　　　　　←商品選択フォーム
　　・
　　・
</select>
</div>
<div id="footer">
　　・
　　・
　　・
<input>←カートに入れるボタン
</form>
</div>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： blanc210
回答日時：2012/08/29 16:22

JavaScript(jQuery)を使えば

<div id="contents">
<form>
　・
　・
　・
</form>
</div>

の内容を

<div id="footer">
<input />
</div>

のボタンで送信することもできます。

ユーザがJavaScriptをONにしていることが前提ではありますが。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます！
javascriptですね！
助かりました！！

通報する

お礼日時：2012/08/30 08:57

No.3

回答者： ORUKA1951
回答日時：2012/08/29 18:45

＞その場合の記述はどのようになるのでしょうか？

リキッドデザイン・・ウィンドウ幅に制約されない・・簡単なサンプル書いておきます。(画像は用意してください。)
　ご覧になるとわかるとおり、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_ … )
で検証済みの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">

＿</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>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
丁寧な対応ありがとうございました。

通報する

お礼日時：2012/08/30 08:58

No.1

回答者： ORUKA1951
回答日時：2012/08/29 15:14

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のデザイン機能なんてしょぼいものです。デザインなどは考えずに、きちんと書きましょう。

- 0
- 件

通報する

この回答へのお礼

早速のご回答ありがとうございます。

そうなんです、他の要素をまたいでいるんです。。

コンテンツの部分で商品を選択し
その情報を(固定)フッターの送信ボタンで送りたいんです。
その場合の記述はどのようになるのでしょうか？

・・・フォームを２つに分ければいいのでしょうか？
お手数をおかけしますが、よろしくお願いいたします。

通報する

お礼日時：2012/08/29 15:42

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！