很多人觉得HTML表单又老又旧，跟十几年前没什么两样。但说实话，HTML这些年悄悄加了很多好东西，只是我们大多数前端开发还在用老办法写表单，不知道浏览器早就帮我们做好了。

下面这30个原生属性，能帮你省掉不少JavaScript代码。

1. autocomplete（自动填充）

这个属性告诉浏览器输入框里要填什么类型的数据，浏览器就能自动帮用户补全。

<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input type="text" name="cc-number" autocomplete="cc-number">

别让用户一遍遍输邮箱地址了。用上email、tel、street-address、cc-number、bday这些标准词，用户体验会好很多。

支持情况：所有现代浏览器都支持。Chrome 17+，Firefox 4+，Safari 5.1+，Edge 12+。

2. autofocus（自动聚焦）

页面打开后，光标自动跑到这个输入框里。

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

一个页面只能有一个自动聚焦，而且你要确定用户进来最想填的就是这个框。

支持情况：Chrome 5+，Firefox 4+，Safari 5+，Edge 12+，IE 10+。

3. inputmode（输入模式）

在手机上，这个属性可以调出最适合的虚拟键盘。

<input type="text" inputmode="numeric">
<input type="text" inputmode="decimal">
<input type="text" inputmode="email">
<input type="text" inputmode="url">

就算你用了type="text"，inputmode也能让手机弹出正确的键盘。输验证码用numeric，填金额用decimal。

支持情况：Chrome 66+，Firefox 95+，Safari 12.1+，Edge 79+，iOS Safari 12.2+。

4. pattern（正则校验）

用正则表达式来验证输入内容。

<input type="text" pattern="[0-9]{4}" placeholder="PIN (4 digits)">
<input type="text" pattern="[A-Za-z]{3,}" placeholder="At least 3 letters">

用户填错了，浏览器会拦下来并报错。配合title一起用效果更好。

支持情况：Chrome 10+，Firefox 4+，Safari 10.1+，Edge 12+，IE 10+。

5. title（配合pattern使用）

和pattern一起用的时候，title可以定制报错信息。

<input type="text" 
       pattern="[0-9]{4}" 
       title="只能输入正好4个数字">

浏览器自带的报错信息太生硬了，用title写一句人话吧。

支持情况：所有浏览器都支持。

6. minlength和maxlength（字符长度限制）

限制输入内容的最少和最多字符数。

<input type="text" minlength="3" maxlength="20">
<textarea minlength="10" maxlength="500"></textarea>

用户输入太短或太长，浏览器会直接拦下来。

支持情况：maxlength所有浏览器都支持。minlength需要Chrome 40+，Firefox 51+，Safari 10.1+，Edge 17+，IE不支持。

7. min和max（数值或日期边界）

给数字和日期输入框设定范围。

<input type="number" min="1" max="100">
<input type="date" min="2025-01-01" max="2025-12-31">
<input type="time" min="09:00" max="17:00">

超出范围的值根本提交不上去，一行JavaScript都不用写。

支持情况：Chrome 10+，Firefox 16+，Safari 5+，Edge 12+，IE 10+。

8. step（步长控制）

控制数字、日期和时间的增减幅度。

<input type="number" step="0.01" placeholder="Price">
<input type="time" step="900">
<input type="range" min="0" max="100" step="5">

金额用step="0.01"，接受任意小数就用step="any"。

支持情况：Chrome 6+，Firefox 16+，Safari 5+，Edge 12+，IE 10+。

9. multiple（多重选择）

允许一次选多个文件，或者一次填多个邮箱。

<input type="file" multiple>
<input type="email" multiple placeholder="用逗号把邮箱隔开">

选文件不用一个一个点了。邮箱的话，浏览器会检查每个地址的格式。

支持情况：Chrome 6+，Firefox 3.6+，Safari 4+，Edge 12+，IE 10+。

10. accept（文件类型限制）

限制用户能上传哪些格式的文件。

