表单

HTML 表单用于收集用户输入，是网页交互的重要组成部分。

基本结构

表单使用 <form> 标签创建：

html

<form action="/submit" method="post">
    <!-- 表单元素 -->
</form>

form 属性

属性	说明
`action`	提交表单的 URL
`method`	提交方式：`get` 或 `post`
`enctype`	编码类型：`application/x-www-form-urlencoded`、`multipart/form-data`
`autocomplete`	自动完成：`on` 或 `off`
`novalidate`	禁用表单验证

input 元素

<input> 是最常用的表单元素，通过 type 属性指定不同类型：

文本输入

html

<input type="text" name="username" placeholder="请输入用户名">

密码输入

html

<input type="password" name="password" placeholder="请输入密码">

邮箱输入

html

<input type="email" name="email" placeholder="请输入邮箱">

数字输入

html

<input type="number" name="age" min="0" max="150" step="1">

电话输入

html

<input type="tel" name="phone" placeholder="请输入电话号码">

URL 输入

html

<input type="url" name="website" placeholder="请输入网址">

搜索框

html

<input type="search" name="keyword" placeholder="搜索...">

日期时间

html

<input type="date" name="birthday">
<input type="time" name="alarm">
<input type="datetime-local" name="meeting">
<input type="month" name="expiry">
<input type="week" name="week">

颜色选择

html

<input type="color" name="color" value="#ff0000">

范围滑块

html

<input type="range" name="volume" min="0" max="100" value="50">

文件上传

html

<input type="file" name="avatar">
<input type="file" name="photos" multiple accept="image/*">

隐藏字段

html

<input type="hidden" name="token" value="abc123">

单选与复选

单选按钮

html

<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>

<input type="radio" name="gender" value="female" id="female">
<label for="female">女</label>

复选框

html

<input type="checkbox" name="hobby" value="reading" id="reading">
<label for="reading">阅读</label>

<input type="checkbox" name="hobby" value="music" id="music">
<label for="music">音乐</label>

<input type="checkbox" name="hobby" value="sports" id="sports">
<label for="sports">运动</label>

默认选中

html

<input type="radio" name="gender" value="male" checked>
<input type="checkbox" name="agree" checked>

按钮

提交按钮

html

<input type="submit" value="提交">
<button type="submit">提交</button>

重置按钮

html

<input type="reset" value="重置">
<button type="reset">重置</button>

普通按钮

html

<input type="button" value="点击">
<button type="button">点击</button>

图像按钮

html

<input type="image" src="submit.png" alt="提交">

文本域

多行文本输入：

html

<textarea name="message" rows="5" cols="30" placeholder="请输入留言"></textarea>

下拉列表

基本下拉

html

<select name="city">
    <option value="">请选择城市</option>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
</select>

分组下拉

html

<select name="city">
    <optgroup label="华北">
        <option value="beijing">北京</option>
        <option value="tianjin">天津</option>
    </optgroup>
    <optgroup label="华东">
        <option value="shanghai">上海</option>
        <option value="hangzhou">杭州</option>
    </optgroup>
</select>

多选下拉

html

<select name="skills" multiple size="4">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
    <option value="vue">Vue.js</option>
</select>

表单分组

使用 <fieldset> 和 <legend> 对表单进行分组：

html

<form>
    <fieldset>
        <legend>个人信息</legend>
        <label>姓名：<input type="text" name="name"></label>
        <label>年龄：<input type="number" name="age"></label>
    </fieldset>
    
    <fieldset>
        <legend>联系方式</legend>
        <label>邮箱：<input type="email" name="email"></label>
        <label>电话：<input type="tel" name="phone"></label>
    </fieldset>
</form>

表单验证

必填字段

html

<input type="text" name="username" required>

长度限制

html

<input type="text" name="username" minlength="3" maxlength="20">

正则验证

html

<input type="text" name="phone" pattern="^1[3-9]\d{9}$" title="请输入正确的手机号">

数值范围

html

<input type="number" name="age" min="18" max="100">

input 常用属性

