简单表单代码：轻松上手，简单表单代码实现指南

来源：网络作者：日期：2025-11-05 13:54:43

在Web开发中，表单是用户与网站交互的重要工具，无论是登录页面、注册表单还是简单的反馈表单，掌握基础表单代码都是每个前端开发者的必备技能，本文将通过一个简单示例,带您快速了解如何创建一个基础的HTML表单。

基础表单结构

一个最基本的HTML表单包含<form>标签和几个输入字段,下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">简单表单示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
        }
        .form-container {
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="text"], 
        input[type="email"], 
        input[type="password"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>用户注册表单</h2>
        <form action="/submit-form" method="post">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="email">电子邮箱:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <label>性别:</label>
                <label>
                    <input type="radio" name="gender" value="male" checked> 男
                </label>
                <label style="margin-left: 20px;">
                    <input type="radio" name="gender" value="female"> 女
                </label>
            </div>
            <div class="form-group">
                <label>
                    <input type="checkbox" name="terms" required>
                    我同意条款和条件
                </label>
            </div>
            <button type="submit">注册</button>
        </form>
    </div>
</body>
</html>

代码解析

表单容器：使用<form>标签定义表单，action属性指定表单提交的URL，method属性指定提交方式（post或get）。
输入字段：
- 文本输入：<input type="text">
- 邮箱输入：<input type="email">（自动验证邮箱格式）
- 密码输入：<input type="password">
- 单选按钮：<input type="radio">
- 复选框：<input type="checkbox">
验证功能：
- required属性：标记字段为必填项
- type="email"：自动验证邮箱格式
样式设计：
- 使用CSS美化表单外观
- 添加响应式设计，适应不同屏幕尺寸