HTML5 表单元素

HTML5 的新的表单元素:

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

本章介绍以下新的表单元素:

  • datalist
  • keygen
  • output

浏览器支持

Input type IE Firefox Opera Chrome Safari
datalist No No 9.5 No No
keygen No No 10.5 3.0 No
output No No 9.5 No No

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 总结-表单-表单元素的更多相关文章

  1. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  2. HTML5 学习笔记(二)——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  3. HTML5初步——新的表单元素和属性

    HTML5初步--新的表单元素和属性 HTML5初步--新的表单元素和属性 <!DOCTYPE html> <html> <head> <meta chars ...

  4. Html5学习进阶四 表单元素和表单属性

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefo ...

  5. html5表单新增的元素与属性

    1.表单内元素的form属性 在html4中,表单内的从属元素必须书写在表单内部, 而在html5中,可以把他们书写在页面上任何地方, 然后为该元素指定一个form属性,属性值为该表单的id,这样就可 ...

  6. 【HTML5开发系列】表单元素

    <form> 创建一个HTML表单 属性: action 表示提交表单时浏览器应该把用户填写的数据发送到什么地方 method 用来指定表单数据发送到服务器的方式.允许值有get和post ...

  7. 了解HTML表单之form元素

    前面的话 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input& ...

  8. 开始使用HTML5和CSS3验证表单

    使用HTML5和CSS3验证表单 客户端验证是网页客户端程序最常用的功能之一,我们之前使用了各种各样的js库来进行表单的验证.HTML5其实早已为我们提供了表单验证的功能.至于为啥没有流行起来估计是兼 ...

  9. HTML5学习系列之表单与文件

    article元素 article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.它可以是一篇博客或报刊中的文章.一篇论坛帖子.一段用户评论或独立的插件,或者其他任何独立的内容 ...

随机推荐

  1. Android常用控件之ExpandableList的使用

    先来看下什么是ExpandableListView 跟列表有点像,这种是可以折叠的列表,下面来看下是如何在代码中实现 一.在布局文件中声明一个ExpandableListView <Linear ...

  2. swift菜鸟入门视频教程-03-字符串和字符

    本人自己录制的swift菜鸟入门,欢迎大家拍砖.有什么问题能够在这里留言. 主要内容: 字符串字面量 初始化空字符串 字符串可变性 字符串是值类型 使用字符 计算字符数量 连接字符串和字符 字符串插值 ...

  3. Delphi Excel FastReport

    unit Unit1; interface uses Printers,Windows, Messages, SysUtils, Variants, Classes, Graphics, Contro ...

  4. cocos android分析

    来自:http://xiebaochun.github.io/ cocos2d-x Android环境搭建 cocos2d-x环境搭建比較简单,可是小问题还是不少,我尽量都涵盖的全面一些. 下载软件  ...

  5. BootStrap 智能表单系列 九 表单图片上传的支持

    本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...

  6. iOS:原生二维码扫描

    做iOS的二维码扫描,有两个第三方库可以选择,ZBar和ZXing.今天要介绍的是iOS7.0后AVFoundation框架提供的原生二维码扫描. 首先需要添加AVFoundation.framewo ...

  7. tomcat 部署web项目异常

    项目部署到Tomcat报这样的异常:validateJarFile jar not loaded. See Servlet Spec 2.3, section 9.7.2. Offending cla ...

  8. 青蛙跳台阶问题——剑指offer

    题目:一只青蛙一次可以跳上1级台阶,也可以跳上2级台阶,求该青蛙跳上一个n级台阶总共有多少中跳法. http://www.nowcoder.com/books/coding-interviews?pa ...

  9. this function has none of deterministic, no sql,or reads sql data in its declaration and binary logging is enabled

      原址:http://blog.chinaunix.net/uid-20639775-id-3031821.html   This function has none of DETERMINISTI ...

  10. apache域名重定向301跳转 .htaccess的写法

    RewriteEngine on RewriteBase / RewriteCond %{HTTP_HOST} ^baidu.com$ [NC] RewriteRule ^(.*)$ http://w ...