手机端小强原创文章,java小强个人博客站点
当前位置: 首页 >> 理论 >> HTMl5改良与增加 input 元素的种类

HTMl5改良与增加 input 元素的种类

34670 理论 | 2015-5-13

html5input标签改良的类型有,URL,email,date,time,datetime,datetime-local,month,week,number,range,search,tel,color 等类型。

参考如下代码示例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!-- 改良Input有那些
URL,email,date,time,datetime,datetime-local,month,week,number,range,search,tel,color 等类型 -->
<form>
    <input name="url" type="url" value="http://javacui.com"><br><br>
    <input name="email" type="email" value="cuisuqiang@qq.com"><br><br>
    <input name="date" type="date"><br><br>
    <input name="time" type="time"><br><br>
    <input name="datetime" type="datetime"><br><br>
    <input name="datetimelocal" type="datetime-local"><br><br>
    <input name="month" type="month"><br><br>
    <input name="week" type="week"><br><br>
    <!-- 可以使用valueAsNumber属性来获取为整形的值 -->
 <input name="number" type="number" min="5" max="100" step="5"><br><br>
    <script>
    function rangeChange(para)
    {
        document.getElementById("rangeValue").innerHTML=para;
    }
    </script>
    <input id="range" name="range" type="range" value="10" min="0" max="100" step="5" onchange="rangeChange(this.value)">
    <output id="rangeValue">10</output><br><br>
    <input type="color" onchange="document.body.style.backgroundColor=document.getElementById('currentColor').textContent=this.value">
    <span id="currentColor"></span>
    <br><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

不同浏览器展示效果不同,截图为Google Chrome效果。


可以选择日期的文本框



可以选择周的文本框。



上面是滑动选择值,下面为颜色选择,当你选择一个颜色后,浏览器背景颜色改变。



有URL和Emial验证的文本框,此时你的表单是无法提交的。

推荐您阅读更多有关于“ html5 元素 input 种类 ”的文章

上一篇:MyEclipse10 MyEclipse2014安装SVN插件遇到的问题 下一篇:CSS+JS标签切换效果

猜你喜欢

发表评论:

个人资料
blogger

java小强
没有思考,人生的路会越走越难!

搜索
分类
最新微语
  • 不是本人但真实经历,如果你得了绝症抑或大病,能告诉的人两只手能数过来,而能一直陪床真正帮你的人,一只手就够了。也许你会说我亲戚多哥们多同学多云云,但真遇上的时候,你敢说吗?即使你说了会有人像你想的那样吗?不要尝试考验人性,人走茶凉之类的话都听过,但不遇到事我们未曾理解其中的道理。

    2018-11-07 11:05

  • 每个人的一生都是不同的,我们都需要负重前行。每一种生活都是不同的,我们都需要真实面对。所经历的,让我学会一件事,顺其自然。人,总有很多自己想要的,总有很多困难要面对,总有很多人要去爱,我们不断思考人生,却总是迷失自己。如今,我们最缺的不是金钱和时间,而是忘记了自己的初衷。

    2018-09-28 14:42

  • 车也学了,年也过了,生日也过了,村里的会也赶了,这次,是真的,年过去了。不过我没回京,也没有在家找工作,我在等什么吗?反正现在正合了我这个懒人的要求,不过,我歇不住,思考下人生。

    2018-03-20 00:11

  • 8月1日,我已离开奋斗多年的北京。不知道是暂时的离开,还是永久的离别,反正已经离职在家,告别每日上班,每天苦累的煎熬,过一段属于自己的生活。以前是专职工作,现在专职生活。

    2017-08-18 12:47

  • 又弄完一个项目,累成狗,但是感觉又进步不少,除了很多坑已经踩过,做起来也是轻车熟路。同时也认识到,程序不在于你多牛逼,而是在乎你的细节把控度,而细节的关注,是一个优秀程序员必须要注意的。另外,要相信自己,勇敢向前,没人生下来就是成功的,而且,成功的路,比成功本身更重要。

    2017-06-30 09:46

  • 更多»

最新文章
热门文章
随机文章