Web前端技术 · 第4课5 / 21 ｜ 编码：L04-08
使用HTML创建表单

选择类型，看数据含义而不只看字符

同样由数字组成，“数量”和“编号”不应机械使用同一种控件。

报名字段 建议写法 能做什么／不能做什么
通知邮箱 type="email" 基础邮箱格式检查；不能证明地址存在或属于本人。
参加人数 type="number" min="1" max="3" step="1" 数值范围与步长；不是身份编号。
预约编号（如0012） type="text" inputmode="numeric" 保留编号文本；inputmode提示键盘，不负责校验。
联系方式（若确有必要） type="tel" 电话输入语义及可能的键盘优化；不会自动验证手机号格式。
日期 type="date" 日期输入；界面随设备、浏览器变化。 
<label for="count">参加人数（1—3人）</label>
<input id="count" name="count" type="number"
       min="1" max="3" step="1" value="1">

参加人数是可计数的数值，使用 type="number"，配合 min、max、step 限定范围和步长。预约编号即使全是数字，也应按文本保存，以保留开头的 0；手机号使用 type="tel"，而不是 number。

常用 input 类型速查

按数据含义和操作目的选择 type
type 值适用场景注意事项
text单行文字、学号、预约编号编号不是数量；缺少 type 时默认使用 text。
password密码输入只遮挡屏幕上的字符，不代表数据已加密。
email通知邮箱检查基础格式，不能证明邮箱存在或属于本人。
tel联系电话可能优化手机键盘，不会自动检查手机号格式。
url个人网站、作品网址检查 URL 格式，不检查网站是否可访问。
search搜索关键词用于搜索输入，搜索逻辑仍需另行实现。
number人数、件数等数值用 min、max、step 设置范围和步长；不适合手机号或学号。
range音量、亮度等滑块调节适合范围内调节，精确输入通常选 number。
date / time日期／时刻选择界面因浏览器和设备而异。
datetime-local预约日期与时刻值不包含时区信息，不能直接当作全球统一时间。
radio多个选项中选一个同组设置相同 name；各选项用不同 value 表示。
checkbox多选、是否同意未选中的复选框不会提交该项数据。
file选择本地文件选择不等于上传；原生表单上传通常使用 POST 和 multipart/form-data。
color选择主题颜色提供颜色选择控件，界面因浏览器而异。
hidden随表单提交不展示的字段用户仍可修改，不能保存秘密或作为可信凭据。
submit / button / reset提交／普通按钮／恢复初始值button 不自带提交行为；reset 不是一律清空。也可使用 button 元素。

input 是空元素，不写结束标签；多行文本使用 textarea，不是另一种 input type。类型和浏览器校验不能替代服务器验证；要求必填时还需 required。