<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body, h1, form, fieldset, legend, ol ,li{
padding:0;
margin:0;
}
ol{
list-style:none;
}
body{
background:#fff;
color:#111;
padding:20px;
}
form#payment{
background:#9cbc2c;
-webkit-border-radius:5px;
border-radius:5px;
padding:20px;
width:400px;
}
form#payment fieldset{
border:none;
margin-bottom:10px;
}
form#payment fieldset:last-of-type{ margin-bottom:0; }
form#payment legend{
color:#384313;
font-size:16px;
font-weight:bold;
padding-bottom:10;
text-shadow:0px 1px 1px #c0d576;
}
form#payment > fieldset>legend:before{
content:"Step" counter(fieldset)":";
counter-increment:fieldsets;
}
form#payment fieldset fieldset legend{
color:#111;
font-size:13px;
font-weight:normal;
padding-bottom:0;
}
form#payment ol li{
background:#b9cf6a;
background:rgba(255, 255, 255, 0.3);
border:#e3ebc3;
border-color:rgba(255, 255, 255, 0.6);
border-style:solid;
border-width:2px;
-webkit-border-radius:5px;
line-height:30px;
padding:5px 10px;
margin-bottom:2px;
}
form#payment ol ol li{
bakcground:none;
border:none;
float:left;
}
form#payment label{
float:left;
font-size:13px;
width:110px;
}
form#payment fieldset fieldset label{
background:none no-repeat left 50%;
line-height:20px;
padding:0 0 0 30px;
width:auto;
}
form#payment fieldset fieldset label:hover{cursor:pointer;}
form#payment input:not([type=radio]), form#payment textarea{
background:#fff;
border:#fc3 solid 1px;
-webkit-border-radius:3px;
outline:none;
padding:5px;
}
</style>
</head>
<body>
<form id=payment>
<fieldset>
<legend>用戶詳細資料</legend>
<ol>
<li>
<label for="name">用戶名稱：</label>
<input type="text" id="name" name="name" placeholder="請輸入用戶名" required autofocus>
</li>
<li>
<label for="email">郵件地址：</label>
<input type="text" name="email" id="email" placeholder="example@163.com" required>
</li>
<li>
<label for="phone">聯系電話：</label>
<input type="tel" placeholder="010-12345678" id="phone" name="phone">
</li>
</ol>
</fieldset>
<fieldset>
<legend>Step1:家庭地址(收貨地址)</legend>
<ol>
<li>
<label for="address">詳細地址：</label>
<textarea name="address" id="address" rows="1"></textarea>
</li>
<li>
<label for="postcode">郵政編碼:</label>
<input type="text" id="postcode" name="postcode" required>
</li>
<li>
<label for="country">國 家:</label>
<input type="text" id="country" name="country" required>
</li>
</ol>
</fieldset>
<fieldset>
<legend>付費方式</legend>
<ol>
<li>
<fieldset>
<lagend>信用卡類型</lagend>
<ol>
<li>
<input type="radio" id="visa" name="cardtype">
<label for="visa">中國工商銀行</label>
</li>
<li>
<input type="radio" id="amex" name="cardtype">
<label for="amex">中國人名銀行</label>
</li>
<li>
<input type="radio" id="mastercard" name="cardtype">
<label for="mastercard">中國建設銀行</label>
</li>
</ol>
</fieldset>
</li>
<li>
<label for="cardnumber">銀行卡號</label>
<input type="number" id="cardnumber" name="cardnumber" required>
</li>
<li>
<label for="secure">驗 證 碼：</label>
<input id="cardnumber" name="cardnumber" type="number" required>
</li>
<li>
<label for="namecard">持 卡 人：</label>
<input id="namecard" name="namecard" type="text" placeholder="卻行是否該卡用戶！" required>
</li>
</ol>
</fieldset>
<fieldset>
<button type="submit">現在購買</button>
</fieldset>
</form>
</body>
</html>
