欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML5 表单新增元素与属性【1】

程序员文章站 2022-07-08 20:22:09
...

全局属性

所谓全局属性,是指可以对任何元素都使用的属性。

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