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"/>

你可能感兴趣的:(html5,属性,元素)