HTML5 Input 类型学习笔记

1. 简介

HTML5 中新增了多种新的输入类型，用于提高用户交互体验。这些类型包括日期、时间、邮箱、电话等，可以在表单中使用。

2. 输入类型详解

2.1 date

用于输入日期，例如：

htmlCopy Code
<label for="birthday">请选择出生日期：</label>
<input type="date" id="birthday" name="birthday">

2.2 time

用于输入时间，例如：

htmlCopy Code
<label for="appt-time">请选择预约时间：</label>
<input type="time" id="appt-time" name="appt-time">

2.3 email

用于输入电子邮件地址，例如：

htmlCopy Code
<label for="email">请输入电子邮件地址：</label>
<input type="email" id="email" name="email">

2.4 tel

用于输入电话号码，例如：

htmlCopy Code
<label for="phone">请输入电话号码：</label>
<input type="tel" id="phone" name="phone">

3. 实例演示

下面是一个完整的表单示例，同时使用了以上四种输入类型：

htmlCopy Code
<form action="#" method="post">
  <label for="birthday">请选择出生日期：</label>
  <input type="date" id="birthday" name="birthday"><br><br>
  
  <label for="appt-time">请选择预约时间：</label>
  <input type="time" id="appt-time" name="appt-time"><br><br>

  <label for="email">请输入电子邮件地址：</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="phone">请输入电话号码：</label>
  <input type="tel" id="phone" name="phone"><br><br>

  <input type="submit" value="提交">
</form>

通过上述表单，用户可以方便地输入日期、时间、电子邮件地址和电话号码，并提交表单。