Html5增强型表单标签

2019-09-10 郑州网站建设  

HTML5新增加表单标签

新的标准中添加了很多输入型控件,比如:Number网址EmailRangeColor等。而他们都是以 input标签的type属性出场,那下面我一一简单介绍一下。[以下所有的例子请用Opera浏览器浏览]

1)只能输入数字的Number类型input标签

Html代码为:<input type="number" name="demoNumber" min="1" max="100" step="2"/>

运行效果:

:此标签其实就是普通的input标签,只不过是type类型指向了number,标识当前标签接受数字类型输入.另外添加了四个属性.

name:属性大家很熟悉了用来标识表单提交时的key

min:是表单标签新增加的属性标识当前输入框输入的最小值

max:那就是最大值了

step:是步长的意思,也就是在点击增大或者减小的时候的增加减少的步长

小结:minmaxstep是表单标签中添加的新的属性。另外就是type又增加了一个新的number类型,接受数字输入。而之前我们要做到这样的效果只能通过js在失去焦点时候判断,控制起来不那么方便,现在一切都那么简单简洁。

 

2)新型Email类型input标签

Html代码:<input type="邮箱" name="邮箱" placeholder="请输入注册email" />

运行效果:

注:在上面HTML代码中,相对于之前的标签,不同点:type="邮箱"表示当前input标签接受一个email的输入。另外就是:placeholder="请输入注册email"   这个属性的功能,相信你看到此时的效果的时候你会感到特别想兴奋,而在之前实现此提示信息,需要监听一下文本框的blur事件,然后判断是否为空,为空再去给文本框赋值一个灰色的字体提示信息,而现在只需要一个简单属性指定就可以了,浏览器都帮我们实现了。

小结:当表单在提交前,此文本框会自动校验是否符合email的正则表达式,另外placeholder属性带来的提示信息功能太强大了。

3)新型Url类型input标签

这里不再赘述了,跟Email类型input标签类似。只看一效果吧:

Html代码:<input type="url" placeholder="请输入URL" name="url" />

 

运行效果:

4)新型Tel类型input标签


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1806.html转载请标明出处,谢谢合作!
标签:
  • 标签
  • HTML5
  • 表单
  • 增加