课程11: 表单与用户输入

🎯 课程目标

完成本课程后，你将能够：

理解HTML表单的基本结构和常用表单元素
掌握输入框、下拉菜单、复选框、单选按钮的使用方法
学习表单验证的基本原理和实现方式
能够创建功能完整的用户注册和联系表单
理解表单数据的提交和处理流程

📖 表单概述

表单是Web应用中收集用户信息的核心组件。从用户注册、登录到搜索、反馈，几乎所有的交互都需要通过表单来实现。表单让我们能够获取用户的文本输入、选择选项和提交数据。

                    ✨ 常见表单应用场景
                    用户注册登录：收集用户名、密码、邮箱等信息
联系表单：收集用户的反馈消息和联系方式
搜索框：允许用户输入搜索关键词
调查问卷：收集用户的选择和意见
订单表单：收集配送地址和支付信息

                

💻 创建表单元素

HTML提供了丰富的表单元素类型，每种类型都有特定的用途。让我们逐一学习这些元素的创建方法。

步骤 1：创建表单容器

使用form标签创建表单容器，并通过action和method属性指定数据提交的目标和处理方式。

<!-- 基本表单结构 -->
<form action="/submit" method="POST">
    <!-- 表单内容将放在这里 -->
</form>

<!-- 各属性说明： -->
<!-- action: 数据提交的目标URL -->
<!-- method: 提交方式，GET或POST -->
<!-- GET: 数据显示在URL中，适合搜索 -->
<!-- POST: 数据在请求体中，适合敏感信息 -->
                    

步骤 2：文本输入框

文本输入框是最常用的表单元素，用于收集单行文本信息。

<!-- 各种文本输入框 -->

<!-- 普通文本输入框 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username" 
       placeholder="请输入用户名" required>

<!-- 密码输入框 -->
<label for="password">密码：</label>
<input type="password" id="password" name="password" 
       minlength="6" required>

<!-- 邮箱输入框 -->
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" 
       placeholder="example@email.com" required>

<!-- 电话输入框 -->
<label for="phone">电话：</label>
<input type="tel" id="phone" name="phone" 
       pattern="[0-9]{11}" placeholder="请输入11位手机号">
                    

步骤 3：选择类表单元素

当需要用户从预设选项中选择时，使用下拉菜单、单选按钮或复选框。

<!-- 下拉选择框 -->
<label for="city">所在城市：</label>
<select id="city" name="city">
    <option value="">请选择城市</option>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
</select>

<!-- 单选按钮组（只能选一个）-->
<fieldset>
    <legend>性别：</legend>
    <label><input type="radio" name="gender" value="male"> 男</label>
    <label><input type="radio" name="gender" value="female"> 女</label>
</fieldset>

<!-- 复选框组（可以选多个）-->
<fieldset>
    <legend>兴趣爱好：</legend>
    <label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
    <label><input type="checkbox" name="hobby" value="music"> 音乐</label>
    <label><input type="checkbox" name="hobby" value="sports"> 运动</label>
</fieldset>
                    

步骤 4：多行文本和按钮

对于较长的文本输入，如评论或消息，使用textarea元素。按钮用于触发表单提交或其他操作。

<!-- 多行文本输入框 -->
<label for="message">留言内容：</label>
<textarea id="message" name="message" 
          rows="5" cols="50" 
          placeholder="请输入您的留言..."></textarea>

<!-- 提交按钮 -->
<button type="submit">提交表单</button>

<!-- 重置按钮 -->
<button type="reset">重置</button>

<!-- 普通按钮 -->
<button type="button" onclick="saveDraft()">保存草稿</button>
                    

🎨 完整注册表单示例

让我们整合所学的知识，创建一个完整的用户注册表单。

<!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>
        form { max-width: 500px; margin: 0 auto; padding: 20px; }
        .form-group { margin-bottom: 20px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input[type="text"], input[type="email"], input[type="password"] {
            width: 100%; padding: 12px; 
            border: 2px solid #ddd; border-radius: 8px;
        }
        button { 
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            color: white; padding: 15px 30px;
            border: none; border-radius: 10px;
            cursor: pointer; width: 100%;
        }
    </style>
</head>
<body>
    <form id="registerForm" action="/api/register" method="POST">
        <h2>用户注册</h2>
        
        <div class="form-group">
            <label for="username">用户名 *</label>
            <input type="text" id="username" name="username" 
                   minlength="3" maxlength="20" 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"
                   minlength="6" required>
        </div>
        
        <div class="form-group">
            <label for="confirmPassword">确认密码 *</label>
            <input type="password" id="confirmPassword" 
                   data-validation="match:password" required>
        </div>
        
        <button type="submit">立即注册</button>
    </form>
</body>
</html>
                

⚡ JavaScript表单处理

使用JavaScript可以实现更复杂的表单验证和处理逻辑，提升用户体验。

// 获取表单元素
const form = document.getElementById('registerForm');

// 监听表单提交事件
form.addEventListener('submit', async (e) => {
    e.preventDefault(); // 阻止默认提交行为
    
    // 获取表单数据
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());
    
    // 前端验证
    if (!validateForm(data)) {
        return;
    }
    
    // 发送数据到服务器
    try {
        const response = await fetch(form.action, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });
        
        if (response.ok) {
            alert('注册成功！');
            form.reset();
        }
    } catch (error) {
        console.error('注册失败：', error);
    }
});

// 表单验证函数
function validateForm(data) {
    // 验证用户名长度
    if (data.username.length < 3) {
        alert('用户名至少3个字符');
        return false;
    }
    
    // 验证密码匹配
    if (data.password !== data.confirmPassword) {
        alert('两次输入的密码不一致');
        return false;
    }
    
    return true;
}
                

🎯 表单验证规则

良好的表单验证能够确保数据的准确性和安全性。以下是常见的验证规则：

验证类型	HTML属性	说明
必填	required	用户必须填写该项
最小长度	minlength="6"	最少输入6个字符
最大长度	maxlength="20"	最多输入20个字符
数字范围	min="18" max="99"	年龄在18-99之间
正则匹配	pattern="[0-9]{11}"	符合正则表达式
邮箱格式	type="email"	必须是有效的邮箱地址

⚠️ 常见问题

问题	原因分析	解决方案
表单无法提交	缺少name属性或验证失败	检查所有input是否有name属性
密码不显示隐藏	type不是password	确认input的type设置为"password"
下拉菜单没有默认值	没有设置selected选项	给默认选项添加selected属性
单选按钮可以多选	name属性值不一致	确保同一组的单选按钮name相同

✅ 课后练习

练习要求：请独立完成以下练习任务：

练习 1：创建一个联系表单，包含姓名、邮箱、电话、留言内容等字段
练习 2：为表单添加前端验证，确保必填字段不为空
选做练习：使用JavaScript实现表单提交时的loading状态和成功提示