通販用の注文書を作ります。
ここではテーブルを使って、紙の注文書と同じような体裁で表を作って行きます。
表ができたら、個数の入力と合計の計算、メールの送信ができるようにします。
「p1.html」をコピーして「p7.html」にします。まずは、基本のページ構造を作ります。
実例（p7-1.html）
タイトルを次のように変更します。
<title>注文フォーム</title>
ヘッダを次のように変更します。
<h1 id="header">●●●●商店：注文フォーム</h1>
新しくページを追加するため、メニューも１つ増やすことになります。
新しいページは「p7.html」ですので、新たにmenulinkクラスのある<a>タグとそれを囲う<div>のセットを追加します。商品の発注フォームなので、商品カタログに次に挿入します。
<div id="leftmenu">
<div class="menutitle">メニュー</div>
<div><a href="index.html" class="menulink">トップページ</a></div>
<div><a href="p1.html" class="menulink">店舗紹介</a></div>
<div><a href="p2.html" class="menulink">案内地図</a></div>
<div><a href="p3.html" class="menulink">商品カタログ</a></div>
<div><a href="p7.html" class="menulink">注文フォーム</a></div>
<div><a href="p4.html" class="menulink">社長の部屋</a></div>
<div><a href="p5.html" class="menulink">職人の工房</a></div>
<div><a href="p6.html" class="menulink">地域の名所</a></div>
</div>
完成したら他のページのメニューにも同じ一行を追加しましょう。
「index.html」と「p1.html」から「p6.html」までの各HTMLファイルに、「注文フォーム」のメニューを追加します。
mainmenu（ID）の<div>タグの内側にコンテンツを作っていきます。
p1.htmlにあったタグは全て置き換えます。
まずは、コンテンツのタイトルとして<div>タグのmenutitle（クラス）を使います。
その下にテーブルを作りますが、<form>タグで囲って置きます。
テーブルの構造は4列11行です。商品は10個、1行目は表のヘッダとなります。
商品コードは、データ管理用のコード番号。商品によっては型式番号でも良いでしょう。店舗で専用の管理コードを割り振るとデータベースでの管理を簡便化できます。
というのも、型式での管理だけでは、正確に商品を識別することは可能ですが、メーカーの違いによる番号の振分があるため、番号による並べ替えや同種のデータ抽出が困難です。商品の種類に応じて分類番号を付けると管理がしやすくなります。
今回は表示の簡便化のため通し番号を使っています。
商品名は商品を分かりやすく紹介し、またセット商品なども付記します。
価格と個数はあとで計算に利用するためフォームの<input>タグを利用します。事前にクラス名とID名も商品コードに基づいて割り振っておきます。商品コードが「S001」ならば、価格のID名も「S001」、個数のID名は「S001n」とします。クラス名については、それぞれprice（クラス）とnumber（クラス）とします。
<div id="mainmenu">
<div class="menutitle">注文フォーム</div>
<form name="order" onSubmit="return false;">
<table border="2" cellspacing="2" cellpadding="2">
<tr>
<th>商品コード</th>
<th>商品名</th>
<th>価格</th>
<th>個数</th>
</tr>
<tr>
<td>S001</td>
<td><a href="s001.html" class="t_name" target="_blank">サクラソフトクリーム</a></td>
<td><input type="text" class="price" id="s001" value="200" size="10" maxlength="5"></td>
<td><input type="text" class="number" size="5" maxlength="3"></td>
</tr>
<tr>
<td>S002</td>
<td><a href="s002.html" class="t_name" target="_blank">さくらかき氷</a></td>
<td><input type="text" class="price" id="s002" value="350" size="10" maxlength="5"></td>
<td><input type="text" class="number" size="5" maxlength="3"></td>
</tr>
<tr>
<td>W001</td>
<td><a href="w001.html" class="t_name" target="_blank">あんこぼたもち</a></td>
<td><input type="text" class="price" id="w001" value="180" size="10" maxlength="5"></td>
<td><input type="text" class="number" size="5" maxlength="3"></td>
</tr>
<tr>
<td>W002</td>
<td><a href="w002.html" class="t_name" target="_blank">きなこぼたもち</a></td>
<td><input type="text" class="price" id="w002" value="180" size="10" maxlength="5"></td>
<td><input type="text" class="number" size="5" maxlength="3"></td>
</tr>
<tr>
<td>W003</td>
<td><a href="w003.html" class="t_name" target="_blank">どら焼き</a></td>
<td><input type="text" class="price" id="w003" value="150" size="10" maxlength="5"></td>
<td><input type="text" class="number" size="5" maxlength="3"></td>
</tr>
<tr>
<td>W004</td>
<td>三色団子</td>
<td><input type="text" class="price" id="w004" value="80" size="10" maxlength="5"></td>
<td><input type="text" class="number" size="5" maxlength="3"></td>
</tr>
<tr>
<td>W005</td>
<td>みたらし団子</td>
<td><input type="text" class="price" id="w005" value="80" size="10" maxlength="5"></td>
<td><input type="text" class="number" size="5" maxlength="3"></td>
</tr>
<tr>
<td>W006</td>
<td>ぼたもち2種類セット</td>
<td><input type="text" class="price" id="w006" value="350" size="10" maxlength="5"></td>
<td><input type="text" class="number" size="5" maxlength="3"></td>
</tr>
<tr>
<td>W007</td>
<td>どら焼き10個セット</td>
<td><input type="text" class="price" id="w007" value="1350" size="10" maxlength="5"></td>
<td><input type="text" class="number" size="5" maxlength="3"></td>
</tr>
<tr>
<td>W008</td>
<td>お団子セット（2種類各5本）</td>
<td><input type="text" class="price" id="w008" value="750" size="10" maxlength="5"></td>
<td><input type="text" class="number" size="5" maxlength="3"></td>
</tr>
</table>
</form>
</div>
W004以降の商品には<a>タグを省略しています。本来ならリンクを作って行くのですが、店舗レッスンで対象のページを作ってませんので、リンクも省略しました。
<head>タグの中にCSSを記入しましょう。
<style>タグを使い、price（クラス）とnumber（クラス）を作ります。
<style type="text/css">
.price {
text-align: right;
}
.number {
text-align: right;
}
</style>
ここでは、どちらのクラスも同じ書式になっていますが、クラス名はCSSだけでなく、JavaScriptでも使用します。その時は、それぞれの役割が違うため同じ名前にはしないのです。