在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. Nginx rewrite 规则 与 proxy_pass 实现

    Nginx rewrite 规则  与 proxy_pass 实现     -------------------------------------------------------------- ...

  2. MySQL的mysql_insert_id和LAST_INSERT_ID

    摘要:mysql_insert_id和LAST_INSERT_ID二者作用一样,均是返回最后插入值的ID 值 1 mysql_insert_id 一.PHP获取MYSQL新插入数据的ID  mysql ...

  3. XML&AJAX

    AJAX: Asynchronous Javascript and XML 1. 客户端触发异步操作 2. 创建新的XMLHttpRequest, 是重要的js对象,通过它提起对服务器端的请求 3. ...

  4. maven 阿里云节点，速度快

    修改maven根目录下的conf文件夹中的setting.xml文件. <mirrors> <mirror> <id>alimaven</id> < ...

  5. 如何在Eclipse中安装PDT插件来开发PHP

    之前查过很多PDT的安装方法,60%都是让人直接安装All-in-one的PHP eclipse版本,纯属让人无语,而有些给出的PDT安装链接无法正确下载插件,对此,给出了我安装过的PDT插件下载地址 ...

  6. (简单) HDU 3397 Sequence operation，线段树+区间合并。

    Problem Description lxhgww got a sequence contains n characters which are all '0's or '1's. We have ...

  7. linear-gradient线性渐变

    作者:zccst CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变). 1,在mozila background: -moz-l ...

  8. LPC1788定时器使用

    #ifndef __TIM_H_ #define __TIM_H_ #include "common.h" extern u8 tim1_mr0_flag; void tim0_c ...

  9. LIBPNG

    libpng 库的源码包中有个 example.c ,里面包含PNG文件读/写的示例代码,参考示例代码和注释(虽然是英文的),可以了解大致的用法. 以下是读取PNG图片的图像数据的代码,使用前还需要按 ...

  10. php 模式

    设计模式1.单例模式类的计划生育1.让该类在外界无法造对象2.让外界可以造一个对象,做一个静态方法返回对象3.在类里面通过静态变量控 class Dog { static $dx; public $t ...