HTML输入类型 - input type完全指南

文本类输入

text - 单行文本

默认的输入类型，用于输入单行文本。

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

password - 密码

密码字段，输入的字符会被隐藏显示。

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

注意

密码字段只是隐藏了显示内容，数据在传输过程中仍然以明文形式发送，请务必使用HTTPS加密传输。

email - 邮箱

用于输入邮箱地址，浏览器会自动验证邮箱格式。

<input type="email" name="email" placeholder="example@mail.com">

tel - 电话号码

用于输入电话号码，在移动设备上会显示数字键盘。

<input type="tel" name="phone" placeholder="138-0000-0000">

url - 网址

用于输入网址，浏览器会验证URL格式。

<input type="url" name="website" placeholder="https://example.com">

search - 搜索框

用于创建搜索字段，外观与普通文本框类似。

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

数字类输入

number - 数字

用于输入数字，可以设置允许的数字范围。

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

number 属性

min - 允许的最小值
max - 允许的最大值
step - 合法的数字间隔

range - 滑块

创建一个滑块控件，用于选择指定范围内的数值。

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

日期时间类输入

date - 日期

选择日期（年、月、日）。

<input type="date" name="birthday">

time - 时间

选择时间（小时、分钟）。

<input type="time" name="meeting-time">

datetime-local - 本地日期时间

选择本地日期和时间（不带时区）。

<input type="datetime-local" name="appointment">

week - 周

选择周和年份。

<input type="week" name="week-year">

month - 月份

选择月份和年份。

<input type="month" name="birth-month">

选择类输入

checkbox - 复选框

允许选择多个选项的复选框。

<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动
<input type="checkbox" name="hobby" value="music"> 音乐

radio - 单选按钮

只能选择其中一个选项，需要相同 name 值来实现互斥。

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
<input type="radio" name="gender" value="other"> 其他

提示

具有相同 name 属性的 radio 按钮会自动实现互斥，选择其中一个会自动取消其他选项。

color - 颜色选择器

提供一个颜色选择器，允许用户选择颜色值。

<input type="color" name="favcolor" value="#3498db">

文件类输入

file - 文件上传

允许用户选择文件上传。

<!-- 允许所有文件类型 -->
<input type="file" name="document">

<!-- 只允许图片 -->
<input type="file" name="avatar" accept="image/*">

<!-- 只允许PDF和Word文档 -->
<input type="file" name="document" accept=".pdf,.doc,.docx">

accept 属性

image/* - 所有图片格式
video/* - 所有视频格式
audio/* - 所有音频格式
.pdf,.doc - 指定文件扩展名
application/pdf - MIME类型

hidden - 隐藏字段

不显示在页面上的隐藏字段，用于存储需要提交但不显示给用户的数据。

<input type="hidden" name="user_id" value="12345">

安全注意

隐藏字段的值虽然不显示，但用户可以通过查看页面源代码看到。请不要使用隐藏字段存储敏感信息（如密码、价格等）。

按钮类输入

submit - 提交按钮

点击后提交整个表单。

<input type="submit" value="提交表单">

reset - 重置按钮

点击后重置表单到初始状态。

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

button - 普通按钮

不执行任何默认行为的按钮，需要JavaScript来定义功能。

<input type="button" value="点击我" onclick="alert('Hello!')">

image - 图片按钮

使用图片作为提交按钮。

<input type="image" src="submit-btn.png" alt="提交" width="100">

输入类型一览表

类型	说明	典型用途
`text`	单行文本	姓名、地址
`password`	密码（隐藏）	登录密码
`email`	邮箱地址	用户邮箱
`tel`	电话号码	手机号
`url`	网址	个人网站
`number`	数字	年龄、数量
`range`	滑块	音量、亮度
`date`	日期	生日、预约
`time`	时间	会议时间
`checkbox`	复选框	多选爱好
`radio`	单选按钮	性别、状态
`file`	文件上传	头像、文档
`color`	颜色选择	主题色
`hidden`	隐藏字段	追踪ID

HTML 输入类型