HTML5 表单新增元素与属性【一】
日期：2014-05-17 浏览次数：20699 次
全局属性
所谓全局属性，是指可以对任何元素都使用的属性。
contentEditable属性
该属性允许用户编辑元素中的内容，所以该元素必须是可以获得焦点的元素，而且在点击鼠标后要向用户提供一个插入符号，提示用户该元素中的内容允许编辑。该属性是boolean类型的，可以被指定为true或false。
该属性还有个隐藏的inherit状态，属性为true时，元素被指定为允许编辑；为false时，元素被指定为不允许编辑；未指定时，则由inherit状态来决定。
除了该属性外，元素还具有一个isContentEditable属性，当元素可编辑时，该属性为true，否则为false。
要保存编辑后的内容，必须发送到服务器端进行保存。
designMode属性
该属性指定整个页面是否可编辑，当页面可编辑时，页面中任何支持contentEditable属性的元素都变为可编辑状态。该属性只能在JavaScript脚本里被编辑修改。该属性有“on”与“off”两个值。属性被指定为on时，页面可编辑，否则不可编辑。
使用JavaScript指定该属性的方法：
documents.designMode="on";?
hidden属性
在HTML5中，所有的元素都允许使用该属性，功能是通知浏览器不渲染该元素，使该元素处于不可见状态。但是元素中的内容还是浏览器创建的。
该属性是boolean类型的，设置为true时，元素处于不可见状态，否则元素处于可见状态。
spellcheck属性
该属性是HTML5针对文本输入框提供的新属性，功能是为对用户输入的文本内容进行拼写和语法检查。该属性是boolean类型的，书写方法如下：
<!-- 正确的写法 --> <textarea spellcheck="true"></textarea> <input type="text" spellcheck=false/> <!-- 错误的写法 --> <textarea spellcheck></textarea>
?注意：如果元素的readOnly属性或disabled属性为true时，则不执行拼写检查。
tabindex属性
该属性是开发中的一个基本概念，当不断敲击Tab键让窗口或页面中的控件获得焦点，对窗口或页面中的所有控制进行遍历的时候，每个控件的tabindex表示该控件是第几个被访问到的。
默认时只有链接元素与表单元素可以通过按键获得焦点。可以将不允许获得焦点的元素的tabindex属性设置为负数来拒绝得到焦点。
表单元素新增属性
form属性
在HTML5中，可以把表单中的从属元素写在页面的任何地方，然后给该元素指定一个form属性，其值为该表单的id，这样就可以声明该元素从属于指定表单了，示例如下：
<form id="testform"> <input type="text"/> </form> <textarea form="testform"></textarea>
formaction属性
在HTML5中，可以给所有的提交按钮增加不同的formaction属性，使得点击不同的按钮，可以将表单提交到不同的处理程序，示例如下：
<form id="testform" action="server.jsp"> <input type="submit" name="s1" value="提交到S1" formaction="s1.jsp"/> <input type="submit" name="s2" value="提交到S2" formaction="s2.jsp"/> <input type="submit" name="s3" value="提交到S3" formaction="s3.jsp"/> <input type="submit" value="提交"/> </form>
formmethod属性
在HTML5中，可以使用formmethod属性来对每个表单元素分别指定不同的提交方法，示例如下：
<form id="testform" action="server.jsp"> <input type="submit" name="s1" value="v1" formaction="s1.jsp" formmethod="post"/> <input type="submit" name="s2" value="v2" formaction="s2.jsp" formmethod="get"/> <input type="submit" value="提交"/> </form>
placeholder属性
该属性是指当文本框处于未输入状态时文本框中显示的输入提示，示例如下：
<input type="text" placeholder="input me"/>?
autofocus属性
给表单元素各控件加上该属性，当页面打开时，该控件自动获得焦点。一个页面上只能有一个控件具有该属性。使用方法如下：
<!-- 正确的使用格式 --> <input type="text" name="t1" autofocus/> <input type="text" name="t2" autofocus="autofocus"/>?
list属性
在HTML5中，为单行文本框增加了list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML5中新增的元素，该元素类似选择框（select元素），但允许输入不在列表中的选项值，该元素本身不显示，而是当文本框获得焦点时以提示输入的方式显示。使用方法如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>list属性示例</title> </head> <body> <label for="greeting">text:</label> <input type="text" id="greeting" name="greeting" list="greetings"/> <datalist id="greetings"> <option value="Good Morning">早上好</option> <option value="Hello">你好</option> <option value="Good Afternoon">下午好</option> </datalist> </body> </html>
autocomplete属性
该属性提供辅助输入所用的自动完成功能，并提供良好的安全性。该属性可以设置为“on”、“off”与“”（不指定）三个值，不指定时，使用浏览器的默认值，设置为on时，可以显示指定候补输入的数据列表，使用方法如下：
<input type="text" name="greeting" list="greetings" autocomplete="on"/>
