·新输入类型
表单类型
1.交互:使用http协议在客户端和服务器端传输数据,使用get,post等方法提交数据。
2.代替js客户端校验:html5提供了新的输入类型:email,number,……
使用方法:
①email
<input type="email" name="user_email" />
②url
url类型会以get方式提交(即附在浏览器地址后方)
③number
max-最大值,min-最小值,step-步进修改值 value-初始值(后两个效果有待试验)
<input type="number" name="points" min="1" max="10" />
④range 同number,效果为滑块
⑤date pickers(需要格式化输入规范)
<input type="date" name="user_date"/>
效果代替了js日历插件(其他属性不一一列举,编写时可查询html5手册)
⑥color
提供色块选择(只有少数浏览器支持)
备注:使用效果会弹出悬浮提示框(跟具不同浏览器会返回不同效果)
表单属性
①Autofocus:使某个控件获得焦点
<input type=search name=query autofocus>(不写引号 不写结束符很不习惯……)
②Placeholder:文本框内灰色提示字体(点击失去)
<input type=email name=email placeholder="user@host.com">
③Required:必填项
……实在太多了不一个一个写了,看手册吧
·新元素
①meter:为了显示进度,就是进度条
<meter value="0.6">0.6</meter>
②progress:同meter
③datalist:自动实现下拉选择输入
<input list="cars"/>
<datalist id="cars">
<option value="a">
<option value="b">
</datalist>
④pattern:正则表达式
⑤keygen:加密传输数据
Encryption:<keygen name="security"/>
keytype属性,rsa也可以是其他加密方式
(这里没看懂)
⑥Output:自动提交计算结果
<input name="numa" type="number">+<input name="numb" type="number">=<output name="result" onforminput="value=numa.valueAsNumber+numb.valueAsNumber"></output>
·客户端校验
①Required:必填项
②checkValidity():校验函数
<input type=email name=email onchange="this.chekcValidity();">
③setCustomValidity():自定义校验函数
! = = html简化了一堆js,以后前端怎么混……
学员评论
vseng2014-03-12
薇薇安2013-05-29
你感兴趣的课程