在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. JAVA基础--日期处理

    用SimpleDateFormat方法格式化日期格式: package DAO; import java.sql.Connection; import java.sql.DriverManager; ...

  2. FreeRTOS初步认识

    源:FreeRTOS初步认识 用了半天时间对FreeRTOS有了一个初步的认识,大概总结一下,其中混杂了系统实现和实际应用方面的问题. 现只是以应用为目的,实现方面待以后进一步研究. 1.FreeRT ...

  3. HUST 1354 Rubiks

    背包.注释写详细了. 本想这样写:每个组内各自做背包,然后组间做背包,但是由于这题M=10000,时间复杂度太大. #include<cstdio> #include<cstring ...

  4. CocoaPods安装和使用教程 分类： ios技术 ios相关 2015-03-11 21:53 48人阅读 评论(0) 收藏

    目录 CocoaPods是什么? 如何下载和安装CocoaPods? 如何使用CocoaPods? 场景1:利用CocoaPods,在项目中导入AFNetworking类库 场景2:如何正确编译运行一 ...

  5. mongodb更新数据

    1. 获取当前时间: Calendar.getInstance().getTime(); 2. 更新数据: public void updateProcessLandLog(ProcessLandLo ...

  6. java8 stream ,filter 等功能代替for循环

    直接上代码,比较实在. 对象A public Class A{ private Long id; private String userName; ..... ....省略get和set方法 } 在L ...

  7. IOS开发中Xcode常用插件安装与管理（转）

    XCode中插件管理工具:Alcatraz    转自http://www.cocoachina.com/industry/20140506/8325.html 苹果现在的成绩得益于其始终如一的坚持. ...

  8. python流程控制：for循环

    for循环: 先来看一个猜年龄的小程序: AGE = 23 count = 0 for i in range(10): if count == 3: u_count = input("y|n ...

  9. Linux文件编辑之sed命令

    文件编辑之sed命令 sed是一种流编辑器,它是文本处理中非常重要的工具,能够完美配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为模式空间 (pattern space ...

  10. sql语句：创建事物

    BEGIN TRAN Tran_Money --开始事务 DECLARE @tran_error int; ; BEGIN TRY WHERE Name = '刘备'; SET @tran_error ...