HTML5读书笔记(二)
来源:互联网 发布:大数据行业 投融资 编辑:程序博客网 时间:2024/06/04 17:53
二HTML5表单
1.输入类型
<input type="email"
name="user_email" />
故名思议这个类型是验证email的输入格式,文本中必带“@.”要不然验证便不能通过。url
<input type="url"
name="user_url" />
url类型用于包含URL地址的输入域,比如XXXXX.com.
number
<input type="number"
name="points" min="1" max="10" />
number类型用于需要填入数值的的输入域。
range
<input type="range"
name="points" min="1" max="10" />
range类型用于需要填入一点数值的输入域,显示的时候为滑动条。(本人十分高兴不用写javascript验证啦)此表适用于number类型和range类型。
Date Pickers
<input type="date"
name="user_date" />
就像一个时间控件一样好用,type类型可选month,week(显示为第几周),time,datetime,datetime-local。浏览器支持
2表单元素
datelist
Webpage: <input type="url" list="url_list" name="link" />datelist元素规定输入域的选项列表(PS:本小程觉得还不如select来的有用,勿喷),其中option的value值必填。<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" /><option label="Google" value="http://www.google.com" /><option label="Microsoft" value="http://www.microsoft.com" /></datalist>
keygen
<form action="demo_form.asp" method="get">Username: <input type="text" name="usr_name" />Encryption: <keygen name="security" />
<input type="submit" /></form>
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
output
<!DOCTYPE HTML><html><head><script type="text/javascript">function resCalc(){numA=document.getElementById("num_a").value;numB=document.getElementById("num_b").value;document.getElementById("result").value=Number(numA)+Number(numB);}</script></head><body><p>使用 output 元素的简易计算器:</p><form onsubmit="return false"> <input id="num_a" /> + <input id="num_b" /> = <output id="result" onforminput="resCalc()"></output></form></body></html>
output用于接收显示各种类型。
浏览器支持3表单属性
form元素属性
autocomplete(规定form域拥有自动完成功能)
novalidateinput元素属性
atutocomplete(规定input域拥有自动完成功能)
atutofocus(页面加载是自动获得焦点)
form(规定该输入域属于一个或多个表单)
form override(formaction,forenctype,formmethod,fromnovalidate,formtarget)(表单重写属性,允许您重写form元素的某些属性设定)
height和width
list(list属性规定输入域的datelist,datelist是输入域的选项列表)
min(用于包含数字或日期的input类型,允许最小值)
max(用于包含数字或日期的input类型,允许最大值)
step(用于包含数字或日期的input类型,规定合法的数值间隔)
multiple(multiple属性规定输入域中可选择多个值)
pattern(regexp)(规定用于验证input域的模式)
placeholder(提供一种提示(hint),描述输入域所期待的值)
required(提供一种非空验证)
浏览器支持
(ps:至今为止写过最长的东西,除了工作中的文档,累,求勿喷)
- HTML5读书笔记(二)
- 《HTML5经典实例》读书笔记二
- HTML5读书笔记(一)
- HTML5读书笔记(三)
- HTML5读书笔记(四)
- HTML5读书笔记(五)
- HTML5 Web Storage(读书笔记)
- HTML5+CSS3(二)
- html5 文件系统(二)
- HTML5 基础知识(二)
- HTML5学习(二)
- HTML5简介(二)
- HTML5基础(二)
- HTML5总结(二)
- 初识HTML5(二)
- html5(标签二)
- TIJ读书笔记(二)
- [测试]读书笔记(二)
- HDU-2717-Catch That Cow
- openfire插件开发的几点说明
- struts和Hibernate整合,报错:java.lang.NoSuchMethodError: javax.persistence.OneToMany.orphanRemoval()Z
- Android中的几种网络请求方式详解
- cocos2d-x3.0创建第一个jsb游戏
- HTML5读书笔记(二)
- hdu 4422
- JQuery获取元素个数
- MultiBinding 实现动态传入参数 Combox选择性显示数据
- iOS下的RSA加密方法
- PHP
- 20130813 Funny Code Just For You at Chinese Valentine's Day
- HDU1232 畅通工程 解题报告
- CentOS6.4下Samba服务器的安装与配置