HTML5 表单属性

HTML5 引入了许多新的表单属性，使得表单的验证和用户交互更加方便和灵活。在本章节中，我们将介绍一些常用的 HTML5 表单属性，并且通过示例代码演示它们的用法。

required 属性

required 属性用于指定表单中的某个字段为必填项，如果用户未填写该字段，提交表单时将会收到相应的提示信息。下面是一个示例：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>
  
  <input type="submit" value="提交">
</form>

在上面的示例中，用户必须填写用户名字段才能提交表单，否则会收到浏览器默认的提示信息。

pattern 属性

pattern 属性用于指定表单字段的输入格式，只有符合指定格式的内容才会被接受。下面是一个示例：

<form>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>
  
  <input type="submit" value="提交">
</form>

在上面的示例中，用户输入的邮箱必须符合正则表达式 [a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$ 才会被接受。

autocomplete 属性

autocomplete 属性用于指定表单字段是否启用自动填充功能。下面是一个示例：

// www.javascriptcn.com code example
<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" autocomplete="on">
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" autocomplete="off">
  
  <input type="submit" value="提交">
</form>

在上面的示例中，用户名字段启用了自动填充功能，而密码字段禁用了自动填充功能。

以上就是 HTML5 表单属性的一些常用示例，通过合理使用这些属性，可以使得表单的交互更加友好和便捷。