console
<!DOCTYPE html>
<html lang="utf-8">
<head>
<title>表單測試002</title>
<meta charset="utf-8">
<meta name="description" content="描述網頁的內容">
<meta name="keywords" content="搜尋關鍵字1,搜尋關鍵字2">
<meta name="author" content="作者">
<body>
<form method="GET" action="/processor">
<h1>購買 Web 開發者晚會門票</h1>
<p>門票每張10美元。晚餐套餐需額外支付 5 美元。各個領域都需要。</p>
<fieldset>
<legend>門票和附加項目</legend>
<p>
<label for="quantity">門票數量 </label>
<span class="help">限制 8</span>
<input type="number" value="1" name="quantity" id="quantity" step="1" min="1" max="8">
</p>
<p>
<label for="quantity">晚餐套餐 </label>
<span class="help">2人份</span>
<input type="number" value="1" name="quantity" id="quantity" step="1" min="1" max="8">
</p>
</fieldset>
<fieldset>
<legend>支付</legend>
<p>
<label for="ccn">信用卡號碼 </label>
<span class="help">請不要有空格或破折號。</span>
<input type="text" id="ccn" name="ccn" placeholder="372000000000008" maxlength="16" size="16">
</p>
<p>
<label for="expiration">到期日期 </label>
<span class="help"><abbr title="Two-digit month">MM</abbr>/<abbr title="Four-digit Year">YYYY</abbr></span>
<input type="text" id="expiration" name="expiration" placeholder="01/2018" maxlength="7" size="7">
</p>
</fieldset>
<fieldset>
<legend>帳單地址</legend>
<p>
<label for="name">姓名</label>
<input type="text" id="name" name="name" placeholder="ex: John Q. Public" size="40">
</p>
<p>
<label for="street_address">街道地址</label>
<input type="text" id="name" name="name" placeholder="ex: 12345 Main Street, Apt 23" size="40">
</p>
<p>
<label for="city">城市</label>
<input type="text" id="city" name="city" placeholder="ex: Anytown">
</p>
<p>
<label for="state">州名</label>
<input type="text" id="state" name="state" placeholder="CA" maxlength="2" pattern="[A-W]{2}" size="2">
</p>
<p>
<label for="zip">郵編</label>
<input type="text" id="zip" name="zip" placeholder="12345" maxlength="5" pattern="0-9{5}" size="5">
</p>
</fieldset>
<button type="submit">買票！</button>
</form>
</body>
</html>