html5之input类型

2016-07-05 本文已影响319人便U_Life

html5拥有很多新的表单输入类型，这些类型提供更好的输入控制和验证，以前我们需要自己通过脚本去控制的功能，现在标签已经帮我们完成了。这里我将详细介绍input类型为：date、datetime、datetime-local、time、month、week、email、number、range、search、tel、url、color的用法！
注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。建议使用Opera浏览器测试

date类型

date类型允许你从一个时机选择期选择一个日期，以前我们都是使用JS时间插件完成的功能，现在已经如此简单！代码如下：

<!DOCTYPE html>
<html>
<meta  charset="utf-8">
<body>
    生日: <input type="date" name="bday">
</body>
</html>

效果：

date类型.png
注意:低版本的火狐和IE不支持该属性，建议使用Opera浏览器测试！

datetime类型

datetime类型的input元素是专门用来输入UTC日期和实践的文本框，在提交的时候，对日期和时间进行有效的检查。代码如下：

<!DOCTYPE html>
<html>
<meta  charset="utf-8">
<body>
    <form> 
      <input id="w3cfuns_datetime" name="w3cfuns.com" type="datetime"/> 
      <input type="submit" value="提交"/> 
    </form> 
</form> 
</body>
</html>

效果：

datetime类型.png
注意:建议使用Opera浏览器测试！

datetime-local类型

datetime-local 类型允许你选择一个日期和时间 (无时区)。此类型与datatime类型差不多，只不过是用来输入本地的日期和时间。

time类型

time 类型允许你选择一个时间，在提交的时候检查是否输入了有效的时间。代码如下：

<!DOCTYPE html>
<html>

<meta  charset="utf-8">
<body>
    选择时间: <input type="time" name="usr_time">
</body>
</html>

效果：

time类型.png
注意:建议使用Opera浏览器测试！

month类型

month是一种专门输入月份的文本框，在日历中，你只能选择某一个月，不能选择某一天。代码如下：

<!DOCTYPE html>
<html>
<meta  charset="utf-8">
<body>
    <input id="w3cfuns_month" name="w3cfuns.com" type="month"/> 
</body>
</html>

效果：

month类型.png
注意:建议使用Opera浏览器测试！

week类型

week是专门用来输入周（星期）的文本框，W后面所跟的数字表示此周是当年的第几个星期。在日历中只能选择一周，同样不能选择某一天。代码如下：

<!DOCTYPE html>
<html>
<meta  charset="utf-8">
<body>
    <input id="w3cfuns_week" name="w3cfuns.com" type="week"/> 
</body>
</html>

效果：

week类型.png
注意:建议使用Opera浏览器测试！

email类型

email 类型用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值是否合法有效。代码如下：

<!DOCTYPE html>
<html>
<meta  charset="utf-8">
<body>
    <form action="demo-form.php">
         E-mail: <input type="email" name="usremail">
        <input type="submit">
    </form>
</body>
</html>

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

number类型

number 类型用于应该包含数值的输入域。我们还能够设定对所接受的数字的限定，step为上一个数字与下一个数字的间隔，value - 规定默认值。代码如下：

<!DOCTYPE html>
<html>
<meta  charset="utf-8">
<body>
    <form action="demo-form.php">
        <input type="number" max="9" min="0" step="2"/> 
        <input type="submit">
    </form>
</body>
</html>

range类型

range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。step - 规定合法的数字间隔，value - 规定默认值。代码如下：

<!DOCTYPE html>
<html>
<meta  charset="utf-8">
<body>
    <form action="demo-form.php">
        <input type="range" name="points" min="1" max="10" step="2"/> 
        <input type="submit">
    </form>
</body>
</html>

search类型

search 类型用于搜索域，比如站点搜索或 Google 搜索。一般是语义话，代码如下：

<input type="search" name="googlesearch">

tel类型

tel可输入一个电话号码,大部分浏览器不支持，代码如下：

<input type="tel" name="usrtel">

url类型

url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证是否符合url标准。代码如下：

<!DOCTYPE html>
<html>
<meta  charset="utf-8">
<body>
    <form action="demo-form.php">
        添加您的主页: <input type="url" name="homepage">
        <input type="submit">
    </form>
</body>
</html>

color类型

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

<!DOCTYPE html>
<html>
<meta  charset="utf-8">
<body>
    <form action="demo-form.php">
         选择你喜欢的颜色: <input type="color" name="favcolor">
        <input type="submit">
    </form>
</body>
</html>

效果：

color类型.png
注意:建议使用Opera浏览器测试！