CSS进阶知识:HTML5的新特性HTML5新增的input类型，HTML新增的表单属性

HTML5 引入了许多新的 input 类型，以及一些新的表单属性，以改善表单的功能和可访问性。

新的 input 类型包括：

• email：要求输入格式为电子邮件的文本。
• url：要求输入格式为URL的文本。
• number：要求输入格式为数字的文本。
• range：要求输入一定范围内的数字。
• date：允许输入日期。
• time：允许输入时间。
• week：允许输入周。
• month：允许输入月份。
• search：用于搜索框，可以包含清除按钮。
• color：允许输入颜色值。

新的表单属性包括：

• placeholder：提供输入字段的提示信息（例如，“请输入您的姓名”）。
• autofocus：页面加载时自动聚焦到该表单元素。
• required：要求在提交表单之前填写该字段。
• pattern：定义输入数据需要匹配的正则表达式。
• min 和 max：设置 number 或 range 类型输入的最小值和最大值。
• step：设置 number 或 range 类型输入的合法数字间隔。
• list：与 datalist 配合使用，为输入框提供预定义值的下拉列表。
• multiple：允许输入字段接受多个值（多文件上传等）。

示例代码：

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
 
  <label for="website">URL:</label>
  <input type="url" id="website" name="website">
 
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="0" max="100">
 
  <label for="volume">Volume:</label>
  <input type="range" id="volume" name="volume" min="0" max="100">
 
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
 
  <label for="time">Next Train:</label>
  <input type="time" id="time" name="time">
 
  <label for="search">Search:</label>
  <input type="search" id="search" name="search" autocomplete="off">
 
  <label for="color">Favorite Color:</label>
  <input type="color" id="color" name="color">
 
  <input type="submit" value="Submit">
</form>

在这个示例中，我们创建了一个包含各种新 input 类型的表单。每个 input 元素都有一个标签与其关联，以提高表单的可访问性。其中一些 input 元素使用了新的属性，例如，通过 required 属性，我们可以确保字段在提交前必须填写。