Tech Docs Station

Appearance

表单 ​

本章将介绍HTML表单，它是网页与用户交互的重要方式，用于收集用户输入的数据。

表单基础 ​

什么是表单？ ​

表单是HTML中用于收集用户输入的元素集合，用户可以在表单中输入文本、选择选项、上传文件等，然后将数据提交到服务器。

基本结构 ​

<form> 标签用于创建表单，包含各种输入控件：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单基础示例</title>
</head>
<body>
    <h2>用户登录</h2>
    
    <!-- form标签：创建表单容器 -->
    <form action="/login" method="post">
        <!-- 文本输入框 -->
        <p>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username">
        </p>
        
        <!-- 密码输入框 -->
        <p>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password">
        </p>
        
        <!-- 提交按钮 -->
        <p>
            <button type="submit">登录</button>
        </p>
    </form>
</body>
</html>

form标签属性 ​

html
<form 
    action="/submit"           <!-- 提交地址 -->
    method="post"              <!-- 提交方式：get或post -->
    enctype="multipart/form-data"  <!-- 编码类型 -->
    target="_blank"            <!-- 提交后打开方式 -->
    autocomplete="on"          <!-- 自动完成 -->
    novalidate                 <!-- 不进行表单验证 -->
>
    <!-- 表单内容 -->
</form>
属性说明常用值
action表单提交的URL地址URL路径
method提交方式get、post
enctype编码类型application/x-www-form-urlencoded、multipart/form-data
target提交后打开方式_self、_blank
autocomplete自动完成on、off
novalidate禁用表单验证布尔属性

输入控件 ​

input标签 ​

<input> 是最常用的表单控件，通过 type 属性指定不同类型。

文本输入 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本输入示例</title>
</head>
<body>
    <form>
        <!-- 单行文本输入 -->
        <p>
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" placeholder="请输入姓名">
        </p>
        
        <!-- 密码输入（显示为圆点或星号） -->
        <p>
            <label for="pwd">密码：</label>
            <input type="password" id="pwd" name="password" placeholder="请输入密码">
        </p>
        
        <!-- 邮箱输入（自动验证邮箱格式） -->
        <p>
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" placeholder="example@mail.com">
        </p>
        
        <!-- 搜索框 -->
        <p>
            <label for="search">搜索：</label>
            <input type="search" id="search" name="search" placeholder="搜索内容">
        </p>
        
        <!-- 电话号码 -->
        <p>
            <label for="tel">电话：</label>
            <input type="tel" id="tel" name="tel" placeholder="138-0000-0000">
        </p>
        
        <!-- URL输入 -->
        <p>
            <label for="url">网址：</label>
            <input type="url" id="url" name="url" placeholder="https://example.com">
        </p>
    </form>
</body>
</html>

数字输入 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>数字输入示例</title>
</head>
<body>
    <form>
        <!-- 数字输入 -->
        <p>
            <label for="age">年龄：</label>
            <input type="number" id="age" name="age" min="0" max="150" step="1" value="18">
        </p>
        
        <!-- 范围滑块 -->
        <p>
            <label for="volume">音量：</label>
            <input type="range" id="volume" name="volume" min="0" max="100" value="50">
            <span id="volumeValue">50</span>
        </p>
        
        <!-- 数字输入带小数 -->
        <p>
            <label for="price">价格：</label>
            <input type="number" id="price" name="price" min="0" step="0.01" placeholder="0.00">
        </p>
    </form>
    
    <script>
        // 显示滑块当前值
        document.getElementById('volume').addEventListener('input', function() {
            document.getElementById('volumeValue').textContent = this.value;
        });
    </script>
</body>
</html>

日期时间输入 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>日期时间输入示例</title>
</head>
<body>
    <form>
        <!-- 日期选择 -->
        <p>
            <label for="birthday">生日：</label>
            <input type="date" id="birthday" name="birthday">
        </p>
        
        <!-- 时间选择 -->
        <p>
            <label for="meeting-time">会议时间：</label>
            <input type="time" id="meeting-time" name="meeting-time">
        </p>
        
        <!-- 日期时间选择 -->
        <p>
            <label for="datetime">日期时间：</label>
            <input type="datetime-local" id="datetime" name="datetime">
        </p>
        
        <!-- 月份选择 -->
        <p>
            <label for="month">月份：</label>
            <input type="month" id="month" name="month">
        </p>
        
        <!-- 周选择 -->
        <p>
            <label for="week">周：</label>
            <input type="week" id="week" name="week">
        </p>
    </form>
