HTML5学习笔记第二节（Email标签（自动验证格式），Number标签，URL标签...）

2011-11-28 15:01 苏飞阅读(13176) 评论(14) 编辑收藏举报

介绍与导航，

----------------------------------------------------------------------------------------

1.Email输入框,自动验证Email有效性。

2.number数字输入，验证正确，可以设置开始结束位。

3.URL输入框，可以验证URL输入的有效性。

4.Date pickers (date, month, week, time, datetime, datetime-local)选择框，可以选择日期，时间，月，周。

5.datalist输入选择。

在大家使用HTml的时候请一定要把你的浏览器改成OPera的，

因为现在只有Opera对Html5支持的才是最好的，

其它的浏览器可能是无效的，特别是IE根本就不管用。

说明一下本文中所有的标签都起名为user_email，如果大家自己使用的话就自己修改一下，我这里是方便写代码

1.Email输入框,自动验证Email有效性

----------------------------------------------------------------------------------------

大家以前在做注册功能时或者是登录功能时，如果让用户输入Email时，肯定要加或多或少的验证吧，而且有时候正则写起来也不是很爽，但在HTml5里面这些都将成为一个标签

只要一个Email类型的INput标签就可以实现下面咱们来看看效果吧

如果在我输入的邮件地址不对的时候就会有提示，下面看下我的代码吧

<!DOCTYPE HTML>
<html>
<body>
<form action="../Default.aspx" method="get">
E-mail: <input type="email" name="user_email"/><br />
<input type="submit"/>
</form>
</body>
</html>

自己输入来试试吧E-mail:

是不是很方便呀，以后再想让用户输入Email的时候直接拉个控件过来就 OK了。

2.number数字输入，验证正确，可以设置开始结束位

----------------------------------------------------------------------------------------

以前我们如果想让用户输入数字的话，一定不是一件简单的工作，但有了number类型的标签时大家会很爽的，不多说了看

下效果

看下我的代码吧

<!DOCTYPE HTML>
<html>
<body>
<form action="../Default.aspx" method="get">
<input type="number" step="5" min="5" max="20" name="number"  value="0"/>
<input type="submit"/>
</form>
</body>
</html>

而且你可以设置最大值最小值，并且可以设置增长的间隔，

一起来看看他的属性

属性	值	描述
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value	number	规定默认值

现在自己来试试吧

3.URL输入框，可以验证URL输入的有效性。

----------------------------------------------------------------------------------------

这个跟之前的都差不多也是直接Type类型，但是他只验证协议，不验证有效性，比如你直接输入一个123，它会自动给你加上http://头协议

看下面的代码就知道了

<form action="../Default.aspx" method="get">
URL: <input type="url" name="user_email"/><br />
<input type="submit"/>
</form>

还是自己动手试试吧URL:

4.Date pickers (date, month, week, time, datetime, datetime-local)

----------------------------------------------------------------------------------------

我们平时如果要做个日历控件的话一定是非费劲的吧，而且效果也不怎么好，

但是在这里你就太方便了，在家一起来看看效果吧

代码如下

<!DOCTYPE HTML>
<html>
<body>
<form action="../Default.aspx" method="get">
Date: <input type="date" name="user_email"/>
month : <input type="month" name="user_email"/>
week: <input type="week" name="user_email"/>
time: <input type="time" name="user_email"/>
datetime: <input type="datetime" name="user_email"/>
datetime-local : <input type="datetime-local" name="user_email"/>
<input type="submit"/>
</form>
</body>
</html>

一起来试试吧

5.datalist

----------------------------------------------------------------------------------------

这个其实有点像DropDownList了，但又比它的功能要强大一些，

先来看看效果

代码如下

<!DOCTYPE HTML>
<html>
<body>
    <form action="../Default.aspx" method="get">
    Webpage:
    <input type="url" list="url_list" value="fdf" name="user_email"/>
    <datalist id="url_list">
        <option label="W3School" value="http://www.w3school.com.cn"/>
        <option label="Microsoft" value="http://www.microsoft.com"/>
    </datalist>
    <input type="submit"/>
    </form>
</body>
</html>

自己动手来试试吧

html5给我最大的体会就是把N多的插件变成了标签或其它，

但是现在支持Html5的浏览器太少了，我发现只有Opera支持的还行，其它的都基本上是一半支持一半不支持，让人尴尬啊。

希望Html5时候早日到来吧，让我们一起期待更多浏览器提供更好更全面的支持。

刷新页面返回顶部

（评论功能已被禁用）

阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述

历史上的今天：
2009-11-28 TabControl添加关闭按钮

苏飞博客欢迎大家来到我的博客！！！