`
xiaopo123
  • 浏览: 9470 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

HTML 5 表单元素

 
阅读更多

原文链接:http://bang.chinabyte.com/thread-416701-1-1.html

 

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="W3School" value="http://www.W3School.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>

分享到:
评论

相关推荐

    html5表单元素及验证

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

    HTML5 表单元素

    HTML5 表单元素 HTML5 新的表单元素 HTML5 有以下新的表单元素: 注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。 HTML5 元素 ...

    WEB开发 之 HTML5 表单元素.docx

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

    bootstrap风格的html5表单验证示例

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

    H5表单美化

    1. 新增表单元素:HTML5引入了新的表单元素,如`&lt;input type="date"&gt;`, `&lt;input type="email"&gt;`, `&lt;input type="range"&gt;`等,这些元素提供了更好的用户体验,例如内置的日期选择器或电子邮件验证。 2. 语义化标签:...

    HTML5+CSS3 新的表单元素.pdf

    在HTML5中,表单元素得到了显著增强,引入了一些新的输入类型和元素,为用户交互提供了更多可能性。让我们详细探讨一下这些新的表单元素。 1. **Datalist元素** Datalist元素用于创建一个预定义的选项列表,供用户...

    HTML5新增属性与表单元素

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

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

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

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

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

    polyformfill:HTML5 表单元素的 Polyfill 脚本

    填充 HTML5 表单元素的 Polyfill 脚本。 目前支持: 输入[类型=日期] 输入[类型=时间]安装您可以使用npm或bower安装此软件包。新产品经理npm install polyformfill凉亭bower install polyformfill用法只需将[removed...

    H5自适应登录和注册表单

    1. **HTML5表单元素**: HTML5为表单提供了更多的内置控件,如`&lt;input type="email"&gt;`用于输入电子邮件地址,`&lt;input type="password"&gt;`用于密码输入,以及`&lt;input type="tel"&gt;`用于电话号码等。这些元素不仅提高了...

    一款html5表单样式美化select单选框表单提交代码.zip

    这款"html5表单样式美化select单选框表单提交代码.zip"的资源提供了对HTML5表单元素,特别是`&lt;select&gt;`单选框进行美化的方法,以提升用户界面的视觉吸引力和用户体验。下面将详细介绍相关知识点: 1. **HTML5表单**...

    实验4 通过HTML5表单与用户交互(4学时).zip

    1. **HTML5表单元素**:HTML5引入了新的表单元素,如`&lt;input type="date"&gt;`(日期选择器)、`&lt;input type="email"&gt;`(电子邮件输入)、`&lt;input type="range"&gt;`(滑动条)等,这些元素提供了更好的用户体验,并且在...

    css3+html5彩色表单.zip

    HTML5引入了新的表单元素,如`&lt;input type="date"&gt;`(日期选择)、`&lt;input type="email"&gt;`(电子邮件输入)和`&lt;input type="range"&gt;`(滑块控件),这些元素提供了更好的用户体验和数据验证。它们还支持自定义属性,...

    漂亮的表单验证样式,纯HTML

    HTML5引入了许多新的表单元素,如`&lt;input type="email"&gt;`用于邮箱验证,`&lt;input type="tel"&gt;`用于电话号码验证,以及`&lt;input type="date"&gt;`用于日期选择。这些元素在不同的浏览器中提供了内置的验证功能,例如检查...

    html5带步骤的问卷表单提交.zip

    1. **HTML5表单元素**:HTML5引入了新的表单控件,如`&lt;input type="date"&gt;`、`&lt;input type="email"&gt;`和`&lt;input type="range"&gt;`等,这些元素为用户提供了更好的输入体验,并且在验证数据时提供了更多的内置支持。...

    HTML5的表单元素

    HTML5的表单元素

    html5用户注册表单进度条提示js特效.zip

    1. HTML5表单元素:HTML5引入了许多新表单元素,如`&lt;input type="email"&gt;`用于电子邮件输入,`&lt;input type="password"&gt;`用于密码输入等。这些元素提供了更好的数据验证和用户体验。在实现进度条提示时,我们需要将...

    HTML5登录注册表单切换代码.zip

    1. HTML5表单元素:HTML5引入了许多新的表单元素,如`&lt;input type="email"&gt;`用于输入电子邮件地址,`&lt;input type="password"&gt;`用于密码输入,以及`&lt;fieldset&gt;`和`&lt;legend&gt;`用于组织和描述表单字段。这些元素提高了...

Global site tag (gtag.js) - Google Analytics