HTML5 新表单元素

不言

发布时间：2018-05-08 11:09:59

1512人浏览过

来源于php中文网

原创

这篇文章主要介绍了关于html5 新表单元素，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

HTML5 元素

元素规定输入域的选项列表

属性规定form或input域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项；

使用元素的列表属性与元素绑定。

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
		
	</head>
	<body > 
		<form action="demo-form.php" method="get">
			<input list="browsers" name="browser">
			<datalist id="browsers">
				<option value="Internet Explorer"></option>
				<option value="Firefox"></option>
				<option value="Chrome"></option>
				<option value="Opera"></option>
				<option value="Safari"></option>
			</datalist>
			<input type="submit">
		</form>
		
		<p>
			<strong>注意：</strong>Internet Explorer 9， Safari 不支持 datalist 标签。
		</p>
		
	</body>
</html>

HTML5 元素

元素的作用是提供一种验证用户的可靠方法。

液态的表单元素ui动画特效

html5基于svg绘制简洁的表单元素，单选按钮，切换按钮，多选按钮，提交按钮ui液态动画特效。

下载

标签规定用于表单的密钥对生成器字段。

当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
		
	</head>
	<body > 
		<form action="demo-form.php" method="get">
			用户名：<input list="text" name="usr_name">
			密码：<keygen name="security">
			</datalist>
			<input type="submit">
		</form>
		
		<p>
			<strong>注意：</strong>Internet Explorer 不支持 keygen标签。
		</p>
		
	</body>
</html>

HTML5 元素

元素用于不同类型的输出，比如计算或脚本输出：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
		
	</head>
	<body > 
		<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0
			<input type="range" id="a" value="50"> 100
			+<input type="number" id="b" value="50">
			=<output name="x" for="a b"></output>
		</form>
		
		<p>
			<strong>注意：</strong>Internet Explorer 不支持 output 标签。
		</p>
		
	</body>
</html>

HTML5 新表单元素

标签	描述
	标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
	标签规定用于表单的密钥对生成器字段。
	标签定义不同类型的输出，比如脚本的输出。

HTML5离线缓存怎么打包_HTML5manifest文件编写规则与清单生成教程【指南】

HTML5表单密码强度怎么测_HTML5实时检测密码复杂度JS实现教程【操作】

如何彻底禁用 HTML5 视频下载功能（基于 Blob URL 的安全实践）

HTML5拖拽文件预览缩略图_HTML5FileReader读取图片生成预览图方法【详解】

HTML5MathML公式显示乱码_HTML5数学符号编码格式转换教程【方法】

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

相关专题

Golang 测试体系与代码质量保障：工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链（如go test）、单元测试、集成测试及端到端测试实践，结合代码覆盖率分析、静态代码扫描（如go vet）和动态分析工具，建立全链路质量监控机制。通过自动化测试框架、持续集成（CI）流水线配置及代码审查规范，实现测试用例管理、缺陷追踪与质量门禁控制，确保代码健壮性与可维护性，为高可靠性工程系统提供质量保障。

2026.02.28

Golang 工程化架构设计：可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则，涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术，帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

2026.02.28

Golang 性能分析与运行时机制：构建高性能程序

Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面，深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略，并结合实际案例剖析 Go 程序的运行时行为，帮助开发者掌握构建高性能应用的关键技能。

2026.02.28