</body>
</html>

颜色选择 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>颜色选择示例</title>
</head>
<body>
    <form>
        <p>
            <label for="color">选择颜色：</label>
            <input type="color" id="color" name="color" value="#ff0000">
        </p>
    </form>
</body>
</html>

文件上传 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文件上传示例</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <!-- 单文件上传 -->
        <p>
            <label for="avatar">头像：</label>
            <input type="file" id="avatar" name="avatar">
        </p>
        
        <!-- 多文件上传 -->
        <p>
            <label for="photos">照片：</label>
            <input type="file" id="photos" name="photos" multiple>
        </p>
        
        <!-- 限制文件类型 -->
        <p>
            <label for="document">文档：</label>
            <input type="file" id="document" name="document" accept=".pdf,.doc,.docx">
        </p>
        
        <!-- 图片上传 -->
        <p>
            <label for="image">图片：</label>
            <input type="file" id="image" name="image" accept="image/*">
        </p>
    </form>
</body>
</html>

隐藏字段 ​

html
<!-- 隐藏字段：用户看不到，但会随表单提交 -->
<input type="hidden" name="userId" value="12345">
<input type="hidden" name="token" value="abc123xyz">

只读和禁用 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>只读和禁用示例</title>
</head>
<body>
    <form>
        <!-- 只读：可以查看但不能修改，值会提交 -->
        <p>
            <label for="readonly">只读字段：</label>
            <input type="text" id="readonly" name="readonly" value="不可修改" readonly>
        </p>
        
        <!-- 禁用：不能操作，值不会提交 -->
        <p>
            <label for="disabled">禁用字段：</label>
            <input type="text" id="disabled" name="disabled" value="已禁用" disabled>
        </p>
    </form>
</body>
</html>

input常用属性 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>input属性示例</title>
</head>
<body>
    <form>
        <!-- placeholder：占位提示文字 -->
        <input type="text" placeholder="请输入用户名">
        
        <br><br>
        
        <!-- value：默认值 -->
        <input type="text" value="默认值">
        
        <br><br>
        
        <!-- maxlength：最大字符数 -->
        <input type="text" maxlength="10" placeholder="最多10个字符">
        
        <br><br>
        
        <!-- minlength：最小字符数 -->
        <input type="text" minlength="3" placeholder="至少3个字符">
        
        <br><br>
        
        <!-- size：显示宽度（字符数） -->
        <input type="text" size="30" placeholder="宽度30个字符">
        
        <br><br>
        
        <!-- required：必填字段 -->
        <input type="text" required placeholder="必填字段">
        
        <br><br>
        
        <!-- pattern：正则表达式验证 -->
        <input type="text" pattern="[A-Za-z]{3}" placeholder="请输入3个字母">
        
        <br><br>
        
        <!-- autofocus：自动获取焦点 -->
        <input type="text" autofocus placeholder="自动获取焦点">
        
        <br><br>
        
        <!-- autocomplete：自动完成 -->
        <input type="text" autocomplete="off" placeholder="禁用自动完成">
        
        <br><br>
        
        <!-- list：关联datalist -->
        <input type="text" list="browsers" placeholder="选择浏览器">
        <datalist id="browsers">
            <option value="Chrome">
            <option value="Firefox">
            <option value="Safari">
            <option value="Edge">
        </datalist>
    </form>
</body>
</html>

多行文本框 ​

<textarea> 用于多行文本输入：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>textarea示例</title>
</head>
<body>
    <form>
        <p>
            <label for="intro">个人简介：</label><br>
            <!-- rows：可见行数，cols：可见列数 -->
            <textarea id="intro" name="intro" rows="5" cols="50" placeholder="请输入个人简介..."></textarea>
        </p>
        
        <!-- 使用CSS控制大小 -->
        <p>
            <label for="content">文章内容：</label><br>
            <textarea id="content" name="content" style="width: 100%; height: 150px;" placeholder="请输入文章内容..."></textarea>
        </p>
        
        <!-- 限制最大长度 -->
        <p>
            <label for="comment">评论：</label><br>
            <textarea id="comment" name="comment" maxlength="200" placeholder="最多200个字符"></textarea>
        </p>
    </form>
