![]() |
|
ソースは、下記のようになっています。
| <table cellpadding="2" cellspacing="0" width="100%">
<tr> <td colspan="2"><hr></td></tr> <tr> <td> <img src="./bin/sample/stationery_set.gif" width="100" height="75" border="0" alt="クリスタル文具セット"></a></td> <td align="left" valign="top"> <form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank"> クリスタル文具セット <br>価格 735円 個数<input type=text name="クリスタル文具セット&&&735" maxlength=3 size=3> <input type="submit" name="submit" value="購入"> </form> </td> </tr> <tr> <td colspan="2"><hr></td></tr> </table> |
価格 735円 個数」のフォントのサイズや色は、自由に設定できます。設定したい文字の前後を<font size="*" color="*******">と</font>でくくってください。
『いるかのペーパーウエイト』![]() |
大きさ:全長10cm・高さ5cm 重さ:750g ガラス製 価格:735円(税込) |
『ひとでのペーパーウエイト』![]() |
大きさ:幅5cm・高さ5cm 重さ:500g ガラス製 価格:525円(税込) |
| <table cellpadding="2" cellspacing="0" width="100%">
<tr> <td valign="middle" width="100%" colspan="2"> <hr size="1" noshade> </td></tr> <tr> <td> <font size="2" color="#4169e1">『いるかのペーパーウエイト』</font><br> <img src="./bin/sample/dolphin.gif" width="100" height="75" border="0" alt="いるかのペーパーウエイト"></a></td> <td align="left" valign="top"> <font size="2" color="#696969">大きさ:全長10cm・高さ5cm 重さ:750g<br> ガラス製<br> 価格:735円(税込)<br> <form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank"> 個数</font><input type="text" name="いるかのペーパーウエイト&&&735" maxlength=3 size=3> <input type="submit" name="submit" value="購入"> </form> </td> </tr> <tr> <td valign="middle" width="100%" colspan="2"> <hr size="1" noshade> </td> </tr> </table> |
<input type="submit" name="submit" value="購入">の部分を
<input type="hidden" name="submit" value="購入">
<input type="submit" value="xxxxx"> に変え、"xxxxx"にボタンの名称を入れます。
「カゴに入れる」に変えたのが、『ひとでのペーパーウエイト』です。
ソースは下記のとおりです。青太字部分を参照してください。
| <table cellpadding="2" cellspacing="0" width="100%">
<tr> <td valign="middle" width="100%" colspan="2"> <hr size="1" noshade> </td></tr> <tr> <td> <font size="2" color="#4169e1">『ひとでのペーパーウエイト』</font><br> <img src="./bin/sample/hitode.gif" width="100" height="75" border="0" alt="ひとでのペーパーウエイト"></a></td> <td align="left" valign="top"> <font size="2" color="#696969">大きさ:幅5cm・高さ5cm 重さ:500g<br> ガラス製<br> 価格:525円(税込)<br> <form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank"> 個数</font><select name="ひとでのペーパーウエイト&&&525"> <option selected>0 <option>1 <option>2 <option>3 <option>4 <option>5 <option>6 <option>7 <option>8 <option>9 </select> <input type="hidden" name="submit" value="購入"> <input type="submit" value="カゴに入れる"> </form> </td> </tr> <tr> <td valign="middle" width="100%" colspan="2"> <hr size="1" noshade> </td> </tr> </table> |
■ 寸法や色など複数の属性がある商品を販売する場合は、標準で3つまで、属性を追加することができます。
<select>タグを使って属性を設定します。<selest name=option_1>を指定し、<option>タグを使って選択肢を設定します。
属性を2つ以上設定する場合は、順番に、<selest name=option_1>、<selest name=option_2>、<selest name=option_3>と設定してください。
下記の例では、サイズと色、タイプを設定しています。青太字部分を参照してください。
『カラークリップ5個組』![]() |
サイズ:S(長さ2cm・幅1cm) :M(長さ4cm・幅2cm) :L(長さ7cm・幅3cm) 色:ピンク/黄色/緑/青/紫/ミックス 価格:525円(内消費税25円) |
| <table cellpadding="2" cellspacing="0" width="100%">
<tr> <td valign="middle" width="100%" colspan="2"> <hr size="1" noshade> </td></tr> <tr> <td> <font size="2" color="#4169e1">『カラークリップ5個組』</font><br> <img src="./bin/sample/dolphin.gif" width="100" height="75" border="0" alt="カラークリップ5個組"></a></td> <td align="left" valign="top"> <font size="2" color="#696969"><font face="MS ゴシック">サイズ:S(長さ2cm・幅1cm)<br> :M(長さ4cm・幅2cm)<br> :L(長さ7cm・幅3cm)</font><br> 色:ピンク/黄色/緑/青/紫/ミックス<br> 価格:525円(内消費税25円)<br> <form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank"> サイズ<select name="option_1"> <option>Sサイズ</option> <option>Mサイズ</option> <option selected>Lサイズ</option> </select> 色<select name="option_2"> <option>ピンク <option>黄色 <option>緑 <option>青 <option>紫 <option>ミックス </select> <select name="option_3"> <option selected>透明 <option>不透明 </select><br> <div align="right">個数<input type="text" name="カラークリップ5個組&&&525" maxlength=3 size=3>組</font> <input type="hidden" name="submit" value="購入"> <input type="submit" value="カゴに入れる"></div> </form> </td> </tr> <tr> <td valign="middle" width="100%" colspan="2"> <hr size="1" noshade> </td> </tr> </table> |
デフォルトで表示される選択肢のテキストは、<option selected>で指定します。 指定しない場合は一番上のテキストが表示されます。
上記『カラークリップ5個組』のケースでは、サイズから「カゴに入れる」ボタンまでが2段になってしまうので、個数の前で改行<br>を入れています。また、販売の単位がたとえば5個組で1セットとか100gいくらとかいったケースでは、お客様の混乱を避けるために、個数入力のテキストボックスや個数選択のプルダウンメニューの後に単位を記載すると、わかりやすいでしょう。
上記の例では、<input type="text" name="カラークリップ5個組&&&525" maxlength=3 size=3>の後ろに組を記載しています。
■ ポイントは、<form *** >から</form>までの間に
1.<input type="text" name="商品名&&&価格" maxlength=3 size=3>または
<select name="商品名&&&価格">
<option>1
<option>2
<option>3
<option>4
<option>5
</select>
の商品名、価格、個数を送信するためのタグと、
2.属性を追加する場合は
<select name="option_1">
<option>S</option>
<option>M</option>
<option>L</option>
</select>
などの<select>タグ、
3.情報を送信するための
<input type="submit" name="submit" value="購入">または
<input type="hidden" name="submit" value="購入">
<input type="submit" value="xxxxx">
の"submit"ボタンを入れることです。
■ 注意
事業者間お取引により別立て表示方式を選択される場合は、
<input type="text" name="商品名&&&価格" maxlength=3 size=3>または<select name="商品名&&&価格">の"商品名&&&価格"部分の価格は税抜き価格となります。
総額表示方式を選択した場合は、"商品名&&&価格"部分の価格も税込み価格にして下さい。








