HTML5 教程 / 表单属性

HTML5 表单属性

HTML5 为表单元素新增了大量属性，这些属性显著提升了表单的用户体验和数据验证能力。

输入框属性

HTML5 为 <input> 元素添加了多个实用属性：

placeholder 属性

提供输入提示，当输入框为空时显示，帮助用户了解应该输入什么内容。

placeholder 示例 
<input type="text" 
       placeholder="请输入用户名">

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

required 属性

指定该输入框为必填项，提交表单时浏览器会自动验证。

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

autofocus 属性

页面加载时自动聚焦到该输入框，提升用户体验。

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

autocomplete 属性

控制浏览器的自动完成功能，可设置为 on/off 或指定自动完成的类型。

autocomplete 示例 
<!-- 开启自动完成 -->
<input type="text" name="name" autocomplete="name">

<!-- 关闭自动完成 -->
<input type="text" name="code" autocomplete="off">

<!-- 常用值：name, email, tel, address, credit-card -->

pattern 属性

使用正则表达式验证输入内容，提供强大的自定义验证能力。

pattern 示例 
<!-- 邮政编码 -->
<input type="text" 
       pattern="[0-9]{5,6}"
       title="请输入5-6位数字">

<!-- 手机号码 -->
<input type="tel" 
       pattern="1[3-9][0-9]{9}"
       title="请输入正确的手机号码">

min/max 属性

设置数值类型输入框的最小值和最大值。

min/max 示例 
<!-- 数字范围 -->
<input type="number" min="0" max="100">

<!-- 日期范围 -->
<input type="date" min="2026-01-01" max="2026-12-31">

step 属性

设置数值输入框的步长（递增/递减的增量）。

step 示例 
<!-- 步长为1 -->
<input type="number" min="0" max="100" step="1">

<!-- 步长为0.1 -->
<input type="number" step="0.1">

<!-- 任意数量 -->
<input type="date" step="7">

表单外部元素属性

HTML5 允许将表单控件放置在 <form> 标签外部，通过 form属性关联到表单。

form 属性示例 
<!-- 表单 -->
<form id="myForm" action="/submit"></form>

<!-- 外部的输入框 -->
<input type="text" name="username" form="myForm">
<button type="submit" form="myForm">提交</button>

表单属性覆盖

按钮和输入元素可以使用以下属性覆盖所属表单的对应设置：

  • formaction - 覆盖表单的 action 属性
  • formenctype - 覆盖表单的 enctype 属性
  • formmethod - 覆盖表单的 method 属性
  • formtarget - 覆盖表单的 target 属性
  • formnovalidate - 禁用表单验证
属性覆盖示例 
<form action="/submit" method="post">
    <input type="text" name="name">
    
    <!-- 保存到另一个地址 -->
    <button type="submit" formaction="/save">保存</button>
    
    <!-- 提交但不验证 -->
    <button type="submit" formnovalidate>跳过验证</button>
</form>

完整示例

下面是综合运用这些属性的表单示例：

💻 在线代码编辑器
👁️ 预览效果

注意事项

开发提示
  • 虽然浏览器内置验证很方便，但不应完全依赖客户端验证，服务器端验证同样重要
  • 使用 pattern 时建议同时设置 title 属性，提供清晰的错误提示
  • autocomplete 对登录表单和搜索框特别有用
  • 每个页面最好只有一个 autofocus 元素，避免用户体验问题