html5-Input类型-优快云博客

本文详细介绍了HTML5中各种Input类型的使用方法及应用场景，包括email、url、number、range、date等，并解释了它们如何帮助用户更准确地输入数据。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>html5-Input类型</title>
    <style type="text/css">
        p
        {   
            color:Fuchsia;
        }
    </style>
</head>
<body>
<form action="" method="get"> 
<p>email 类型用于应该包含e-mail 地址的输入域，在提交表单时会自动验证email域的值</p>
电子邮件: <input type="email" name="user_email" /><br /> 
<p>url 类型用于应该包含URL 地址的输入域。在提交表单时，会自动验证url 域的值。</p>
网址: <input type="url" name="user_url" /><br />
<p>number 类型用于应该包含数值的输入域。能够设定对所接受的数字的限定</p>
1-50的数字数字间隔为5<input type="number" name="num" min="1" max="50" step="5" value="10"/> 
<p>range 类型用于应该包含一定范围内数字值的输入域。</p>
范围：<input type="range" name="ran" min="1" max="10" />
<p>日期</p>
日期：<input type="date" name="userdate" />
月：<input type="month" name="usermonth" />
周：<input type ="week" name="userweek" /><br />
时间：<input type ="time" name="usertime" />
日期时间：<input type="datetime" name ="datetime" />
本地日期时间：<input type="datetime-local" name ="datetime-local" />
<p>search 类型用于搜索域，比如站点搜索或Google 搜索。search 域显示为常规的文本域。</p>
搜索：<input type="search" name="search" />
<input type="submit" /> 
</form>
</body>
</html>