HTML5 INPUT新增属性
HTML5的input标签新增了很多属性,也是让大家非常兴奋的一件事,用简单的一个属性搞定以前复杂的JS验证。input新增的这些属性,使得html和js的分工更明确了,使用起来十分舒畅。
我们先看下input新增了的属性:
新增属性一:autoconmplete
autoconmplete可以赋值为 on 或者 off。当为 on的时候,浏览器能自动存储用户输入的内容。当用户返回到曾经填写过值的页面的时候,浏览器能把用户写过的值自动填写在相应的input框里。
现在很多网站都实现了这个功能,不过基本都是用php来实现的。用了这个属性,无疑可以减少很多前端和后台的交流量和工作量。
新增属性二:autofocus
autofocus 可以赋值为 autofocus,也就是在页面加载完成的时候自动聚焦到这个input标签,自然 type="hidden"的时候是不能用的。 这个也是一个比较常见的效果,至今为止的实现方法是用js。在页面加载完时执行聚焦操作,现在也被一个属性搞定了。
可以想象,一个页面至多只有一个input标签会设置 autofocus,否则必然不会达到预期效果。因为不可能同事聚焦在两个input上。
新增属性三:required
input的有一个强力新增属性,免去验证的麻烦。可以赋值为 required。
比如用户注册页面的用户名和密码都是必填的,只要设置一个required就可以了。而在以前是需要js来验证或者后台验证的。
注意:这里required属性是需要用户来填写的,所以TYPE是button、submit、reset、image等等不需要用户填写选择的类型是不可以使用这个属性的。
新增属性四:placeholder
这个新增属性也是非常使用,用在type= text email等等类型的时候,提示用户输入信息的格式或者内容等等。这个效果在之前也是需要js来实现的。是一种比较常见的效果:
Name:
Address:
HTML5 INPUT新增属性
新增属性五:新增list属性---联想框效果
这个属性显示类似于百度搜索框那种联想框效果,也是非常实用的一个属性。
注意从这个属性使用的特点:需要有对应的datalist标签;datalist子标签option支持 value和lable两个属性;list的属性值要和datalist的id一致。
使用示例 (opera支持)
HTML5 INPUT新增属性的更多相关文章
- Html5 input placeholder 属性字体颜色修改。
这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下 Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...
- HTML5 input date属性引起的探索——My97DatePicker(日期选择插件)
不得不说H5的input date属性真的好用,之前我写的http://www.cnblogs.com/tu-0718/p/6729274.html这篇博客里面也有提到,不过虽然移动端对H5的支持还是 ...
- HTML5 input新增的几种类型(数字、日期、颜色选取、范围)
你可能已经听说过,HTML5里引入了几种新的input类型.在HTML5之前,大家熟知的input类型包括:text(输入框),hidden(隐藏域),submit(提交按钮)等.而HTML5到来之后 ...
- 上传文件,不依赖 Jquery flash 插件,用到HTML5 input 新属性实现过滤文件格式、同时上传多个文件
1.样式 2.js 3.后台处理 4.效果图 一.样式 <style> .divUpload { position: relative; } .divUploadFirst { width ...
- html5 <input> placeholder 属性
带有 placeholder 文本的搜索字段: <form action="demo_form.asp" method="get"> <inp ...
- HTML5中input新增类型+表单新增属性+其他标签属性
@ (猴头) Input 新增属性 email 邮箱(只在手机端有效) url 网址(只在iphone手机有效) tel 手机号(只在手机端有效) number 数字(右侧有上下按钮,只能输入 ...
- HTML5新增input标签属性
一. input type属性 <form action=""> 邮箱<input type="email" name="" ...
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- html5中新增的form表单属性
html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...
随机推荐
- 小白日记52:kali渗透测试之Web渗透-HTTPS攻击(Openssl、sslscan、sslyze、检查SSL的网站)
HTTPS攻击 全站HTTPS正策划稿那位潮流趋势 如:百度.阿里 HTTPS的作用 CIA 解决的是信息传输过程中数据被篡改.窃取 [从中注入恶意代码,多为链路劫持] 加密:对称.非对称.单向 HT ...
- #pragma weak
采用 #pragma weak name 形式时,指令使 name 成为弱符号.链接程序没有找到 name 的符号定义时,不会显示错误消息,也不会出现符号的多个弱定义的错误消息.链接程序仅执行第一个遇 ...
- MVC框架 - AJAX支持
Ajax是异步JavaScript和XML的一个简写形式.MVC框架包含了不显眼的Ajax内置支持,通过它可以使用辅助方法,在所有的视图添加代码来定义Ajax特性. 在MVC中此特征是基于jQuery ...
- request.getHeader("Referer")理解【转载】
request.getHeader("Referer")用于获取来源页地址,但有时却为空值,这是怎么回事.原因如下: getHeader("Referer")要 ...
- Apache 日志分析(一)
日志格式: 101.38.166.177 – – [10/Jun/2016:14:19:19 +0800] “POST /wp-admin/admin-ajax.php HTTP/1.1” 200 1 ...
- Http error code
概要 当用户试图通过HTTP或文件传输协议(FTP)访问一台正在运行Internet信息服务(IIS)的服务器上的内容时,IIS返回一个表示该请求的状态的数字代码.该状态代码记录在IIS日志中,同时也 ...
- WPF 多语言 多资源 多皮肤 处理方案
同时兼容这么多需求的解决方案 我想到的 只有通过 动态切换加载资源字典 前端用绑定的模式 达到托管最大化 多语言举例 我编辑了 两个 语言包 一个中文 一个英文 (语言包这个最好用T4 写个模板, ...
- Part 36 to 39 Talking about Delegates in c#
Part 36 Delegates in c# Part 37 Delegates usage in c# class Progim { public static void Main() { Lis ...
- 如何防止Android应用代码被窃
上一篇我们讲了apk防止反编译技术中的加壳技术,如果有不明白的可以查看我的上一篇博客http://my.oschina.net/u/2323218/blog/393372.接下来我们将介绍另一种防止a ...
- 【学习笔记】【C语言】指针
一.指针变量的定义 1. 格式:变量类型 *指针变量名; 2. 举例:int *p; char *p2; 3. 注意:定义变量时的*仅仅是指针变量的象征 二.利用指针变量简单修改其他变量的值 1. ...