1.url类型、email类型、date类型、time类型、datetime类型、datetime-local类型、
month类型、week类型、number类型、range类型、search类型、tel类型、color类型
<!--url类型-->
<form>
     <input name="url" type="url" value="http://www.baidu.com">
     <input type="submit" value="提交">
</form>
<!--email类型-->
<form>
     <input type="email" type="email" value="admin@qq.com">
     <input type="submit" value="提交">
</form>
<!--date类型-->
<input type="date" name="date" value="">
<br/>
<!--time类型-->
<input name="time" type="time" value="10:00">
<!--datetime类型-->(utc编码格式,国际时间)
<input name="datetime" type="datetime" value="">
<!--datetime-local类型-->(本地时间,会进行判断)
<input name="datetimelocal" type="datetime-local">
<!--month元素-->(只能选择月份)
<input name="month" type="month" value="2010-01-01">
<!--week元素-->
<input name="week" type="week">
<!--number类型-->
<input name="number" type="number" value="12" min="10" max="100" step="5">
<!--计算器-->
<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 type="number" id="num2">
     =
     <input type="number" id="result" readonly>
     <input type="button" value="计算" onclick="sum()">
</form>
 
 
range类型的input元素
是一个只允许输入一段范围内数值的文本框,具有最大值和最小值属性,具有step属性,
<input name="range" type="range" value="25" min="0" max="100" step="5">
 
<!--search类型-->
<input type="search">
<!--tel类型-->
<input type="tel">
<!--color类型-->
<input type="color" onchange="document.body.style.backgroundColor=document.getElementById('currentColor ').textContent=this.value">
<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="10" onchange="value_change() ">
     <output id="output">10</output>
</form>
 
 
表单验证
<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"><br/>
     <input type="submit">
</form>
 

html5改良的input元素的种类的更多相关文章

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

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

  2. [html5] 学习笔记-改良的input元素种类

    在html5中,大幅度增加与改良了input元素的种类,可以简单的使用这些元素来实现之前需要JS脚本来实现的功能. 1.url类型.email类型.date类型.time类型.datetime类型.d ...

  3. html5 大幅度地增加和改良input元素的种类

    增加和改良input元素 url类型.email类型.date类型.time类型.datetime类型.datetime-local类型.month类型.week类型.number类型.range类型 ...

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

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

  5. web前端学习(二)html学习笔记部分(2)-- 改良的元素(input元素等等)

    1.2.5  HTML5 改良的 input 元素的种类 1.2.5.1  新增的input元素种类中的改良与增加 input 元素的种类 (1) 新增的input元素种类中的url类型.email类 ...

  6. HTML5 增强的页面元素

    一.HTML5 改良的 input 元素的种类 1.<input type="number" id="num1"> var n1 = documen ...

  7. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

  8. 笔记:HTML5中input元素新增的type值

    在HTML5中,input元素的type值增加了不少,使input的功能强大了很多. 但在各大浏览器中并不是所有的type值都支持. 以下是比较有用.并且浏览器支持的稍好一些的值: type=colo ...

  9. html5中关于input使用方法的改变

    測试环境:Firefox 10.0.Safari 5.1.Opera 11.61, Chrome 14.0.835.202 自己測试的时候都有写在form表单里,有提交button验证.由于对博客使用 ...

随机推荐

  1. JavaScript基本类型与引用类型(二)

    前文已经对基本类型和引用类型作了简单的介绍,本文将进一步介绍基本类型和引用类型. 基本包装类型 为了方便操作基本类型的值,JavaScript提供了特殊的引用类型:Boolean.Number.Str ...

  2. 【STORAGE】Qlogic FC存储交换机cmd配置方法

    *************************************************************** ****原文: blog.csdn.net/clark_xu  徐长亮专 ...

  3. 迭代器-iteration

    class CoffrrIterator implements Iterator<Coffee> { int cunt = size; public boolean hasNext() { ...

  4. IOS UI 设计 技术

    AutoLayout AutoLayout是一种基于约束的,描述性的布局系统. 程序员—-(cgrect)—>frame(center+bounds)    =====>   程序员—(N ...

  5. POJ - 1470 Closest Common Ancestors(离线Tarjan算法)

    1.输出测试用例中是最近公共祖先的节点,以及这个节点作为最近公共祖先的次数. 2.最近公共祖先,离线Tarjan算法 3. /* POJ 1470 给出一颗有向树,Q个查询 输出查询结果中每个点出现次 ...

  6. openfire源码编译后部署到linux

    1.源码通过编号后,会生成target目录,直接把target目录拷贝到linux下即可: 2.启动openfire: ./openfire.sh start 3.退出直接ctr + c 问题:如果一 ...

  7. VS2012上添加SharePoint2013模板,SharePoint2013 Tool安装配置

    今天需要在SharePoint2013上做开发,但是安装的VS2012默认只有sharepoint2010的模板,因此需要安装配置好,这里我们通过Web平台安装程序4.0来配置的 Web 平台安装程序 ...

  8. Ordeby then by

    先按orderby排序,再按thenby排序 return PartialView("_ClickRangeOnCategory", articles.OrderByDescend ...

  9. 摘抄 - JavaScript JSON的总结

    JSON 是用于存储和传输数据的格式,通常用于服务端向网页传递数据 什么是 JSON? JSON英文全称 JavaScript Object Notation(JavaScript 对象表示法),是一 ...

  10. Oracle:ORA-12154: TNS:could not resolve the connect identifier specified

    ORA-12154: TNS: 无法解析指定的连接标识符 注册表:regedit 安装oracle后用Net Manager 配置好服务名称之后,测试成功,可是PL/SQL无法连接 http://we ...