7.1改良与增加 input 元素的种类（1）

在 HTML5 中，大大改良了 input 的种类和属性，可以让我们仅仅依靠 HTML5 就能实现之前需要 js 脚本才能实现的功能。

增加与改良的 input 元素

url类型、 email类型、 date类型、 time类型、 datetime类型、 datetime-local类型、 month类型、 week类型、 number类型、 range类型、 search类型、 Tel类型、 color类型。

下面用代码展示一下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>input元素</title>
</head>
<body>
   <!-- url类型 -->
   <input name="url" type="url" value="https://www.baidu.com">
</body>
</html>

效果如下：

图片说明

下面增加一个验证：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>input元素</title>
</head>
<body>
   <!-- url类型 -->
   <form>
       <input name="url" type="url" value="https://www.baidu.com">
       <input type="submit" value="提交">
   </form>    
</body>
</html>

就会是这个样子：

图片说明

点一下提交没有问题，但是如果删掉部分前面的网址，再点提交的话就会成了这个样子：

图片说明

给你提示，证明当前的内容并不是一个网址，达到了一个表单验证的效果。在 HTML5 中也没有规定它们在个浏览器中的外观形式，所以同样的 input 元素在不同的浏览器下可能会有不同的样子。不过功能都是一样的。
下面看一下 email 类型，这种类型是专门填写 email 的输入框，如果在提交的时候输入的并不是 email 类型，就不允许进行提交了。也达到了一个检验的效果。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>input元素</title>
</head>
<body>
   <!-- url类型 -->
   <form>
       <input name="url" type="url" value="https://www.baidu.com">
       <input name="email" type="email">
       <input type="submit" value="提交">
   </form>    
</body>
</html>

当我们在其中输入非 email 值得时候点击提交就会提示：

图片说明

date 类型是深受开发者喜欢的一种类型。在网页中可能需要输入各种各样的日期，而这种类型的 input 元素以日历的形式方便用户输入。在不同浏览器中展现形式也略有区别。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>input元素</title>
</head>
<body>
   <!-- url类型 -->
   <form>
       <input name="url" type="url" value="https://www.baidu.com">
       <input name="email" type="email">
       <input name="date" type="date">
       <input type="submit" value="提交">
   </form>    
</body>
</html>

在网页中点击会弹出日历供选择：

图片说明

并且在提交的时候也会对输入时间的有效性进行检查。类似的还有 time 类型：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>input元素</title>
</head>
<body>
   <!-- url类型 -->
   <form>
       <input name="url" type="url" value="https://www.baidu.com">
       <input name="email" type="email">
       <input name="date" type="date">
       <input type="time" name="time">
       <input type="submit" value="提交">
   </form>    
</body>
</html>

图片说明

可以通过上下来选择对应的时间。还有一种日期和时间同时输入的方式：datetime ，并且是一个 UTC 类型的时间。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>input元素</title>
</head>
<body>
   <!-- url类型 -->
   <form>
       <input name="url" type="url" value="https://www.baidu.com">
       <input name="email" type="email">
       <input name="date" type="date">
       <input type="time" name="time">
       <input type="datetime" name="datetime">
       <input type="submit" value="提交">
   </form>    
</body>
</html>

还有 datetime-local 属性，它是用来专门输入本地日期时间的一种类型。并且在提交的时候做有效性检查。这些不同的类型大大方便了我们的开发工作。