<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>表单综合示例</title>
</head>
<body>
<!--
<form></form>：定义供用户输入的HTML表单，用于收集并提交数据
action：表单数据提交的目标URL
method：提交方式（get/post）
-->
<form action="/submit-form" method="post">
<!--
<fieldset></fieldset>：对表单中的相关元素进行分组，提升结构可读性
<legend></legend>：定义<fieldset>元素的标题，说明分组内容
-->
<fieldset>
<legend>用户注册信息</legend>
<!--
<label></label>：定义<input>元素的标注，提升可访问性
for：与对应<input>的id属性关联，点击标签可聚焦输入框
-->
<label for="username">用户名：</label>
<!--
<input/>：HTML表单核心输入控件（自闭合标签）
核心属性说明：
1. type（核心）：输入类型（HTML5全量有效值，按功能分类）
▶ 基础文本类（最常用）：
- text：单行文本输入框（默认值，无格式限制）
- password：密码输入框（输入内容以圆点/星号隐藏）
- email：邮箱输入框（自带邮箱格式校验，移动端唤起邮箱键盘）
- search：搜索框（部分浏览器显示清除按钮，样式优化）
- tel：电话号码输入框（移动端唤起数字键盘，无格式校验）
- url：网址输入框（自带URL格式校验，要求含http/https）
▶ 数字/数值类：
- number：纯数字输入框（自带增减按钮，可配合min/max/step限制范围）
- range：滑块控件（用于模糊数值选择，需JS获取实时值）
▶ 日期/时间类（浏览器原生选择器）：
- date：日期选择器（年-月-日，本地化显示）
- time：时间选择器（时:分，24小时制）
- datetime-local：本地日期时间选择器（年-月-日 时:分，无时区）
- month：月份选择器（年-月，用于按月份筛选）
- week：周选择器（年-第X周，用于按周筛选）
▶ 选择类：
- checkbox：复选框（多选项，同name为一组，可多选）
- radio：单选框（互斥选项，同name为一组，仅能选一个）
▶ 文件/媒体类：
- file：文件上传控件（accept限制文件类型，multiple允许多选）
▶ 按钮类：
- button：普通按钮（无默认行为，需绑定onclick等JS事件）
- submit：表单提交按钮（点击自动提交form表单数据）
- reset：表单重置按钮（点击清空当前表单所有输入值）
- image：图像提交按钮（用图片替代提交按钮，点击提交表单并返回坐标）
▶ 特殊类型：
- hidden：隐藏域（不显示在页面，用于存储后台需要的参数）
- color：颜色选择器（原生取色器，返回十六进制颜色值）
2. id：唯一标识（必填，用于<label>关联/JS获取元素）
3. name：提交字段名（必填，无name则数据无法提交到后台）
4. placeholder：输入提示文本（浅灰色，输入内容后消失）
5. required：必填校验（布尔属性，表单提交前校验，为空则提示）
6. maxlength：允许的最大字符数
7. accesskey：使元素获得焦点的快捷键
8. autocomplete：控制是否提示历史选项
补充：可配合min/max（数值/日期范围）、step（步长）、disabled（禁用）等属性
-->
<!-- 1. 基础文本类示例 -->
<input type="text" id="username" name="username" placeholder="请输入用户名" required />
<br /><br />
<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="请输入密码" required />
<br /><br />
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱" required />
<br /><br />
<label for="search">search（搜索框）：</label>
<input type="search" id="search" name="search" placeholder="请输入搜索内容" />
<br /><br />
<label for="tel">tel（电话号码）：</label>
<input type="tel" id="tel" name="tel" placeholder="请输入手机号" />
<br /><br />
<label for="url">url（网址）：</label>
<input type="url" id="url" name="url" placeholder="请输入网址（如https://）" />
<br /><br />
<!-- 2. 数字/数值类示例 -->
<label for="num1">number（数字1）：</label>
<input type="number" id="num1" name="num1" value="5" min="0" max="100" step="1" oninput="calculateSum()" />
<label for="num2">number（数字2）：</label>
<input type="number" id="num2" name="num2" value="3" min="0" max="100" step="1" oninput="calculateSum()" />
<label>两数之和：</label>
<output name="sum" for="num1 num2">8</output>
<br /><br />
<label for="range">range（滑块，当前值：）</label>
<input type="range" id="range" name="range" min="0" max="100" step="5" value="50" />
<span id="rangeValue">50</span>
<br /><br />
<!-- 3. 日期/时间类示例 -->
<label for="date">date（日期选择）：</label>
<input type="date" id="date" name="date" />
<br /><br />
<label for="time">time（时间选择）：</label>
<input type="time" id="time" name="time" />
<br /><br />
<label for="datetime-local">datetime-local（本地日期时间）：</label>
<input type="datetime-local" id="datetime-local" name="datetime-local" />
<br /><br />
<label for="month">month（月份选择）：</label>
<input type="month" id="month" name="month" />
<br /><br />
<label for="week">week（周选择）：</label>
<input type="week" id="week" name="week" />
<br /><br />
<!-- 4. 选择类示例 -->
<label>checkbox（复选框-兴趣爱好）：</label>
<input type="checkbox" id="hobby1" name="hobby" value="coding" />
<label for="hobby1">编程</label>
<input type="checkbox" id="hobby2" name="hobby" value="reading" />
<label for="hobby2">阅读</label>
<br /><br />
<label>radio（单选框-性别）：</label>
<input type="radio" id="gender1" name="gender" value="male" checked />
<label for="gender1">男</label>
<input type="radio" id="gender2" name="gender" value="female" />
<label for="gender2">女</label>
<br /><br />
<!-- 5. 文件/媒体类示例 -->
<label for="file">file（文件上传，仅图片）：</label>
<input type="file" id="file" name="file" accept="image/png,image/jpg" multiple />
<br /><br />
<!-- 6. 按钮/特殊类示例 -->
<input type="button" value="button（普通按钮）" onclick="alert('点击了普通按钮')" />
<input type="submit" value="submit（提交按钮）" />
<input type="reset" value="reset（重置按钮）" />
<label>image（图像提交按钮）：</label>
<input type="image" src="https://img.icons8.com/fluency/48/000000/send.png" alt="提交按钮" width="40"
height="40" />
<input type="hidden" id="hidden" name="user_id" value="10086" />
<label for="color">color（颜色选择）：</label>
<input type="color" id="color" name="theme_color" value="#ff0000" />
<br /><br />
<!--
<textarea></textarea>：定义多行的文本输入控件
rows：显示的行数
cols：显示的列数
placeholder：输入提示文本
-->
<label for="intro">个人简介：</label><br />
<textarea id="intro" name="intro" rows="4" cols="50" placeholder="请介绍一下自己"></textarea>
<br /><br />
<!--
<select></select>：定义下拉列表
<optgroup></optgroup>：定义下拉列表中相关选项的分组
<option></option>：定义下拉列表中的选项
value：提交时的选项值
selected：设置为默认选中项
-->
<label for="city">所在城市：</label>
<select id="city" name="city">
<optgroup label="一线城市">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</optgroup>
<optgroup label="新一线城市">
<option value="hangzhou" selected>杭州</option>
<option value="chengdu">成都</option>
</optgroup>
</select>
<br /><br />
<!--
<datalist></datalist>：规定输入控件的预定义选项列表
配合<input/>的list属性使用，输入时会显示匹配的选项提示
-->
<label for="hobby_text">兴趣爱好（带提示）：</label>
<input type="text" id="hobby_text" name="hobby_text" list="hobby-options" placeholder="输入后可选择提示项" />
<datalist id="hobby-options">
<option value="编程"></option>
<option value="阅读"></option>
<option value="运动"></option>
<option value="音乐"></option>
</datalist>
<br /><br />
<!--
<button></button>：定义可点击的按钮（双标签，支持嵌套内容）
type：按钮类型
- submit：提交表单（默认）
- reset：重置表单
- button：普通按钮，需绑定JS事件
-->
<button type="submit">提交注册</button>
<button type="reset">重置表单</button>
<button type="button" disabled>禁用按钮</button>
</fieldset>
</form>
<script>
// 计算两数之和并更新<output>
function calculateSum() {
const num1 = parseFloat(document.getElementById('num1').value) || 0;
const num2 = parseFloat(document.getElementById('num2').value) || 0;
document.querySelector('output[name="sum"]').textContent = num1 + num2;
}
// 实时显示range滑块值
const range = document.getElementById('range');
if (range) {
const rangeValue = document.getElementById('rangeValue');
range.oninput = function () {
rangeValue.textContent = this.value;
};
}
</script>
</body>
</html>
