HTML5 表单新增元素与属性【1】
全局属性
所谓全局属性,是指可以对任何元素都使用的属性。
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"/>