HTML5 表单属性学习笔记

HTML5 提供了许多新的表单属性，这些属性可以让表单更加易用和直观。本篇学习笔记将对其中的一些属性进行介绍，并给出相应的实例。

1. autofocus 属性

autofocus 属性用于自动聚焦在页面加载时应该具有输入焦点的元素上。这样用户就不需要手动点击该元素来输入内容了。

示例代码：

htmlCopy Code
<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" autofocus><br><br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="提交">
</form>

2. required 属性

required 属性用于指定表单元素是否是必填项。如果该属性被设置为 true，那么在提交表单时，如果该元素没有填写内容，浏览器会提示用户必须填写该项。

示例代码：

htmlCopy Code
<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required><br><br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" required><br><br>
  <input type="submit" value="提交">
</form>

3. placeholder 属性

placeholder 属性用于在用户没有输入内容时，在表单元素中显示提示文本。该属性可以提醒用户应该输入什么内容。

示例代码：

htmlCopy Code
<form>
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" placeholder="请输入您的邮箱"><br><br>
  <label for="phone">电话:</label>
  <input type="tel" id="phone" name="phone" placeholder="请输入您的电话号码"><br><br>
  <input type="submit" value="提交">
</form>

4. pattern 属性

pattern 属性用于指定一个正则表达式，该表达式描述了表单元素应该接受的输入格式。如果用户输入的内容不符合该格式，浏览器会提示用户输入格式不正确。

示例代码：

htmlCopy Code
<form>
  <label for="zip">邮编:</label>
  <input type="text" id="zip" name="zip" pattern="[0-9]{6}" placeholder="请输入6位数字邮编"><br><br>
  <label for="birthday">生日:</label>
  <input type="text" id="birthday" name="birthday" pattern="\d{4}-\d{2}-\d{2}" placeholder="如：1999-01-01"><br><br>
  <input type="submit" value="提交">
</form>

以上就是 HTML5 表单属性的一些介绍和实例。这些属性可以使得表单更加易用和直观，增强用户体验。