</body>
</html>

选择框 ​

单选按钮 ​

<input type="radio"> 用于单选，同一组使用相同的 name 属性：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>单选按钮示例</title>
</head>
<body>
    <form>
        <p>请选择性别：</p>
        <p>
            <!-- 同一组单选按钮name必须相同 -->
            <label>
                <input type="radio" name="gender" value="male" checked> 男
            </label>
            <label>
                <input type="radio" name="gender" value="female"> 女
            </label>
            <label>
                <input type="radio" name="gender" value="other"> 其他
            </label>
        </p>
        
        <p>请选择支付方式：</p>
        <p>
            <label>
                <input type="radio" name="payment" value="alipay"> 支付宝
            </label>
            <label>
                <input type="radio" name="payment" value="wechat"> 微信支付
            </label>
            <label>
                <input type="radio" name="payment" value="card"> 银行卡
            </label>
        </p>
    </form>
</body>
</html>

复选框 ​

<input type="checkbox"> 用于多选：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>复选框示例</title>
</head>
<body>
    <form>
        <p>请选择兴趣爱好：</p>
        <p>
            <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>
            <label>
                <input type="checkbox" name="hobby" value="travel"> 旅游
            </label>
        </p>
        
        <p>同意条款：</p>
        <p>
            <label>
                <!-- checked：默认选中 -->
                <input type="checkbox" name="agree" required> 我已阅读并同意用户协议
            </label>
        </p>
    </form>
</body>
</html>

下拉选择框 ​

<select> 和 <option> 创建下拉选择框：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>下拉选择框示例</title>
</head>
<body>
    <form>
        <!-- 基本下拉框 -->
        <p>
            <label for="city">选择城市：</label>
            <select id="city" name="city">
                <option value="">请选择</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                <option value="shenzhen">深圳</option>
            </select>
        </p>
        
        <!-- 默认选中 -->
        <p>
            <label for="country">选择国家：</label>
            <select id="country" name="country">
                <option value="usa">美国</option>
                <option value="uk">英国</option>
                <!-- selected：默认选中 -->
                <option value="china" selected>中国</option>
                <option value="japan">日本</option>
            </select>
        </p>
        
        <!-- 分组下拉框 -->
        <p>
            <label for="car">选择汽车：</label>
            <select id="car" name="car">
                <optgroup label="德系">
                    <option value="bmw">宝马</option>
                    <option value="benz">奔驰</option>
                    <option value="audi">奥迪</option>
                </optgroup>
                <optgroup label="日系">
                    <option value="toyota">丰田</option>
                    <option value="honda">本田</option>
                    <option value="nissan">日产</option>
                </optgroup>
            </select>
        </p>
        
        <!-- 多选下拉框 -->
        <p>
            <label for="skills">选择技能（按Ctrl多选）：</label><br>
            <select id="skills" name="skills" multiple size="5">
                <option value="html">HTML</option>
                <option value="css">CSS</option>
                <option value="js">JavaScript</option>
                <option value="vue">Vue</option>
                <option value="react">React</option>
            </select>
        </p>
    </form>
</body>
</html>

按钮类型 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>按钮示例</title>
</head>
<body>
    <form>
        <!-- input类型按钮 -->
        <p>
            <input type="submit" value="提交表单">
            <input type="reset" value="重置表单">
            <input type="button" value="普通按钮">
        </p>
        
        <!-- button标签按钮 -->
        <p>
            <!-- submit：提交表单（默认） -->
            <button type="submit">提交</button>
            
            <!-- reset：重置表单 -->
            <button type="reset">重置</button>
            
            <!-- button：普通按钮 -->
            <button type="button">普通按钮</button>
        </p>
        
        <!-- 带样式的按钮 -->
        <p>
            <button type="submit">
                <strong>确认提交</strong>
            </button>
            <button type="button" disabled>禁用按钮</button>
        </p>
    </form>
</body>
</html>

表单组织 ​

label标签 ​

