HTML 表单基础（练习）

学习目标

掌握 HTML 表单的基本结构及 form 标签的核心属性
熟悉常用输入控件 input 的不同类型及其应用场景
学会使用 label、select、textarea 等辅助标签优化用户体验
理解表单数据提交的基本原理及本地化验证方法

基础概念

HTML 表单是网页中与用户进行交互的主要方式，用于收集用户输入的数据（如注册信息、搜索关键词、反馈意见等），并将其发送到服务器进行处理。一个标准的表单由 form 容器包裹各种输入控件组成。表单的最外层必须使用 form 标签定义，其主要属性包括：

action：指定数据提交的目标地址（URL）
method：定义提交方式，通常为 get 或 post
enctype：规定数据编码类型，涉及文件上传时需用 multipart/form-data

常用输入控件

输入控件是表单的灵魂，通过 input 标签的 type 属性变化，可以实现多种不同的输入需求。

文本输入

文本框 (text)：用于输入单行文本，如用户名、搜索词
密码框 (password)：输入内容会被掩码显示，保护隐私
邮箱 (email)：专用于输入电子邮件地址，浏览器可进行基础格式校验
数字 (number)：限制只能输入数值，可设置最大值和最小值

选择输入

单选按钮 (radio)：在一组选项中只能选择一个，需通过 name 属性分组
复选框 (checkbox)：允许多选，常用于兴趣标签或协议勾选
下拉菜单 (select)：节省空间的多选项展示方式，配合 option 标签使用

其他控件

日期选择 (date)：调用浏览器原生日期选择器
文件上传 (file)：允许用户选择本地文件
提交按钮 (submit)：触发表单提交动作
重置按钮 (reset)：清空表单内所有已填内容

用户体验标签

为了让表单更易于理解和操作，我们需要引入辅助标签。

Label

label 标签用于定义输入控件的文本标签。将 label 的 for 属性与 input 的 id 属性绑定后，用户点击文字即可自动聚焦到对应的输入框，这对移动端用户尤为友好。

定义 id 为 username 的输入框
定义 for 为 username 的标签
两者建立关联，提升可访问性

多行文本与下拉选择

对于需要输入长段内容的场景（如个人简介、反馈意见），应使用 textarea 标签而非 input。它支持 rows 和 cols 属性来控制初始显示的行数和列数。对于选项固定的场景（如选择省份、职业），select 标签配合 option 是最佳选择。可以通过 selected 属性预设默认选项。

实战练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户注册表单练习</title>
</head>
<body>
    <h2>新用户注册</h2>
    
    <!-- 表单开始 -->
    <form action="/submit-register" method="post">
        
        <!-- 用户名输入 -->
        <div>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" placeholder="请输入3-10位字符" required>
        </div>
        <br>

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

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

        <!-- 性别选择 (单选) -->
        <div>
            <span>性别：</span>
            <input type="radio" id="male" name="gender" value="male" checked>
            <label for="male">男</label>
            
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">女</label>
        </div>
        <br>

        <!-- 兴趣爱好 (多选) -->
        <div>
            <span>兴趣爱好：</span>
            <input type="checkbox" id="hobby-code" name="hobbies" value="coding">
            <label for="hobby-code">编程</label>
            
            <input type="checkbox" id="hobby-read" name="hobbies" value="reading">
            <label for="hobby-read">阅读</label>
            
            <input type="checkbox" id="hobby-sport" name="hobbies" value="sports">
            <label for="hobby-sport">运动</label>
        </div>
        <br>

        <!-- 所在省份 (下拉菜单) -->
        <div>
            <label for="province">所在省份：</label>
            <select id="province" name="province">
                <option value="">--请选择--</option>
                <option value="beijing">北京市</option>
                <option value="shanghai">上海市</option>
                <option value="guangdong">广东省</option>
                <option value="zhejiang">浙江省</option>
            </select>
        </div>
        <br>

        <!-- 个人简介 (多行文本) -->
        <div>
            <label for="bio">个人简介：</label><br>
            <textarea id="bio" name="bio" rows="4" cols="50" placeholder="请简单介绍你自己..."></textarea>
        </div>
        <br>

        <!-- 提交与重置 -->
        <div>
            <button type="submit">立即注册</button>
            <button type="reset">重新填写</button>
        </div>

    </form>
    <!-- 表单结束 -->
</body>
</html>

代码结构

整个表单被包裹在 form 标签中，method 设置为 post 以安全传输密码数据
每个输入项都使用了 div 进行简单的块级分隔
所有 input 均配置了 name 属性，这是后端接收数据的关键标识
使用了 required 属性进行前端非空验证
单选按钮通过相同的 name 值实现互斥效果