<input type="file" accept="image/*">
<input type="file" accept=".pdf,.doc,.docx">
<input type="file" accept="image/png,image/jpeg">

想要图片写image/，想要视频写video/，或者精确到MIME类型和后缀名。

支持情况：Chrome 16+，Firefox 9+，Safari 6+，Edge 12+，IE 10+。

11. formnovalidate（跳过验证）

让某个按钮跳过整个表单的校验。

<button type="submit">正经提交</button>
<button type="submit" formnovalidate>存个草稿</button>

正常提交按规矩来，存草稿的话不管填成什么样都能提交。

支持情况：Chrome 10+，Firefox 4+，Safari 10.1+，Edge 12+，IE 10+。

12. formaction（不同提交路径）

不同按钮可以把数据提交到不同地址。

<form action="/save">
  <button type="submit">保存</button>
  <button type="submit" formaction="/preview">预览</button>
</form>

不需要JavaScript，纯HTML就能实现多路提交。

支持情况：Chrome 10+，Firefox 4+，Safari 5.1+，Edge 12+，IE 10+。

13. formmethod（修改请求方法）

为特定按钮改写表单的提交方式。

<form method="get" action="/search">
  <button type="submit">搜索</button>
  <button type="submit" formmethod="post">保存此搜索</button>
</form>

同一个表单里，有人走GET，有人走POST，互不影响。

支持情况：Chrome 10+，Firefox 4+，Safari 5.1+，Edge 12+，IE 10+。

14. formenctype（编码类型）

特定按钮按下时，改变表单的数据编码规则。

<form>
  <input type="text" name="title">
  <button type="submit">只传文字</button>
  <button type="submit" formenctype="multipart/form-data">带上文件一起飞</button>
</form>

只有在需要传文件的时候，才用multipart/form-data。

支持情况：Chrome 10+，Firefox 4+，Safari 5.1+，Edge 12+，IE 10+。

15. formtarget（结果展示位置）

决定提交后的页面在哪里打开。

<form action="/submit">
  <button type="submit">当前页提交</button>
  <button type="submit" formtarget="_blank">新窗口打开</button>
</form>

可选值有_self、_blank、_parent等。做预览功能时很好用，不会弄丢用户填了一半的内容。

支持情况：Chrome 10+，Firefox 4+，Safari 5.1+，Edge 12+，IE 10+。

16. readonly（只读）

输入框只能看不能改，但值会提交上去。这和disabled不一样。

<input type="text" value="订单号：12345" readonly>

想让某个值参与提交但用户不能改，就用readonly。如果连提交都不让，用disabled。

支持情况：所有浏览器都支持。

17. placeholder（占位提示）

输入框里的灰色提示文字。

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

注意：不要拿它代替label标签。用户一开始输入，这些文字就消失了。label还是要好好写。

支持情况：Chrome 10+，Firefox 4+，Safari 5+，Edge 12+，IE 10+。

18. list和datalist（自定义选项池）

做一个下拉提示列表。用户可以直接选，也可以自己填。

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

这就像自己做的自动补全，既给了选择自由，又有引导。

支持情况：Chrome 20+，Firefox 4+，Safari 12.1+，Edge 12+，IE不支持。

19. spellcheck（拼写检查）

控制浏览器要不要显示拼写错误的红波浪线。

<textarea spellcheck="true"></textarea>
<input type="text" name="code" spellcheck="false">

写代码的框、填用户名的框，关掉它。写文章的文本框，留着它。

支持情况：Chrome 10+，Firefox 2+，Safari 3.1+，Edge 12+，IE 10+。

20. enterkeyhint（回车键样式）

改变手机键盘上回车键的文字和样式。

<input type="search" enterkeyhint="search">
<input type="text" enterkeyhint="next">
<textarea enterkeyhint="send"></textarea>

可以改成搜索、下一步、发送等。细节虽小，但很影响体验。

支持情况：Chrome 77+，Firefox 94+，Safari 13.1+，Edge 79+，iOS Safari 13.4+。

