`
lucifinilhades
  • 浏览: 87581 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

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

HTML5元素属性 
阅读更多

全局属性

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

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"/>
分享到：
| jQuery 设置元素内容
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5中form表单的新增属性.ppt

    HTML5中form表单的新增属性.ppt

    HTML5新增属性与表单元素

    这些新增元素和属性的引入，极大地扩展了网页的功能，增强了用户交互体验，同时也简化了开发者的工作流程。 ### HTML5新增属性 #### 1.1 contextmenu属性 HTML5新增了`contextmenu`属性，用于指定右键菜单。在...

    HTML5新增的表单元素和属性实例解析

    在表单处理方面，HTML5新增了多个属性和元素，极大地丰富了网页上用户输入数据的方式。以下将详细介绍这些新增的表单元素和属性，以及它们的实例解析。 首先来看placeholder属性，这个属性用在`&lt;input&gt;`元素上，...

    HTML5表单中新增的input属性1.pdf

    HTML5在表单处理方面带来了许多增强和改进，特别是在input元素上添加了新的属性，以提升用户体验和数据验证。本文档主要关注HTML5中新增的三个input属性：autocomplete、autofocus和form。 1. **autocomplete属性**...

    详解HTML5表单新增属性

    1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方，然后为该元素指定一个form属性，属性值为该表单的id,这样就可以声明该元素从属于指定表单了 &lt;form id=testform&gt; &lt;input type=text&gt; &lt...

    HTML5表单中新增的input属性1案例.pdf

    在案例3中，`&lt;input type="text" name="address1" form="form1"&gt;`，虽然这个输入框位于`&lt;form&gt;`标签外部，但由于指定了`form`属性，其值与`&lt;form id="form1"&gt;`相匹配，因此这个输入框依然属于该表单，并且可以随表单...

    HTML5表单中新增的input属性3.pdf

    HTML5为表单带来了许多增强的功能，其中关键的一环是新增的input属性。这些属性使得表单输入更加灵活，提供了更好的用户体验和数据验证。以下是四个主要的新增属性的详细说明： 1. **multiple** 属性： 在HTML5...

    HTML5新增的表单元素.pdf

    本文主要讨论了三个重要的新增元素：`&lt;datalist&gt;`、`&lt;keygen&gt;`和`&lt;output&gt;`。 1. **`&lt;datalist&gt;`元素** `&lt;datalist&gt;`元素用于创建一个可选的下拉列表，为用户提供预设选项，方便用户快速选择，而无需手动输入。它...

    HTML5表单中新增的input属性2.pdf

    HTML5在表单功能上做了重大扩展，引入了一系列新的`input`属性，使得表单控件的使用更加灵活，提供了更强大的数据验证和用户体验。在本文档中，主要介绍了几个关键的新属性，包括`formaction`、`height`、`width`、`...

    HTML5表单中新增的input属性2案例.pdf

    HTML5在表单元素中引入了多个新的input属性，这些属性极大地增强了表单的功能和用户体验。以下是基于案例的三个关键属性的详细说明： 1. **image类型input的height和width属性** 在HTML5中，`&lt;input type="image"&gt;...

    bootstrap风格的html5表单验证示例

    1. **HTML5表单元素**：HTML5新增了多种表单元素，如`&lt;input type="email"&gt;`用于电子邮件输入，`&lt;input type="date"&gt;`用于日期选择，`&lt;input type="tel"&gt;`用于电话号码输入等。这些元素提供了内置的验证功能，减少了...

    HTML5表单中input元素及属性.pdf

    HTML5中的`&lt;input&gt;`元素是网页表单的核心组成部分，用于创建各种用户输入接口。它支持多种输入类型，使得开发者能够构建功能丰富的交互式表单。以下是对标题和描述中涉及的知识点的详细说明： 1. **输入类型（type...

    HTML5元素周期表

    周期表中的每个元素都代表着一个HTML标签，这些标签分为不同的类别，如文本内容元素、行内元素、块级元素、表格元素、表单元素、多媒体元素等。例如，`&lt;header&gt;`和`&lt;footer&gt;`用于定义页面头部和底部，`&lt;article&gt;`和`...

    html5表单及新增的改良元素详解

    在HTML5中，表单内的元素可以通过`form`属性与特定的表单关联，即使这些元素不在表单标签内部。例如，第8行的`&lt;textarea&gt;`通过`form="testform"`属性与`&lt;form id="testform"&gt;`关联，使得这个文本框成为表单的一部分...

    HTML5页面元素及属性.pptx

    此外，HTML5还增强了表单元素的功能，例如新增了`&lt;input type="date"&gt;`、`&lt;input type="email"&gt;`等输入类型，提高了数据验证的能力。同时，`&lt;canvas&gt;`元素提供了图形绘制能力，而`&lt;video&gt;`和`&lt;audio&gt;`元素则支持...

    HTML5（软件品牌）-1期 14 教学课件_单元5_HTML5的form元素及属性.pdf

    综上所述，HTML5的`&lt;form&gt;`元素、相关属性以及新增的`&lt;datalist&gt;`、`&lt;keygen&gt;`和`&lt;output&gt;`元素，极大地提升了表单处理的灵活性和用户体验。理解并熟练运用这些特性，对于构建现代化、交互性强的Web应用至关重要。

    HTML5（软件品牌）-1期 06 教学课件_单元1_HTML5新增的属性.pdf

    在这个教学课件中，我们主要关注的是HTML5新增的一些属性，这些属性极大地扩展了HTML元素的功能和交互性。 1. **contextmenu属性**：这个属性允许开发者自定义元素的右键上下文菜单。通过指定`&lt;menu&gt;`元素的ID，...

Magicbox
Global site tag (gtag.js) - Google Analytics