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

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"/>
分享到:
评论

相关推荐

    PHP语言基础知识详解及常见功能应用.docx

    本文详细介绍了PHP的基本语法、变量类型、运算符号以及文件上传和发邮件功能的实现方法,适合初学者了解和掌握PHP的基础知识。

    公司金融课程期末考试题目

    公司金融整理的word文档

    适用于 Python 应用程序的 Prometheus 检测库.zip

    Prometheus Python客户端Prometheus的官方 Python 客户端。安装pip install prometheus-client这个包可以在PyPI上找到。文档文档可在https://prometheus.github.io/client_python上找到。链接发布发布页面显示项目的历史记录并充当变更日志。吡啶甲酸

    DFC力控系统维护及使用

    DFC力控系统维护及使用

    Spring Data的书籍项目,含多数据库相关内容.zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。

    2019-2023GESP,CSP,NOIP真题.zip

    2019-2023GESP,CSP,NOIP真题.zip

    基于 Gin + Element 实现的春联生成平台

    博文链接 https://blog.csdn.net/weixin_47560078/article/details/127712877?spm=1001.2014.3001.5502

    zetero7实测可用插件

    包含: 1、jasminum茉莉花 2、zotero-style 3、greenfrog 4、zotero-reference 5、translate-for-zotero 用法参考:https://zhuanlan.zhihu.com/p/674602898

    简单的 WSN 动画制作器 matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    毕业设计&课设_仿知乎社区问答类 App 项目:吉林大学毕业设计,含代码、截图及相关说明.zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。

    python技巧学习.zip

    python技巧学习.zip

    2023 年“泰迪杯”数据分析技能赛 A 题 档案数字化加工流程数据分析

    2023 年“泰迪杯”数据分析技能赛 A 题 档案数字化加工流程数据分析 完整代码

    life-expectancy-table.json

    echarts 折线图数据源文件

    此扩展现在由 Microsoft fork 维护 .zip

    Visual Studio Code 的 Python 扩展Visual Studio Code 扩展对Python 语言提供了丰富的支持(针对所有积极支持的 Python 版本),为扩展提供了访问点,以无缝集成并提供对 IntelliSense(Pylance)、调试(Python 调试器)、格式化、linting、代码导航、重构、变量资源管理器、测试资源管理器等的支持!支持vscode.devPython 扩展在vscode.dev (包括github.dev )上运行时确实提供了一些支持。这包括编辑器中打开文件的部分 IntelliSense。已安装的扩展Python 扩展将默认自动安装以下扩展,以在 VS Code 中提供最佳的 Python 开发体验Pylance - 提供高性能 Python 语言支持Python 调试器- 使用 debugpy 提供无缝调试体验这些扩展是可选依赖项,这意味着如果无法安装,Python 扩展仍将保持完全功能。可以禁用或卸载这些扩展中的任何一个或全部,但会牺牲一些功能。通过市场安装的扩展受市场使用条款的约束。可

    Centos6.x通过RPM包升级OpenSSH9.7最新版 升级有风险,前务必做好快照,以免升级后出现异常影响业务

    Centos6.x通过RPM包升级OpenSSH9.7最新版 升级有风险,前务必做好快照,以免升级后出现异常影响业务

    5 总体设计.pptx

    5 总体设计.pptx

    用于执行 RPA 的 Python 包.zip

    Python 版 RPAv1.50  • 使用案例•  API  参考 • 关于 和制作人员 • 试用云 •  PyCon 视频 •  Telegram 聊天 • 中文 •  हिन्दी  • 西班牙语 • 法语 •  বাংলা  •  Русский  • 葡萄牙语 • 印尼语 • 德语 • 更多..要为 RPA(机器人流程自动化)安装此 Python 包 -pip install rpa要在 Jupyter 笔记本、Python 脚本或交互式 shell 中使用它 -import rpa as r有关操作系统和可选可视化自动化模式的说明 -️‍ Windows -如果视觉自动化有故障,请尝试将显示缩放级别设置为推荐的 % 或 100% macOS -由于安全性更加严格,请手动安装 PHP并查看PhantomJS和Java 弹出窗口的解决方案 Linux -视觉自动化模式需要在 Linux 上进行特殊设置,请参阅如何安装 OpenCV 和 Tesseract Raspberry Pi - 使用此设置指南在 Raspberry Pies(低成本自

    原生js识别手机端或电脑端访问代码.zip

    原生js识别手机端或电脑端访问代码.zip

    极速浏览器(超快速运行)

    浏览器

    基于SpringBoot和Vue的旅游可视化系统设计与实现

    内容概要:本文介绍了基于Spring Boot和Vue开发的旅游可视化系统的设计与实现。该系统集成了用户管理、景点信息、路线规划、酒店预订等功能,通过智能算法根据用户偏好推荐景点和路线,提供旅游攻略和管理员后台,支持B/S架构,使用Java语言和MySQL数据库,提高了系统的扩展性和维护性。 适合人群:具有一定编程基础的技术人员,特别是熟悉Spring Boot和Vue框架的研发人员。 使用场景及目标:适用于旅游行业,为企业提供一个高效的旅游推荐平台,帮助用户快速找到合适的旅游信息和推荐路线,提升用户旅游体验。系统的智能化设计能够满足用户多样化的需求,提高旅游企业的客户满意度和市场竞争力。 其他说明:系统采用现代化的前后端分离架构,具备良好的可扩展性和维护性,适合在旅游行业中推广应用。开发过程中需要注意系统的安全性、稳定性和用户体验。

Global site tag (gtag.js) - Google Analytics