属性	说明
`name`	字段名称
`value`	默认值
`placeholder`	占位提示
`required`	必填
`disabled`	禁用
`readonly`	只读
`autofocus`	自动聚焦
`maxlength`	最大长度
`minlength`	最小长度
`min`	最小值
`max`	最大值
`step`	步进值
`pattern`	正则验证
`autocomplete`	自动完成

完整示例

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单示例</title>
    <style>
        form {
            max-width: 500px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        fieldset {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        legend {
            font-weight: bold;
            padding: 0 10px;
        }
        label {
            display: block;
            margin-bottom: 10px;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            padding: 10px 20px;
            margin-right: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button[type="submit"] {
            background-color: #4CAF50;
            color: white;
        }
        button[type="reset"] {
            background-color: #f44336;
            color: white;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">用户注册</h1>
    
    <form action="/register" method="post">
        <fieldset>
            <legend>基本信息</legend>
            
            <label>
                用户名：
                <input type="text" name="username" required minlength="3" maxlength="20" placeholder="3-20个字符">
            </label>
            
            <label>
                密码：
                <input type="password" name="password" required minlength="6" placeholder="至少6个字符">
            </label>
            
            <label>
                确认密码：
                <input type="password" name="confirm_password" required>
            </label>
            
            <label>
                邮箱：
                <input type="email" name="email" required placeholder="example@email.com">
            </label>
            
            <label>
                手机号：
                <input type="tel" name="phone" pattern="^1[3-9]\d{9}$" placeholder="请输入手机号">
            </label>
        </fieldset>
        
        <fieldset>
            <legend>个人信息</legend>
            
            <label>
                性别：
                <label style="display: inline;">
                    <input type="radio" name="gender" value="male"> 男
                </label>
                <label style="display: inline;">
                    <input type="radio" name="gender" value="female"> 女
                </label>
            </label>
            
            <label>
                出生日期：
                <input type="date" name="birthday">
            </label>
            
            <label>
                城市：
                <select name="city">
                    <option value="">请选择</option>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="guangzhou">广州</option>
                    <option value="shenzhen">深圳</option>
                </select>
            </label>
            
            <label>
                爱好：
                <label style="display: inline;"><input type="checkbox" name="hobby" value="reading"> 阅读</label>
                <label style="display: inline;"><input type="checkbox" name="hobby" value="music"> 音乐</label>
                <label style="display: inline;"><input type="checkbox" name="hobby" value="sports"> 运动</label>
            </label>
            
            <label>
                头像：
                <input type="file" name="avatar" accept="image/*">
            </label>
        </fieldset>
        
        <fieldset>
            <legend>其他</legend>
            
            <label>
                个人简介：
                <textarea name="bio" rows="4" placeholder="介绍一下自己..."></textarea>
            </label>
            
            <label>
                <input type="checkbox" name="agree" required> 我同意用户协议
            </label>
        </fieldset>
        
        <div style="text-align: center;">
            <button type="submit">注册</button>
            <button type="reset">重置</button>
        </div>
    </form>
</body>
</html>

表单 ​

基本结构 ​

form 属性 ​

input 元素 ​

文本输入 ​

密码输入 ​

邮箱输入 ​

数字输入 ​

电话输入 ​

URL 输入 ​

搜索框 ​

日期时间 ​

颜色选择 ​

范围滑块 ​

文件上传 ​

隐藏字段 ​

单选与复选 ​

单选按钮 ​

复选框 ​

默认选中 ​

按钮 ​

提交按钮 ​

重置按钮 ​

普通按钮 ​

图像按钮 ​

文本域 ​

下拉列表 ​

基本下拉 ​

分组下拉 ​

多选下拉 ​

标签 ​

表单分组 ​

表单验证 ​

必填字段 ​

长度限制 ​

正则验证 ​

数值范围 ​

input 常用属性 ​

完整示例 ​

表单

基本结构

form 属性

input 元素

文本输入

密码输入

邮箱输入

数字输入

电话输入

URL 输入

搜索框

日期时间

颜色选择

范围滑块

文件上传

隐藏字段

单选与复选

单选按钮

复选框

默认选中

按钮

提交按钮

重置按钮

普通按钮

图像按钮

文本域

下拉列表

基本下拉

分组下拉

多选下拉

标签

表单分组

表单验证

必填字段

长度限制

正则验证

数值范围

input 常用属性

完整示例