HTML 输入类型详解
学习 text/password/email/number/date/file 等所有input类型 · 难度:进阶 · +15XP
HTML 输入类型
<input>标签通过type属性支持20多种输入类型,浏览器会自动提供对应的UI和验证。
常用类型速查
| type值 | 用途 | 浏览器效果 |
|---|---|---|
text | 单行文本 | 普通输入框 |
password | 密码 | 输入内容被隐藏为••• |
email | 邮箱 | 自动验证@符号,手机上弹出邮箱键盘 |
number | 数字 | 带增减箭头,可设min/max |
date | 日期 | 弹出日期选择器 |
color | 颜色 | 弹出取色器 |
file | 文件 | 选择文件按钮 |
checkbox | 多选 | 勾选框 |
radio | 单选 | 单选按钮(同name分组) |
range | 范围 | 滑块 |
search | 搜索 | 带清除按钮的输入框 |
tel | 电话 | 手机上弹出数字键盘 |
???? 练习
- 创建包含text/email/password/date/number的注册表单
- 创建包含radio/checkbox/range/color的问卷