1、placeholder:其属性值就会默认显示
为占位符文字,输入框获取焦点时该文字自动消失。当输入框失去焦点且没有任何输入
值时,占位符文字则会再次显示
required:布尔类型的属性(也就是
说你可以选择追加或不追加该属性),则表明该表单域是否为必填项
如果表单提交时该必填
项没有任何信息,浏览器则会显示警告信息
警告信息的显示方式(包括显示内容和样
式)取决于浏览器与输入框类型。
建议追加个等价的WAI-ARIA 属性:aria-required="true"
range、color、
button 和hidden 类型的输入元素则不能使用required
autofocus:可以让表单在加载完成时就有一个表单域被默认聚焦(或选中),以便于用户输入
使用时,需谨慎,因为,如果有多个表单域都被追加了autofocus 属性,则会造成跨浏览
器混乱
例如有多个表单域追加了autofocus 属性时:
Chrome(v16):聚焦到最后一个使用autofocus的表单域
Firefox(V9):聚焦到最先使用autofocus的表单域
autocomplete:设置自动完成功能的的开关 (off、on)
list(及对应的datalist 元素):让用户在输入框中开始输入值的时候,显示
一组备选值
<div>
<label for="awardWon">Award Won</label><input id="awardWon" name="awardWon" type="text" list="awards"><datalist id="awards">
<select><option value="Best Picture"></option><option value="Best Director"></option><option value="Best Adapted Screenplay"></option><option value="Best Original Screenplay"></option>
</select></datalist>
</div>
list 属性中的值(awards)同时也是datalist 元素的id。这样就可以让datalist
与输入项关联起来
2、HTML5 的新输入类型
email:type=“email”支持它的浏览器会期望用户的输入匹配电子邮箱的格式
许多触摸屏设备(如Android、iPhone 等等)会根据输入类型改变键盘模式。
number:type=“number”支持该特性的浏览器期望输入一个数字。这种输入类型默认还提供
控制按钮,允许用户简单地点击向上或向下来改
变数值。
<div>
<label for="yearOfCrime">Year Of Crime</label><input id="yearOfCrime" name="yearOfCrime" type="number" min="1929"max="2015" required aria-required="true" >
</div>
url:type="url" URL 输入类型用于输入URL 地址。触摸屏设备也会为URL 输入框修改键盘模式
tel:type="tel" 是另一种用于收集联系人信息的输入类型。tel 表示表单域期望输入一个电
话号码
触摸屏设备为这种类型贴心地提供
了数字键盘以便完成输入。
search: type="search" 和普通文本输入框的表现基本一样,仅在个别浏览器中渲染得有点
细微差别
pattern: type="pattern" 通过正则表达式来定义表单域的数据格式
<div>
<label for="name">Your Name (first and last)</label><input id="name" name="name" pattern="([a-zA-Z]{3,30}\s*)+[a-zA- Z]{3,30}"placeholder="Dwight Schultz" required aria- required="true" >
</div>
color: 会在支持该特性的浏览器中生成一个颜色选择器,让用户可以选择
十六进制的颜色值
3、日期和时间输入类型
date:大多数浏览器默认
都将其渲染为标准的文本输入框,少数几个渲染层日历输入
<input id="date" type="date" name="date" />
month:选择器界面允许用户选择某个月,输入框中会被填充为年和月组成的值
<input id="month" type="month" name="month">
week:使用week 类型时,选择器允许用户选择一年中的某一周
<input id="week" type="week" name="week">
time:time 输入类型允许输入一个24 小时制的时间值,在支持该特性的浏览器中,会显示出加减控制按钮,且仅允许输入时间值
<input id="time" type="time" name="time">
datetime 和datetime-local:日期时间选择器,其在iOS 设备上的显示效果更好
datetime-local 输入类型和datetime 几乎完全一样,只是省略了时区信息。
range : 输入类型会生成一个滑动条
type="range"
加入js获取当前值:
<input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10"
value="5" οnchange="showValue(this.value)">
<span id="range">5</span>
<script>
function showValue(newValue){
document.getElementById("range").innerHTML=newValue;
}
</script>
4、如何给不支持新特性的浏览器打补丁
JavaScript 框架叫做Modernizr(
http://www.modernizr.com),用于向缺少HTML5/CSS3 特性支持的浏览器打补丁。
由Alexander Farkas 编写的 “Webshims Lib”(
http://afarkas.github.com/webshim/demos/)就是构建于Moderniz 和无处 不在的jQuery 之上 的,它可用于插入表单补丁(也可以为其他HTML5 特性打补丁),从 而使不支持新特性的浏览器可以处理HTML5 表单
首先下载 Webshims Lib(
http://github.com/aFarkas/webshim/downloads
)并解压。然后将
其中的js-webshim 文件夹复制到相应的位置。为简便起见,本例中我将其拷贝到网站的
根目录,然后在页面的<head>部分加入如下代码:
<script src="js/jquery-1.7.1.js"></script>
<script src="js-webshim/minified/extras/modernizr- custom.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
//加载补丁
$.webshims.polyfill();
</script>
现在,浏览器缺失的新功能都会通过相关补丁脚本被自动追加进来
5、针对表单的 CSS3 伪类选择器
input:required:选择必填表单域;
input:focus:invalid:选择当前聚焦的且含有非法输入值的表单域;
input:focus:valid:选择当前聚焦的且含有合法输入值的表单域。