表单类型、多媒体与CSS初始

一、表单的input输入类型

HTML5新增了表单的输入类型

1、email

输入email格式，email 类型用于应该包含 e-mail 地址的输入域。

在提交表单时，会自动验证 email 域的值是否合法有效:

<form action="demo-form.php">

  E-mail: <input type="email" name="usremail">

  <input type="submit">

</form>

<p><b>注意:</b> Internet Explorer 9  及更早 IE 版本不支持 type="email" 。</p>

2、url

只能输入url格式，url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

定义输入URL字段:

<form action="demo-form.php">

  添加你的主页: <input type="url" name="homepage"><br>

  <input type="submit">

</form>

<p><b>注意:</b> Internet Explorer 9及更早 IE 版本不支持 type="url" 。</p>

3、number： 只能输入数字

4、search： 搜索框

search 类型用于搜索域，比如站点搜索或 Google 搜索。

定义一个搜索字段 (类似站点搜索或者Google搜索)

<form action="demo-form.php">

  Search Google: <input type="search" name="googlesearch"><br>

  <input type="submit">

</form>

5、、range

范围，可以进行拖动，通过value进行取值

range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。

定义一个不需要非常精确的数值（类似于滑块控制）:

请使用下面的属性来规定对数字类型的限定：

max - 规定允许的最大值，min - 规定允许的最小值，step - 规定合法的数字间隔，value - 规定默认值

<form action="demo-form.php" method="get">

Points: <input type="range" name="points" min="1" max="10">

<input type="submit">

</form>

<p><b>注意:</b> Internet Explorer 9 及更早 IE 版本不支持 type="range"。</p>

6、color 

color 类型用在input字段主要用于选取颜色，如下所示：

<form action="/demo-form.php">

  选择你喜欢的颜色: <input type="color" name="favcolor"><br>

  <input type="submit">

</form>

7、time

时间，time 类型允许你选择一个时间。

定义可输入时间控制器（无时区）：

<form action="demo-form.php">

  选择时间: <input type="time" name="usr_time">

  <input type="submit"