HTML输入属性 - input属性完全指南

基础属性

name - 字段名称

定义表单提交时使用的参数名称，每个输入字段都应该有唯一的 name 值。

<input type="text" name="username">

重要

没有 name 属性的字段值不会被提交到服务器。

value - 默认值

设置输入字段的初始值。

<input type="text" name="city" value="北京">
<input type="number" name="quantity" value="1">

placeholder - 占位提示

在用户输入前显示提示文字，输入后自动消失。

<input type="email" name="email" placeholder="请输入您的邮箱">
<input type="tel" name="phone" placeholder="例：138-0000-0000">

最佳实践

placeholder 应该提供有用的提示，而不是重复 label 的内容。例如："搜索..." 而不是 "请搜索"。

id - 唯一标识

为元素定义唯一标识符，用于关联 label 和 CSS/JavaScript 操作。

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

验证属性

required - 必填字段

指定该字段必须填写才能提交表单。

<input type="text" name="username" required>
<input type="email" name="email" required>

提示

浏览器会自动验证必填字段，用户提交时会显示错误提示。

minlength 和 maxlength - 字符长度

规定输入字符数的最小和最大长度。

<input type="password" name="password" minlength="8" maxlength="20">

min 和 max - 数值范围

规定 number、range、date 等类型输入的最小值和最大值。

<input type="number" name="age" min="18" max="100">
<input type="date" name="start-date" min="2026-01-01">
<input type="range" name="volume" min="0" max="100">

pattern - 正则表达式

使用正则表达式验证输入格式。

<input type="tel" name="phone" pattern="138-[0-9]{4}-[0-9]{4}" placeholder="138-0000-0000">

正则示例

[a-zA-Z]+ - 只允许字母
[0-9]{6} - 6位数字
^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$ - 邮箱格式

状态属性

readonly - 只读

字段值不可编辑，但可以提交到服务器。

<input type="text" name="user-id" value="12345" readonly>

disabled - 禁用

字段完全禁用，既不能编辑也不会被提交。

<input type="text" name="old-field" value="已弃用" disabled>

特性	readonly	disabled
可编辑	否	否
可提交	是	否
显示效果	正常	灰色
使用场景	展示但不允许修改	临时禁用

autocomplete - 自动完成

控制浏览器是否提供自动完成建议。

<!-- 启用自动完成 -->
<input type="email" name="email" autocomplete="on">

<!-- 关闭自动完成 -->
<input type="password" name="password" autocomplete="new-password">

常用 autocomplete 值

on / off - 开启/关闭自动完成
name - 姓名
email - 邮箱
username - 用户名
current-password - 当前密码
new-password - 新密码
tel - 电话

外观属性

size - 字段大小

定义输入字段的宽度（以字符数计）。

<input type="text" name="code" size="10">
<input type="text" name="name" size="30">

建议

推荐使用 CSS 的 width 属性来控制宽度，更加灵活和一致。

step - 数字间隔

规定数字输入的合法增量值。

<input type="number" name="price" min="0" step="0.01">
<input type="range" name="volume" min="0" max="100" step="5">

multiple - 多选

允许输入或选择多个值（用于 email 和 file 类型）。

<!-- 上传多个文件 -->
<input type="file" name="documents" multiple>

<!-- 输入多个邮箱 -->
<input type="email" name="recipients" multiple>

accept - 文件类型限制

规定 file 类型允许选择的文件类型。

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

<!-- 只允许图片（使用MIME类型） -->
<input type="file" name="photo" accept="image/*">

焦点属性

autofocus - 自动聚焦

页面加载时自动将焦点设置到该字段。

<input type="text" name="search" autofocus>

使用建议

每个页面只使用一个 autofocus，避免影响用户体验。

accesskey - 快捷键

定义激活或聚焦元素的快捷键（配合 Alt 或 Alt+Shift 使用）。

<input type="text" name="search" accesskey="s">

注意

accesskey 可能与其他浏览器快捷键冲突，现代 Web 开发中较少使用。

tabindex - Tab 键顺序

定义使用 Tab 键遍历元素时的顺序。

<input type="text" tabindex="1">
<input type="text" tabindex="3">
<input type="text" tabindex="2">

提示

tabindex="-1" 表示元素可被 JavaScript 聚焦，但不能用 Tab 键访问。

list 属性

关联一个 <datalist> 元素，提供预定义的建议选项。

<input type="text" name="browser" list="browsers">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>

datalist vs select

datalist：用户可以输入任意值，也可以从建议列表中选择
select：用户只能从预定义选项中选择

属性一览表

属性	说明	适用类型
`name`	字段名称	所有
`value`	默认值	所有
`placeholder`	占位提示	text, email, password, tel, url, search
`required`	必填验证	所有（除 hidden）
`readonly`	只读	text, email, password, tel, url, number
`disabled`	禁用	所有
`minlength`	最小字符数	text, email, password, tel, url, search
`maxlength`	最大字符数	text, email, password, tel, url, search
`min`	最小值	number, range, date, time, datetime-local, month, week
`max`	最大值	number, range, date, time, datetime-local, month, week
`pattern`	正则验证	text, email, password, tel, url, search
`autocomplete`	自动完成	所有
`autofocus`	自动聚焦	所有
`multiple`	多选	email, file
`accept`	文件类型	file
`list`	关联datalist	text, email, tel, url, search

HTML 输入属性