PHPで簡単ショッピングカート!【5.顧客情報入力】

PHP

前回までショッピングカートを作成しました。
今回から、購入手続きに進みます。

顧客情報入力

ファイル名:inputinfo.html

<記述例>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../fshopstyle.css">
    <title>さかなショップお客様情報入力</title>
  </head>
  <body>
    <main>
      <section class="txtbox">

<div style="text-align: center;">
  <ul class="cartflow">
    <li>カート</li>
    <li class="choice">情報入力</li>
    <li>入力確認</li>
    <li>注文確定</li>
  </ul>
</div>
  <h3>お客様情報入力</h3>
   以下の項目をご入力ください。<br>
  <form method="post" action="inputinfo_chk.php">
  <table class="info">
  <tr>
    <th>【お 名 前】<span class="red">(必須)</span></th>
    <td><input type="text" name="cname" style="width:200px"></td>
  </tr>
  <tr>
    <th>【メールアドレス】<span class="red">(必須)</span></th>
    <td><input type="email" name="email" style="width:200px"></td>
  </tr>
  <tr>
    <th>【郵便番号】<span class="red">(必須)</span></th>
    <td><input type="text" name="postal" style="width:100px" maxlength="7"><br>※半角数字のみ7桁で入力してください
    </td>
  </tr>
  <tr>
    <th>【住  所】<span class="red">(必須)</span></th>
    <td><input type="text" name="address" style="width:350px"></td>
  </tr>
  <tr>
    <th>【電話番号】<span class="red">(必須)</span></th>
    <td><input type="text" name="tel" style="width:200px"></td>
  <tr>
    <th>【備  考】(任意)</th>
    <td><textarea name="note" cols="70" rows="5" style="width: 350px"></textarea>
    </td>
  </tr>
  </table>
<div class="btnbox">
  <input type="button" value="  戻   る  " onclick="location.href='item_cart.php'" class="btn1a">
  <input type="submit" value="確 認 画 面 へ" class="btn2a">
</div>
</form>
      </section>
    </main>
  </body>
</html>

<表示例>

HTMLですから簡単に説明します。

12~19行目:カートの流れを表示(情報入力を選択)
22行目:フォームをはじめます 送信先:[inputinfo_chk.php]
24~48行目:お名前、メールアドレス、郵便番号、住所、
      電話番号をinputで作成、備考はtextareaで作成
51行目:戻るボタン表示、戻り先は[item_cart.php]
52行目:確認画面へのボタン表示

CSSファイルの追加分

ファイル名:fshopstyle.css(追加分)

<記述例>

h3{
  color: white;
  background-color:seagreen;
  padding: 5px 20px;
  border-radius: 6px;
}
table.info{
  border: 2px solid seagreen;
}
table.info tr:nth-child(even) {
  background: mintcream;
}
table.info tr:nth-child(odd) {
  background: honeydew;
}
table.info tr th,td {
  border: 1px solid seagreen;
  padding: 5px 10px;
  text-align: left;
}
table.info tr th {
  background-color:mediumaquamarine;
  width: 200px;
}
table.info .right{
  text-align: right;
}
.red{
  color: orangered;
}
.btn1a{color: honeydew;
  font-size: 16px;
  background: gray;
  border-radius: 30px 0 0 30px;
  padding: 10px 24px;
  margin: 5px 10px;
}
.btn2a{
  color: honeydew;
  font-size: 16px;
  background: seagreen;
  border-radius: 0 30px 30px 0;
  padding: 10px 24px;
  margin: 5px 10px;
}
.btn2r{
  color: honeydew;
  font-size: 16px;
  background: crimson;
  border-radius: 0 30px 30px 0;
  padding: 10px 24px;
  margin: 5px 10px;
}

次回は、入力確認画面です。

コメント

タイトルとURLをコピーしました