表单和按钮
02-html2026/11/14
表单是 HTML 中用于收集用户输入的重要元素。
基本表单结构
<form action="/submit" method="POST">
<!-- 表单控件 -->
<input type="text" name="username">
<button type="submit">提交</button>
</form>
核心表单元素
1. <form> - 表单容器
定义表单及其提交行为。
<form action="/api/submit" method="POST" enctype="application/x-www-form-urlencoded" target="_blank" novalidate>
<!-- 表单内容 -->
</form>
主要属性：
- action - 提交地址
- method - 提交方法 (GET/POST)
- enctype - 编码类型
- target - 响应打开位置
- novalidate - 禁用浏览器验证
2. <input> - 输入控件
最常用的表单元素，通过 type 属性定义不同类型。
<!-- 文本输入 -->
<input type="text" name="username" placeholder="请输入用户名">
<!-- 密码输入 -->
<input type="password" name="password" placeholder="请输入密码">
<!-- 邮箱输入 -->
<input type="email" name="email" required>
<!-- 数字输入 -->
<input type="number" name="age" min="0" max="120" step="1">
<!-- 日期选择 -->
<input type="date" name="birthday">
<input type="time" name="time">
<input type="week" name="week">
<input type="month" name="month">
<input type="datetime-local" name="datetime-local"><!-- 本地时间 -->
<!-- 文件上传 -->
<input type="file" name="avatar" accept="image/*">
<!-- 隐藏字段 -->
<input type="hidden" name="user_id" value="123">
<!-- 单选按钮 -->
<label>性别:</label>
<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>
<!-- 复选框 -->
<input type="checkbox" id="book" name="book" checked>
<label for="book">书</label>
<input type="checkbox" id="pen" name="pen" checked>
<label for="pen">笔</label>
<!-- URL 输入 -->
<input type="email" id="email" name="email" multiple><!-- multiple 属性允许输入多个邮箱，用逗号分隔 -->
<!-- 电话号码 -->
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}">
<!-- 数字输入 -->
<input type="number" id="quantity" name="quantity" min="1" max="100" step="1" value="1">
<input type="number" id="price" name="price" min="0" max="1000" step="0.01">
<!-- 范围选择 -->
<label for="volume">音量：</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5" value="50">
<span id="volume-value">50</span>
<script>
document.getElementById('volume').addEventListener('input', function() {
document.getElementById('volume-value').textContent = this.value;
});
</script>
<!-- 颜色选择 -->
<input type="color" id="color-picker" name="color" value="#ff0000">
<!-- 搜索框 -->
<input type="search" id="search" name="search" results="5">
3. <label> - 标签
为表单控件提供标签，提高可访问性。
<!-- 隐式关联 -->
<label>
用户名：
<input type="text" name="username">
</label>
<!-- 显式关联 -->
<label for="email">邮箱地址：</label>
<input type="email" id="email" name="email">