在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. 根据XPATH去查看修改xml文件节点的内容

    首先给出xml文件解析的路径,然后去读取节点的内容. package com.inetpsa.eqc.threads; import java.util.List; import java.io.Fi ...

  2. iOS开发之隐藏tabbar--解决隐藏后依然不能响应对应位置事件的问题

    状态条StatusBar 1 [UIApplication sharedApplication].statusBarHidden = YES; 导航条NavigationBar 1 [self.nav ...

  3. transform和transition

    作者:zccst 例如:图片墙  .另外还有,便签墙 使用的样式: 1,正常情况下 ul#index_cards li {     background: url("../images/ca ...

  4. windows下查找指定端口被哪个程序占用

    在Windows环境下,用netstat命令查看某个端口号是否占用,为哪个进程所占用. eg.查看端口号为61078被哪个程序占用 1.查看端口号为61079被哪个PID所占用:Netstat –an ...

  5. java学习(二)--excel导出

    public static String writeFile(String fileName, String[][] content) { WritableWorkbook wwb = null; S ...

  6. IOS开发－UI学习－UIPageControl（页码控制器）的使用

    UIPageControl即页码控制器,是在翻动图片阅览时下面显示的几个小点,属性设置如下: UIPageControl *pagecontrol = [[UIPageControl alloc]in ...

  7. 【转】安卓布局：layout_weight的理解

    android:layout_weight详细分析介绍: 布局文件是:<?xml version="1.0" encoding="utf-8"?>& ...

  8. UnitOfWork实战

    企业模式之Unit Of Work模式 在开始UnitOfWork模式之前有必要回顾下我们耳熟能详的Data Access Object(DAO)模式,即数据访问对象.DAO是一种简单的模式,我们构建 ...

  9. C#常用网址

    C# 编程指南 https://msdn.microsoft.com/zh-cn/library/67ef8sbd.aspx

  10. Iphone安装铃声

    PP助手 应用列表中打开铃声多多文档. 5点击铃声下载,找到下载的铃声,按下图所示步骤导出至电脑. 6在PP助手界面内,找到"视频音乐"标签,然后进入视频音乐分类下的铃声分类,点击 ...