在html5中，大幅度增加与改良了input元素的种类，可以简单的使用这些元素来实现之前需要JS脚本来实现的功能。

1、url类型、email类型、date类型、time类型、datetime类型、datatime-local类型、month类型、week类型、number类型、range类型、search类型、Tel类型、color类型

 <!DOCTYPE html>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>g改良的input元素</title>
 </head>
 <body>
     <form>
     <!--url-->
     <input name="url" type="url" value="http://jikexueyuan.com"></input>
     <input type="submit" value="提交"></input>
     <br>
     <!--email-->
     <input name="email" type="email" value="bluebird@qq.com"></input>
     <input type="submit" value="提交"></input>
     </form>
     <br>
     <!--date-->
     <input name="date" type="date" value=""></input>
     <!--time-->
     <br>
     <input name="time" type="time" value="10:00"></input>
     <!--datetime-->
     <br>
     <input name="datetime" type="datetime" value=""></input>
     <!--datetime-local-->
     <br>
     <input name="datetime-local" type="datetime-local" value=""></input>
     <!--month-->
     <br>
     <input name="month" type="month" value="2010-01-01"></input>
     <!--week-->
     <br>
     <input name="week" type="week"></input>
     <!--number-->
     <br>
     <input name="number" type="number" value="15" min="10" max="100" step="5"></input>
     <!--简单的计算器-->
     <br>
     <script>
         function sum(){
             var n1=document.getElementById("num1").valueAsNumber;
             var n2=document.getElementById("num2").valueAsNumber;
             document.getElementById("result").valueAsNumber = n1 + n2;
         }
     </script>
     <form>
         <input type="number" id="num1"></input>
         +
         <input type="number" id="num2"></input>
         =
         <input type="number" id="result" readonly></input>
         <input type="button" value="计算" onclick="sum()"></input>
     </form>
     <!--range滑动条-->
     <br>
     <input name="range" type="range" value="25" min="0" max="100" step="5"></input>
     <!--serachs用于搜索域，比如站点搜索或google搜索-->
     <input type="search"></input>
     <!--tel-->
     <br>
     <input type="tel"></input>
     <!--color-->
     <br>
     <input type="color" onchange="document.body.style.backgroundColor = document.getElementById("currentColor").textContent = this.value;"></input>
         <span id="currentColor"></span>

     <!--output-->
     <script>
         function value_change(){
             var number = document.getElementById("range").value;
             document.getElementById("output").value=number;
         }
     </script>
     <form id="testform">
         <input id="range" type="range" min="0" max"100" step="5" value="25" onchange="value_change()"></input>
         <output id="output">25</output>
     </form>
 </body>
 </html>

2、表单验证

 <body>
     <script>
         function check(){
             var email = document.getElementById("email");
             if (email.value=="") {
                 alert("请输入email");
                 return false;
             }else if(!email.checkValidity()){
                 alert("请输入正确的email地址");
                 return false;
             }
         }
     </script>
     <form id="testform" onsubmit="check()" novalidate="true">
         <label for="email">email</label>
         <input name="email" type="email" id="email"></input>
         <br>
         <input type="submit"></input>
     </form>
 </body>

[html5] 学习笔记-改良的input元素种类的更多相关文章

  1. HTML5增加与改良的input元素

    h5中form表单中input新增的属性值 在HTML5中增加了许多新的标签和功能属性,今天我们来看一个Form表单在HTML5中新的使用方法.那么在HTML5中新加入的这个功能与之前咱们使用的功能区 ...

  2. [html5] 学习笔记-表单新增元素与属性

    本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.for ...

  3. html5学习笔记(3)--主题结构元素-1

    Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  4. HTML5学习笔记三：aside元素，time元素与微格式

    一.aside元素 表示当前页面或文章的附属信息部分,相关的引用,侧边栏,广告等有别于主要内容的部分:主要有一下两种用法: 1. 被包含在article元素中作为主要内容的附属信息部分,可以是与当前文 ...

  5. HTML5 改良的 input 元素的种类

    html5中增加改良的input 元素 . 在过去我们制作网页输入框,会用到不少JS验证,如今有了HTML5写这种效果已经没有那么麻烦了,下面我来给大家介绍两种HTML5的input的新增加的类型应用 ...

  6. html5 学习笔记

    一.ie8及以下对html5相关语义标签的支持 <!-[if lt IE9]> <script src="html5.js"></script> ...

  7. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. HTML5学习笔记五：html5表单

    表单是页面上非常重要的一块内容,用户可输入的大部分内容都是在表单元素中完成的,与后台的交互大多数也是通过点击表单中的按钮. 一.新增的元素和属性 1.新增属性: 1.1 form属性:页面中的任何元素 ...

  9. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

随机推荐

  1. ecos新命令

    创建myapp,在myapp里创建lib/command目录 新建一个文件hello.php <?php /** * myapp_command_hello(myapp->app名称,co ...

  2. mysql迁移-----拷贝mysql目录/load data/mysqldump/into outfile

    摘要:本文简单介绍了mysql的三种备份,并解答了有一些实际备份中会遇到的问题.备份恢复有三种(除了用从库做备份之外), 直接拷贝文件,load data 和 mysqldump命令.少量数据使用my ...

  3. NULL、nil、Nil、NSNull的区别

    标志 值 含义 NULL (void *)0 C指针的字面零值 nil (id)0 Objecve-C对象的字面零值 Nil (Class)0 Objecve-C类的字面零值 NSNull [NSNu ...

  4. iOS8 UISearchViewController搜索功能讲解 分类： ios技术 2015-07-14 10:23 76人阅读 评论(0) 收藏

    在iOS8以前我们实现搜索功能需要用到UISearchbar和UISearchDisplayController, 在iOS8之后呢, UISearchController配合UITableView的 ...

  5. Cocos2d-x 的“HelloWorld” 深入分析

    本节所用Cocos2d-x版本:cocos2d-1.0.1-x-0.12.0 不能免俗,一切都从“HelloWorld!”开始.打开HelloWorld工程,里面有两个文件目录Classes和win3 ...

  6. Chapter5 – 碰撞检测

    主人公能够放子弹了,虽然子弹看起来很美,但是怎么样来打到妖怪? 在这一章我们介绍一下最简单的碰撞检测方法去实现它. 首先第一个,我们有必要保存每个妖怪和子弹的指针,来够追踪他们的位置. 在这个游戏中我 ...

  7. LRU Cache 题解

    题意 Design and implement a data structure for Least Recently Used (LRU) cache. It should support the ...

  8. assert 实现分析

    一直以来,对于assert的实现总是不太理解,现在深入assert背后的代码,总算对assert的实现有了一个清醒的认识. assert基于宏定义与宏展开实现.首先介绍一下assert的功能:它能够断 ...

  9. HttpListener 实现web服务端

    1. using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syste ...

  10. Django performance

    Reference: https://impythonist.wordpress.com/2016/02/21/building-high-performance-django-systems/ Th ...