在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. js url校验

    function IsURL(str_url){ var strRegex = "^((https|http|ftp|rtsp|mms)?://)" + "?(([0-9 ...

  2. [Lua]Mac系统上安装Lua环境

    1.下载 Lua语言的官方网站 http://www.lua.org/ 下载最新版本的Lua环境 2.安装 解压下载包lua-5.3.1.tar.gz 打开终端Terminal 使用cd命令进入该目录 ...

  3. [Unity Shader]Shader前述

    什么是Shader   Shader,也就是着色器,它的工作就是读取你的网格并渲染在屏幕上.Shader可以定义一些属性,你会用它来影响渲染模型时所显示的效果.当存储了这些属性的设置时,就是一个Mat ...

  4. kafka第三篇--安装使用

    说明:直接下载二进制包可省略安装过程,省略很多麻烦. 1单机 安装 安装过程,参考官网: > tar xzf kafka-<VERSION>.tgz > cd kafka-&l ...

  5. Victor 串口 VCL 控件 - 简单实用, 功能强大的 C++ Builder 串口控件!

    源:Victor 串口 VCL 控件 - 简单实用, 功能强大的 C++ Builder 串口控件! 2014年02月06日发布控件的重要更新版本: Victor 串口控件 1.5.0.2 版本 (包 ...

  6. AngularJS 讲解,四 Directive

    AngularJS  Directive 自定义指令(我最喜欢AngularJs的功能之一) 一:什么时候我们会用到directive 1.使html更具语义化,不用深入了解研究代码的逻辑便可知道大致 ...

  7. android 后台服务定时通知

    最近有个项目的要求是在程序退出之后,任然可以每天定时发通知,我们可以想下,其实就是后台开一个服务,然后时间到了就发下通知. 1.首先我们需要用到Service类. 先上代码在慢慢解释 package ...

  8. java8 泛型声明 The diamond operator ("<>") should be used

    The diamond operator ("<>") should be used Java 7 introduced the diamond operator (& ...

  9. 【贪心】【堆】Gym -100956D - Greedy Game

    题意:给定n个物品,每个物品对于A和B来说具有不同的价值,记为ai,bi,两人交替取,A先手,A总是贪心地取当前剩下的物品中,对于他价值最高的,如果有多个,则任取一个.问B在最坏情况下,能取到的物品的 ...

  10. GitHub优秀的Android 开源项目

    GitHub上优秀Android开源项目 转载自 : http://my.eoe.cn/sisuer/archive/3348.html http://my.eoe.cn/sisuer/archive ...