html5表单新特性
2016-01-10 14:44
603 查看
html5表单新特性
学习的笔记,记录备忘。效果图:
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name = "viewport" content="width=device-width,inital-scale=1,user-scalable=no"></meta> <title>form表单</title> <style> form{width:300px;line-height: 38px;} input{width:180px;height:27px;border-radius: 3px;border:1px solid #ABA9A9;font-size: 14px;padding-left: 6px;} input[type="color"],input[type="submit"]{width:90px;} #form_content,#article_content{float: left;} #article_content{padding-left: 50px;} </style> </head> <body> <section id="form_content"> <form> 用户名 : <input type="text" placeholder="Please enter username" autofocus="autofocus" required/><br /> 邮箱 : <input type="email" required/><br /> 个人主页:<input type="url" required/><br /> 生日:<input type="date" required/><br /> 完善程度:<input type="range" max="10" min="0" value="2" step="2"/><br /> 查找:<input type="search" results=s/><br /> 选择颜色:<input type="color" /><br /> <input type="submit" value="提交" formaction="OneController.java" formmethod="post"/> <input type="submit" value="取消" formaction="TwoController.java" formmethod="post"/> </form> </section> <section id="article_content"> <hgroup> <h2>表单新特性</h2> </hgroup> <article> <p>①type添加了很多新内容自行尝试,其验证效果没有Jquery.validate效果好</p> <p>②placeholder 提示信息</p> <p>③autofocus 聚焦</p> <p>④required 必填内容、pattern正则表达式验证</p> <p>⑤重写form属性formation指向action,formmethod请求方法</p> <p>⑥autocomplete="on/off" 打开或关闭自动补齐</p> </article> </section> </body> </html>
相关文章推荐
- 【html5】html5 本地存储
- HTML5调用摄像头实现拍照功能(兼容各大主流浏览器)
- 15个最好的HTML5前端响应式框架(2014)
- HTML5:组织文档结构
- 下拉菜单得经典写法html5
- HTML5 <label> 标签
- HTML5表单及其验证
- html5视频播放器
- html5新增元素
- 学习H5不错的书籍
- html5新增的type类型
- HTML5的LocalStorage、SessionStorage学习
- Iphone H5上传照片被旋转
- Iphone H5上传照片被旋转
- Iphone H5上传照片被旋转
- Html5-测试Canvas
- 图解用HTML5的popstate如何玩转浏览器历史记录
- 蓝欧h5课程笔记
- html5实战2
- Html5添加非常炫的图片3D背景视觉差特效插件教程