在线支付页面html源码

作者：原来是梦发布日期:2025-02-06 浏览:302

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线支付页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            max-width: 600px;
            margin: 50px auto;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        form {
            display: flex;
            flex-direction: column;
        }
        label {
            margin-bottom: 10px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="number"],
        input[type="email"] {
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input[type="submit"] {
            padding: 10px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>在线支付</h1>
        <form action="/process_payment" method="POST">
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" required>

            <label for="cardNumber">卡号:</label>
            <input type="text" id="cardNumber" name="cardNumber" placeholder="1234 5678 9012 3456" required>

            <label for="expiryDate">有效期 (MM/YY):</label>
            <input type="text" id="expiryDate" name="expiryDate" placeholder="12/23" required>

            <label for="cvv">CVV:</label>
            <input type="number" id="cvv" name="cvv" required>

            <label for="email">电子邮件:</label>
            <input type="email" id="email" name="email" required>

            <input type="submit" value="支付">
        </form>
    </div>
</body>
</html>

解释说明：

HTML结构:
- 使用了标准的HTML5文档结构，包含<!DOCTYPE html>声明和<html>标签。
- <head>部分包含了字符集、视口设置、标题和样式定义。
- <body>部分包含了一个表单，用于收集用户的支付信息。
CSS样式:
- 定义了页面的基本样式，包括字体、背景颜色、居中布局等。
- 表单元素（如输入框和按钮）也进行了样式美化，确保用户界面友好。
表单元素:
- 包含了多个输入字段，分别用于收集用户的姓名、卡号、有效期、CVV码和电子邮件。
- 每个输入字段都设置了required属性，确保用户必须填写这些信息才能提交表单。
- 提交按钮使用了绿色背景，并在鼠标悬停时改变颜色，提供更好的用户体验。
表单提交:
- 表单的action属性指定了处理支付请求的服务器端URL (/process_payment)。
- method="POST"表示表单数据将通过POST方法发送到服务器。

上一篇：html转apk

下一篇：html美化代码