<label> 为表单控件添加标签，提高可用性：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>label标签示例</title>
</head>
<body>
    <form>
        <!-- 方式1：使用for属性关联（推荐） -->
        <p>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username">
        </p>
        
        <!-- 方式2：包裹控件 -->
        <p>
            <label>
                密码：
                <input type="password" name="password">
            </label>
        </p>
        
        <!-- 点击标签可以选中对应的控件 -->
        <p>
            <label>
                <input type="checkbox" name="remember"> 记住我
            </label>
        </p>
    </form>
</body>
</html>

fieldset和legend ​

<fieldset> 用于对表单控件进行分组，<legend> 为分组添加标题：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>fieldset示例</title>
    <style>
        fieldset {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
        }
        legend {
            padding: 0 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <form>
        <!-- 个人信息分组 -->
        <fieldset>
            <legend>个人信息</legend>
            <p>
                <label for="name">姓名：</label>
                <input type="text" id="name" name="name">
            </p>
            <p>
                <label for="age">年龄：</label>
                <input type="number" id="age" name="age">
            </p>
            <p>
                <label for="gender">性别：</label>
                <select id="gender" name="gender">
                    <option value="male">男</option>
                    <option value="female">女</option>
                </select>
            </p>
        </fieldset>
        
        <!-- 联系方式分组 -->
        <fieldset>
            <legend>联系方式</legend>
            <p>
                <label for="phone">电话：</label>
                <input type="tel" id="phone" name="phone">
            </p>
            <p>
                <label for="email">邮箱：</label>
                <input type="email" id="email" name="email">
            </p>
            <p>
                <label for="address">地址：</label>
                <input type="text" id="address" name="address">
            </p>
        </fieldset>
        
        <!-- 禁用的分组 -->
        <fieldset disabled>
            <legend>高级设置（已禁用）</legend>
            <p>
                <label for="setting1">设置1：</label>
                <input type="text" id="setting1" name="setting1">
            </p>
        </fieldset>
        
        <button type="submit">提交</button>
    </form>
</body>
</html>

表单验证 ​

HTML5提供了内置的表单验证功能：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单验证示例</title>
    <style>
        input:valid {
            border-color: green;
        }
        input:invalid {
            border-color: red;
        }
    </style>
</head>
<body>
    <form>
        <!-- required：必填验证 -->
        <p>
            <label for="username">用户名（必填）：</label>
            <input type="text" id="username" name="username" required>
        </p>
        
        <!-- pattern：正则表达式验证 -->
        <p>
            <label for="phone">手机号：</label>
            <input type="tel" id="phone" name="phone" 
                   pattern="^1[3-9]\d{9}$" 
                   placeholder="请输入11位手机号">
        </p>
        
        <!-- min/max：数值范围验证 -->
        <p>
            <label for="age">年龄（18-100）：</label>
            <input type="number" id="age" name="age" min="18" max="100">
        </p>
        
        <!-- minlength/maxlength：长度验证 -->
        <p>
            <label for="password">密码（6-20位）：</label>
            <input type="password" id="password" name="password" 
                   minlength="6" maxlength="20">
        </p>
        
        <!-- 邮箱格式验证 -->
        <p>
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" required>
        </p>
        
        <!-- URL格式验证 -->
        <p>
            <label for="website">网站：</label>
            <input type="url" id="website" name="website" placeholder="https://">
        </p>
        
        <!-- 自定义验证消息 -->
        <p>
            <label for="custom">自定义验证：</label>
            <input type="text" id="custom" name="custom" 
                   pattern="[A-Za-z]{3,}" 
                   title="请输入至少3个字母">
        </p>
        
        <button type="submit">提交</button>
    </form>
</body>
</html>

novalidate属性 ​

使用 novalidate 属性可以禁用表单验证：

html
<!-- 禁用整个表单的验证 -->
<form novalidate>
    <input type="email" required>
    <button type="submit">提交</button>
</form>

综合示例 ​

html
<!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>
        * {
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        form {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        fieldset {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
        }
        legend {
            font-weight: bold;
            color: #4CAF50;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="tel"],
        input[type="date"],
        select,
        textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        input:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: #4CAF50;
        }
        .radio-group label,
        .checkbox-group label {
            display: inline-block;
            margin-right: 15px;
            font-weight: normal;
        }
        .btn {
            background-color: #4CAF50;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .btn:hover {
            background-color: #45a049;
        }
        .btn-reset {
            background-color: #888;
            margin-left: 10px;
        }
        .btn-reset:hover {
            background-color: #666;
        }
        .error {
            color: red;
            font-size: 12px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <h1>用户注册</h1>
    
    <form action="/register" method="post">
        <!-- 基本信息 -->
        <fieldset>
            <legend>基本信息</legend>
            
            <div class="form-group">
                <label for="username">用户名 *</label>
                <input type="text" id="username" name="username" 
                       required minlength="3" maxlength="20"
                       placeholder="3-20个字符">
            </div>
            
            <div class="form-group">
                <label for="password">密码 *</label>
                <input type="password" id="password" name="password" 
                       required minlength="6" maxlength="20"
                       placeholder="6-20个字符">
            </div>
            
            <div class="form-group">
                <label for="confirmPassword">确认密码 *</label>
                <input type="password" id="confirmPassword" name="confirmPassword" 
                       required minlength="6" maxlength="20"
                       placeholder="再次输入密码">
            </div>
            
            <div class="form-group">
                <label for="realname">真实姓名 *</label>
                <input type="text" id="realname" name="realname" required
                       placeholder="请输入真实姓名">
            </div>
            
            <div class="form-group">
                <label for="birthday">出生日期</label>
                <input type="date" id="birthday" name="birthday">
            </div>
            
            <div class="form-group">
                <label>性别 *</label>
                <div class="radio-group">
                    <label>
                        <input type="radio" name="gender" value="male" required> 男
                    </label>
                    <label>
                        <input type="radio" name="gender" value="female"> 女
                    </label>
                </div>
            </div>
        </fieldset>
        
        <!-- 联系方式 -->
        <fieldset>
            <legend>联系方式</legend>
            
            <div class="form-group">
                <label for="email">邮箱 *</label>
                <input type="email" id="email" name="email" required
                       placeholder="example@mail.com">
            </div>
            
            <div class="form-group">
                <label for="phone">手机号 *</label>
                <input type="tel" id="phone" name="phone" required
                       pattern="^1[3-9]\d{9}$"
                       placeholder="请输入11位手机号">
            </div>
            
            <div class="form-group">
                <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>
            
            <div class="form-group">
                <label for="address">详细地址</label>
                <textarea id="address" name="address" rows="3"
                          placeholder="请输入详细地址"></textarea>
            </div>
        </fieldset>
        
        <!-- 其他信息 -->
        <fieldset>
            <legend>其他信息</legend>
            
            <div class="form-group">
                <label>兴趣爱好</label>
                <div class="checkbox-group">
                    <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>
                    <label>
                        <input type="checkbox" name="hobby" value="travel"> 旅游
                    </label>
                </div>
            </div>
            
            <div class="form-group">
                <label for="avatar">头像上传</label>
                <input type="file" id="avatar" name="avatar" accept="image/*">
            </div>
            
            <div class="form-group">
                <label for="intro">个人简介</label>
                <textarea id="intro" name="intro" rows="4"
                          maxlength="200" placeholder="最多200个字符"></textarea>
            </div>
        </fieldset>
        
        <!-- 协议同意 -->
        <div class="form-group">
            <label>
                <input type="checkbox" name="agree" required> 
                我已阅读并同意<a href="#">用户协议</a>和<a href="#">隐私政策</a>
            </label>
        </div>
        
        <!-- 提交按钮 -->
        <div class="form-group" style="text-align: center;">
            <button type="submit" class="btn">注册</button>
            <button type="reset" class="btn btn-reset">重置</button>
        </div>
    </form>
</body>
</html>

本章小结 ​

本章我们学习了：

  1. 表单基础：<form> 标签及其属性
  2. 输入控件：各种 input 类型、<textarea>、<select>
  3. 选择控件：单选按钮、复选框、下拉选择框
  4. 按钮类型：submit、reset、button
  5. 表单组织：<label>、<fieldset>、<legend>
  6. 表单验证：required、pattern、min、max 等验证属性

下一章 ​

下一章我们将学习 多媒体，了解如何在网页中嵌入视频和音频。