[html5] 学习笔记-改良的input元素种类
在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元素种类的更多相关文章
- HTML5增加与改良的input元素
h5中form表单中input新增的属性值 在HTML5中增加了许多新的标签和功能属性,今天我们来看一个Form表单在HTML5中新的使用方法.那么在HTML5中新加入的这个功能与之前咱们使用的功能区 ...
- [html5] 学习笔记-表单新增元素与属性
本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.for ...
- html5学习笔记(3)--主题结构元素-1
Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta char ...
- HTML5学习笔记三:aside元素,time元素与微格式
一.aside元素 表示当前页面或文章的附属信息部分,相关的引用,侧边栏,广告等有别于主要内容的部分:主要有一下两种用法: 1. 被包含在article元素中作为主要内容的附属信息部分,可以是与当前文 ...
- HTML5 改良的 input 元素的种类
html5中增加改良的input 元素 . 在过去我们制作网页输入框,会用到不少JS验证,如今有了HTML5写这种效果已经没有那么麻烦了,下面我来给大家介绍两种HTML5的input的新增加的类型应用 ...
- html5 学习笔记
一.ie8及以下对html5相关语义标签的支持 <!-[if lt IE9]> <script src="html5.js"></script> ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5学习笔记五:html5表单
表单是页面上非常重要的一块内容,用户可输入的大部分内容都是在表单元素中完成的,与后台的交互大多数也是通过点击表单中的按钮. 一.新增的元素和属性 1.新增属性: 1.1 form属性:页面中的任何元素 ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
随机推荐
- html5 WebSocket 与 PHP socket 聊天室原理
html js <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 用css制作一个三角形箭头
剑走偏锋——用css制作一个三角形箭头 通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...
- keil mdk中如何确保某一段程序不被优化掉(转)
源:keil mdk中如何确保某一段程序不被优化掉 使用mdk编程,假如有一个有用的函数你定义了但是没有显式的调用,mdk在默认方式下,将会把这个函数从整个程序总删除掉,以节省ROM. 比如,你在RO ...
- Reinstall the Arduino Pro Mini Bootloade ISP(转)
源:Reinstall the Arduino Pro Mini Bootloade ISP To resolve the errors I burned the bootloader to the ...
- mysql表明保存不了,多了空格都不行啊
mysql表明保存不了,多了空格都不行啊
- Linux开发IDE打造
一直以来都是在windows下做开发的,微软提供的IDE vs开发起来确实快捷高效,接触linux也很久了通常都是使用vim进行一些基础文件的编译,现在突然要转到linux做开发还是不太适应的,网上 ...
- 试水mongodb er
1)data ready var a = {"name":"zhekou","CharDate":"2015-12-01" ...
- 从损坏的wt文件中恢复出WiredTiger集合
Reference: http://dev.guanghe.tv/2016/06/recovering-a-wiredtiger-collection-from-a-corrupt-wt-file.h ...
- 【Xilinx-Petalinux学习】-07-OpenCV的软硬件处理速度对比
有空了设计一个hls的图像处理IP. 通过hls设计ip模块实现opencv的图像处理. 对比软件和硬件的图像处理速度.
- poi 导出excel 异常处理方式--曲线救国法
excel 导出不算什么新鲜的话题.目前各种生成excel的开源jar包,poi,jxtl等.但是下载过程中如果出现异常该如何处理呢. 翻了之前的几个项目中的excel导出,有的异常就直接抛了出去,有 ...