xml地图|网站地图|网站标签 [设为首页] [加入收藏]

智能家电

当前位置:美高梅游戏网站 > 智能家电 > 美高梅棋牌html5之input类型

美高梅棋牌html5之input类型

来源:http://www.gd-chuangmei.com 作者:美高梅游戏网站 时间:2019-09-07 12:59

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

HTML5 Input 类型,html5input类型

HTML5提供的input新的输入类型,这些类型可以更好地帮我们输入控制和验证

下面给大家介绍一下新的类型大概有那些:

  emial  用于验证邮箱的正确格式,可以为空,在提交表单时自动验证

  Url  用于包含URL地址输入的输入域验证

  number  包含数值的输入域,以下是数字类型的属性用于限定输入的数值类型

    max number 规定允许的最大值

    min number 规定允许的最小值

    step number 规定合法的数字间隔,表示规定数值的倍数,比如step=2,那么输入0,2,-2都是合法的

    value number 规定默认值

  range 这个则是验证一定范围的输入域,限定类型和number是一样的。

      <input type="range"  min="1" max="10" />

  Date pickers  数据检出器(官方语言),是否还在为文本输入时间到处找控件,是否还在用各个JS插件的时间验证控件,如果记住下面的控件,我想都能解决

       date - 选取日、月、年
      month - 选取月、年
      week - 选取周和年
      time - 选取时间(小时和分钟)

      datetime - 选取时间、日、月、年( UTC 时间)
      datetime-local - 选取时间、日、月、年(本地时间)

      <input type="date" name="user_date" />

      你仅仅只需要改变文本框的type类型,所有的时间你都会搞定!把时间装在自己的手中

好了,今天介绍的文本框类型就是这么多了,大家有什么好的思路和方法可以评论,让我们斟酌斟酌,共同学习,共同进步!西红柿_炒番茄

Input 类型,html5input类型 HTML5提供的input新的输入类型,这些类型可以更好地帮我们输入控制和验证 下面给大家介绍一下新的类型大概有...

date类型

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

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

效果:

美高梅棋牌 1date类型.png注意:低版本的火狐和IE不支持该属性,建议使用Opera浏览器测试!

datetime类型

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

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

效果:

美高梅棋牌 2datetime类型.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>

效果:

美高梅棋牌 3time类型.png注意:建议使用Opera浏览器测试!

month类型

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

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

效果:

美高梅棋牌 4month类型.png注意:建议使用Opera浏览器测试!

week类型

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

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

效果:

美高梅棋牌 5week类型.png注意:建议使用Opera浏览器测试!

本文由美高梅游戏网站发布于智能家电,转载请注明出处:美高梅棋牌html5之input类型

关键词:

上一篇:美高梅游戏官网娱乐反编译 iOS APP

下一篇:没有了