11.新的Input类型

1.新的Input类型

1.HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
2.color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week。

2.color

<form action="demo-form.php">
  选择你喜欢的颜色: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>

3.date

1.从一个日期选择器选择一个日期。

<form action="demo-form.php">
  生日: <input type="date" name="bday">
  <input type="submit">
</form>

4.datetime

<form action="demo-form.php">
  生日 (日期和时间): <input type="datetime" name="bdaytime">
  <input type="submit">
</form>

5.datetime-local

1.选择一个日期和时间 (无时区).

<form action="demo-form.php">
  生日 (日期和时间): <input type="datetime-local" name="bdaytime">
  <input type="submit">
</form>

6.email

<form action="demo-form.php">
  E-mail: <input type="email" name="usremail">
  <input type="submit">
</form>

7.month

<form action="demo-form.php">
  生日 ( 月和年 ): <input type="month" name="bdaymonth">
  <input type="submit">
</form>

8.number

1.包含数值的输入域。

<form action="demo-form.php">
  数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

9.range

1.滑动条。step：规定合法的数字间隔。value：规定默认值。

<form action="demo-form.php" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>

10.search

1.搜索域，比如站点搜索或 Google 搜索。

<form action="demo-form.php">
  Search Google: <input type="search" name="googlesearch"><br>
  <input type="submit">
</form>

11.tel

<form action="demo-form.php">
  电话号码: <input type="tel" name="usrtel"><br>
  <input type="submit">
</form>

12.time

<form action="demo-form.php">
  选择时间: <input type="time" name="usr_time">
  <input type="submit">
</form>

13.url

<form action="demo-form.php">
  添加你的主页: <input type="url" name="homepage"><br>
  <input type="submit">
</form>

14.week

<form action="demo-form.php">
  选择周: <input type="week" name="year_week">
  <input type="submit">
</form>