前回までショッピングカートを作成しました。
今回から、購入手続きに進みます。
顧客情報入力
ファイル名：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;
}次回は、入力確認画面です。
コメント