HTML5的新属性

pattern:用于指定输入字段的正则表达式模式。在提交表单前,输入将验证是否符合指定的模式。

  pattern 属性是 HTML5 中用于表单验证的一个属性,它用于指定一个正则表达式,以验证输入字段中的值是否符合特定的模式。该属性通常与 元素一起使用,并适用于 textpasswordemailsearchtel 等类型的输入字段。

含义和用法:
  1. 验证输入格式

    • pattern 属性的值应该是一个有效的正则表达式。浏览器会使用这个正则表达式来验证用户在输入字段中输入的值是否符合预期的模式。
    • 例如,pattern="[0-9]{3}" 可以用于要求用户输入一个三位数字的值。
  2. 使用示例

    • 在 HTML 中,可以这样使用 pattern 属性:
       

      在这个例子中,pattern="[A-Za-z]{3,}" 指定了用户名必须是至少3个字母的字母串。如果用户输入的值不符合这个模式,浏览器会显示默认的验证错误信息,或者根据 title 属性中提供的内容显示自定义的错误信息。

  3. 验证失败时的行为

    • 如果用户输入的值不匹配 pattern 属性指定的正则表达式,浏览器会阻止表单的提交,并在输入字段旁边显示一个默认的错误提示,告诉用户输入的内容不符合要求。
    • 可以通过 CSS 或 JavaScript 自定义这些错误提示的样式和行为。
  4. 提高用户体验

    • 使用 pattern 属性可以帮助提高用户体验,避免用户输入无效或格式不正确的数据,尤其是在需要特定格式的数据(如日期、电话号码、邮件地址等)时特别有用。
  5. 注意事项

    • 虽然 pattern 属性可以在客户端验证用户输入的格式,但不应该完全依赖客户端验证,因为用户可以禁用 JavaScript 或修改 HTML。在处理敏感数据或需要强制验证的情况下,应该在服务器端再次验证。

autofocus:指定页面加载时输入字段是否自动获得焦点,即自动聚焦。

  autofocus 是 HTML5 中的一个布尔属性,用于指定页面加载后自动将焦点(即光标)放在指定的输入字段上,使用户可以立即开始在该字段中输入内容。它可以应用于