HTML5 新增表单标签

HTML5 引入了一些新的表单相关的标签，以下是一些常用的新增标签及其使用示例：

1. datalist：定义选项列表。用户可以输入这些值，但他们只能选择已经提供的选项。

<input type="text" list="cars">
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

2. keygen：提供一个密钥对生成器的接口。

<form action="demo_keygen.php" method="get">
  Username: <input type="text" name="usr_name">
  Security Key: <keygen name="security">
  <input type="submit">
</form>

3. output：用于不同类型的输出。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" value="50">
  + <input type="number" id="b" value="50">
  = <output name="x" for="a b">100</output>
</form>

4. email：输入电子邮件地址的文本框。

<form action="/submit">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <input type="submit">
</form>

5. url：输入URL地址的文本框。

<form action="/submit">
  <label for="url">URL:</label>
  <input type="url" id="url" name="url">
  <input type="submit">
</form>

6. number：输入数字的文本框。

<form action="/submit">
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  <input type="submit">
</form>

7. range：输入一定范围内数字的滑块。

<form action="/submit">
  <label for="points">Points:</label>
  <input type="range" id="points" name="points" min="1" max="10">
  <input type="submit">
</form>

8. search：用于搜索框，可以显示清除按钮。

<form action="/search">
  <input type="search" id="search" name="search">
  <input type="submit">
</form>

9. tel：输入电话号码的文本框。

<form action="/submit">
  <label for="tel">Phone:</label>
  <input type="tel" id="tel" name="tel">
  <input type="submit">
</form>

10. color：选择颜色。

<form action="/submit">
  <label for="color">Choose color:</label>
  <input type="color" id="color" name="color">
  <input type="submit">
</form>

11. date：选择日期。

<form action="/submit">
  <label for="date">Birthday:</label>
  <input type="date" id="date" name="date">
  <input type="submit">
</form>

12. datetime-local：选择日期和时间，不包括时区。

<form action="/submit">
  <label for="datetime">Event date:</label>
  <input type="datetime-local"