<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>付费表单示例</title>
    <link href="payment-form.css" rel="stylesheet">
</head>

<body>
    <form method="post">
        <h1>付费表单</h1>
        <p><strong><abbr title="必填">*</abbr></strong>为必填项目。</p>
        <section>
            <h2>联系方式</h2>
            <fieldset>
              <legend>称呼</legend>
              <ul>
                  <li>
                    <label for="title_1">
                      <input type="radio" id="title_1" name="title" value="A">
                      黑桃 A
                    </label>
                  </li>
                  <li>
                    <label for="title_2">
                      <input type="radio" id="title_2" name="title" value="K" >
                      草花 K
                    </label>
                  </li>
                  <li>
                    <label for="title_3">
                      <input type="radio" id="title_3" name="title" value="Q">
                      红心 Q
                    </label>
                  </li>
              </ul>
            </fieldset>
            <p>
              <label for="name">
                <span>名字：</span>
                <strong><abbr title="必填">*</abbr></strong>
              </label>
              <input type="text" id="name" name="username">
            </p>
            <p>
              <label for="mail">
                <span>电子邮件：</span>
                <strong><abbr title="必填">*</abbr></strong>
              </label>
              <input type="email" id="mail" name="usermail">
            </p>
            <p>
              <label for="pwd">
                <span>密码：</span>
                <strong><abbr title="必填">*</abbr></strong>
              </label>
              <input type="password" id="pwd" name="password">
            </p>
        </section>
        <section>
            <h2>付费信息</h2>
            <p>
              <label for="card">
                <span>信用卡类型</span>
              </label>
              <select id="card" name="usercard">
                <option value="visa">Visa</option>
                <option value="mc">Mastercard</option>
                <option value="amex">American Express</option>
              </select>
            </p>
            <p>
              <label for="number">
                <span>卡号：</span>
                <strong><abbr title="必填">*</abbr></strong>
              </label>
                <input type="tel" id="number" name="cardnumber">
            </p>
            <p>
              <label for="date">
                <span>有效期至：</span>
                <strong><abbr title="必填">*</abbr></strong>
                <em>日期格式：yyyy/mm/dd</em>
              </label>
              <input type="date" id="date" name="expiration">
            </p>
        </section>
        <section>
            <p> <button type="submit">确认支付</button> </p>
        </section>
    </form>
</body>

</html>