21. dirname（文字方向）

自动把用户输入的文本方向（从左到右还是从右到左）提交上去。

<input type="text" name="comment" dirname="comment.dir">

提交时不仅会发comment的内容，还会发comment.dir，告诉你用户写的是ltr还是rtl。做国际化项目时很有用。

支持情况：Chrome 17+，Safari 6+，Edge 79+，Firefox和IE不支持。

22. form（跨表单关联）

输入框不在form标签里面，也能通过form属性绑定到指定的表单。

<form id="myForm" action="/submit">
  <input type="text" name="username">
</form>
<input type="email" name="email" form="myForm">
<button type="submit" form="myForm">提交</button>

页面布局复杂的时候，用form属性就能把输入框和表单绑在一起。

支持情况：Chrome 10+，Firefox 4+，Safari 5.1+，Edge 12+，IE 11+。

23. capture（调用摄像头）

在手机上，直接打开摄像头，不让用户选文件。

<input type="file" accept="image/*" capture="environment">
<input type="file" accept="video/*" capture="user">

user是前置摄像头，environment是后置摄像头。做拍照上传的功能很合适。

支持情况：Chrome 53+（安卓），Safari 11+（iOS）。桌面浏览器不支持。

24. novalidate（关闭校验）

直接关掉整个表单的HTML5校验。

<form novalidate>
  <input type="email" required>
  <button type="submit">直接提交</button>
</form>

如果你要用JavaScript完全接管验证逻辑，记得加上这个属性，免得原生校验跑出来捣乱。

支持情况：Chrome 10+，Firefox 4+，Safari 10.1+，Edge 12+，IE 10+。

25. autocapitalize（自动大写）

控制手机键盘上英文字母的大写规则。

<input type="text" autocapitalize="words">
<input type="text" autocapitalize="sentences">
<input type="email" autocapitalize="none">

填邮箱和账号用none，输人名用words（首字母大写），普通聊天用sentences。

支持情况：Safari 5+（iOS），Chrome 43+，Edge 79+，Firefox不支持。

26. size（宽度）

控制输入框在页面上显示多宽，按字符数算。

<input type="text" size="30">
<input type="text" size="5" placeholder="验证码">

它只影响显示宽度，不限制输入长度。要限制长度用maxlength。

支持情况：所有浏览器都支持。

27. cols和rows（文本域大小）

设定textarea的初始宽度和高度。

<textarea cols="50" rows="10"></textarea>

cols是宽度，rows是高度。如果CSS没限制死，用户还是可以拖动改变大小的。

支持情况：所有浏览器都支持。

28. wrap（换行方式）

控制textarea提交时换行怎么处理。

<textarea wrap="soft"></textarea>
<textarea wrap="hard" cols="40"></textarea>

soft：看着换行了，提交时还是一整段。hard：在cols宽度处硬性插入换行符。大部分情况用soft就够了。

支持情况：所有浏览器都支持。

29. disabled（禁用）

让一个元素完全失效。不能点，不能改，提交时也不带它。

<input type="text" disabled>
<button type="submit" disabled>不能点的按钮</button>

和readonly不一样。禁用的元素通常显示成灰色。暂时不想让用户操作的字段就用它。

支持情况：所有浏览器都支持。

30. required（必填）

不填就不让提交。

<input type="text" required>
<input type="email" required>
<select required>
  <option value="">请先选择一个</option>
  <option value="1">选项1</option>
</select>

用户要是空着提交，浏览器会直接拦下来。

支持情况：Chrome 10+，Firefox 4+，Safari 10.1+，Edge 12+，IE 10+。

写在最后

这30个属性不是什么新东西，浏览器已经支持很久了。它们能解决很多表单开发中的常见问题，省掉你写验证、状态管理这些重复代码的时间。

下次做表单的时候，先看看HTML自己能做什么，再决定要不要写JavaScript。很多时候，浏览器早就帮你想好了。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/13600