`
zhongming_software
  • 浏览: 7472 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

HTML5(七).HTML5 表单元素

阅读更多
HTML5 表单元素

HTML5 的新的表单元素:

HTML5 拥有若干涉及表单的元素和属性。

本章介绍以下新的表单元素:
  • datalist
  • keygen
  • output

   
浏览器支持


datalist 元素

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

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:
实例
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="3wschool" value="http://www.3wschool.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>


提示:option 元素永远都要设置 value 属性。

keygen 元素

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

keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。

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

目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
实例

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

output 元素

output 元素用于不同类型的输出,比如计算或脚本输出:
实例

<output id="result" onforminput="resCalc()"></output>
  • 大小: 16.8 KB
分享到:
评论

相关推荐

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

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

    WEB开发 之 HTML5 表单元素.docx

    HTML5 新的表单元素 HTML5 中新增加了多个表单元素和属性,以增强表单的功能和安全性。本文将介绍三个新的表单元素:datalist、keygen 和 output。 datalist 元素 datalist 元素规定输入域的选项列表。列表是通过...

    HTML5新增属性与表单元素

    HTML5作为最新的超文本标记语言标准,相较于上一版本HTML4,带来了许多新特性,其中包括新增的表单元素和属性。这些新增元素和属性的引入,极大地扩展了网页的功能,增强了用户交互体验,同时也简化了开发者的工作...

    html5表单元素及验证

    自己总结的一些html5表单元素以及表单验证,希望对大家有用!!

    证提示HTML5表单.rar_doorevd_证提示HTML5表单

    首先,HTML5引入了新的表单元素和属性,如`&lt;input type="email"&gt;`用于电子邮件输入,`&lt;input type="tel"&gt;`用于电话号码输入,以及`&lt;input type="date"&gt;`用于日期选择等,这些元素可以帮助浏览器自动格式化和验证输入...

    bootstrap风格的html5表单验证示例

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

    实验三-HTML表格与HTML表单.doc

    HTML 表格由多个表格单元格组成,每个单元格可以包含文本、图像、表单元素等内容。HTML 表格的基本结构由 `&lt;table&gt;` 标记定义,表格的行和列由 `&lt;tr&gt;` 和 `&lt;td&gt;` 标记定义。 在实验报告中,我们可以看到,HTML 表格...

    HTML5新增的表单元素.pdf

    HTML5在表单元素方面引入了多项改进,旨在提高网页交互性和用户体验。本文主要讨论了三个重要的新增元素:`&lt;datalist&gt;`、`&lt;keygen&gt;`和`&lt;output&gt;`。 1. **`&lt;datalist&gt;`元素** `&lt;datalist&gt;`元素用于创建一个可选的...

    Tooltip验证提示HTML5表单.zip

    1. **HTML5表单验证**:HTML5引入了新的表单元素和属性,如`&lt;input type="email"&gt;`用于电子邮件输入,`&lt;input type="number"&gt;`用于数字输入,以及`required`属性用于确保字段非空。此外,还有`pattern`属性允许...

    HTML5注册表单单页模板下载_注册 表单 HTML5 登陆.zip

    1. **HTML5表单元素**:HTML5引入了新的表单元素,如`&lt;input type="email"&gt;`用于输入电子邮件地址,`&lt;input type="tel"&gt;`用于电话号码,`&lt;input type="date"&gt;`用于日期选择等,这些元素提供了更好的用户体验和数据...

    HTML5表单的基本元素.pdf

    总结,HTML5的表单元素极大地增强了用户界面的交互性和数据收集的灵活性。通过合理使用这些元素,开发者可以创建出更加直观、用户友好的网页应用。对于初学者来说,理解并熟练掌握这些基本元素是成为优秀前端开发者...

    HTML5+CSS3 新的表单元素.docx

    HTML5和CSS3为网页设计带来了许多新特性,尤其是在表单元素方面。这些改进使得表单交互更加直观、用户友好,同时提供了更好的数据验证和安全性。让我们深入探讨一下HTML5中新增的三个表单元素:Datalist、Keygen和...

    jQuery复制移除表单元素代码.zip

    总结来说,这个示例项目主要展示了如何使用jQuery 1.7.2来动态管理HTML表单元素,包括复制和移除,这对于构建交互式Web应用是非常基础且重要的技能。实际代码细节需要参考`jQuery复制移除表单元素代码`文件进行学习...

    HTML input type=file文件选择表单元素.docx

    二、HTML5 中的 input type=file 文件选择表单元素 随着 HTML5 的出现,原生的 file input 表单元素迎来了新的升级。HTML5 中的 input type=file 元素支持多图上传、上传前预览、二进制上传等功能,取代了 ...

    HTML5 CSS3 jQ注册表单.zip

    总结来说,HTML5提供强大的表单元素和数据验证,CSS3实现响应式布局和美化效果,而jQuery则简化了交互和动画的实现。这个"HTML5 CSS3 jQ注册表单"是这三个技术完美融合的实例,对于学习者和开发者来说,是一个很好的...

    HTML5注册表单单页模板下载-注册 表单 HTML5 登陆.rar

    此模板可能包含了以下HTML5表单元素: 1. `&lt;form&gt;` 标签:定义了表单的基本结构,通常包含输入字段、按钮和其他表单控件。 2. `&lt;input&gt;` 标签:用于创建各种类型的输入字段,如文本输入框(type="text")、电子邮件...

    HTML5响应式客户留言信息表单页面模板.zip

    1. **表单元素**:如`&lt;form&gt;`、`&lt;input&gt;`、`&lt;textarea&gt;`等,用于收集用户信息,如姓名、邮箱、电话、订单详情等。 2. **响应式布局**:通过CSS3的媒体查询,定义不同屏幕尺寸下的样式规则,确保表单在不同设备上都能...

    HTML5注册表单单页模板下载_注册表单HTML5登陆.rar

    HTML5引入了新的表单属性和元素,比如`required`属性用于验证输入的必填性,`pattern`属性可以设置自定义的正则表达式校验,以及`placeholder`属性为输入框提供提示文本。还有`&lt;output&gt;`元素用于显示计算结果或表单...

    HTML5+CSS3 新的表单元素.docx

    在HTML5中,表单元素得到了显著增强,引入了一些新的输入类型、属性以及元素,提高了用户体验和数据验证能力。这里我们将详细探讨HTML5新增的三个表单元素:Datalist、Keygen和Output。 1. Datalist元素 Datalist...

    一个基于html5的表单.zip

    1. **新表单元素**:HTML5引入了一些新的表单元素,如`&lt;input type="date"&gt;`用于日期选择,`&lt;input type="email"&gt;`用于电子邮件输入,`&lt;input type="range"&gt;`创建滑块控件,以及`&lt;output&gt;`用于显示计算结果或脚本...

Global site tag (gtag.js) - Google Analytics