HTML5有一些新的表单元素:<datalist>、<keygen>、<output>。不是所有的浏览器都支持HTML5新的表单元素,但即使浏览器不支持该表单属性,仍然可以显示为常规的表单元素。

1  <datalist>元素

<datalist>元素规定输入域的选项列表。<datalist>属性规定form或input域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示的填写的选项。Internet Explorer 9之前的IE版本,Safari不支持<datalist>元素。

列表是通过datalist内的option元素创建的,如需把datalist绑定到输入域,请用输入域的list属性引用datalist的id。我们通过一个实例来了解<datalist>元素的用法,代码如下:

使用datalist的要点,需要为使用此list内容的input项增加list属性,list属性的值为datalist的id;option选项必须有value属性;lable属性的内容也会显示出来,给当前的选线起提示作用。我们可以在文本框内点击下拉时展开所有选项,也可以通过输入选项内容展示符合的内容。效果如图1和图2:

图1  datalist元素(未输入时)

图2  datalist元素(文本输入)

2  <keygen>元素

<keygen>元素的作用是提供一种验证用户的的可靠方法。<keygen>元素规定用于表单的密钥对生成器字段。当提交表单时,会生成两个键,一个是私钥,另一个是公钥。私钥(private key)存储于客户端,公钥(public key)则被发送到服务器,公钥可用于之后验证用户的客户端证书(client cerficate)。

这里我们通过一个form表单,讲解<keygen>的使用方法,最后通过表单提交到服务器,服务器可以获取到加密后的内容。代码如下:

上述代码展示了一个加密的表单展示,点击提交后,表单的数据和公钥都会提交到服务器,如图3所示:

图3  keygen元素

3  <output>元素

<output>元素用于不同类型的输出,比如计算或脚本输出。下面通过一道计算题来了解<output>元素标签,代码如下:

上述代码阐述了一道加法计算题,目的是将前两个<input>标签里的值相加,输出到<output>标签内。效果如图5.6所示:

图5.6  output元素

IT兄弟连 HTML5教程 HTML5表单 HTML5新增表单元素的更多相关文章

  1. 【SQL Server复制】数据库复制:修改表结构、新增表、新增存储过程 会被复制到订阅服务器?

    转自:https://www.cnblogs.com/happyday56/p/3849018.html 关键字:sql server复制 [SQL Server高可用性]数据库复制:修改表结构.新增 ...

  2. html5表单及新增的改良元素

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. IT兄弟连 HTML5教程 HTML5表单 小结及习题

    小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们 ...

  4. IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1

    HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1. 1  autocomplete属性 autocomplete属性规定form或inp ...

  5. 疯狂的表单-html5新增表单元素和属性

    疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...

  6. HTML5学习笔记五:html5表单

    表单是页面上非常重要的一块内容,用户可输入的大部分内容都是在表单元素中完成的,与后台的交互大多数也是通过点击表单中的按钮. 一.新增的元素和属性 1.新增属性: 1.1 form属性:页面中的任何元素 ...

  7. html5+css3 权威指南阅读笔记(三)---表单及其它新增和改良元素

    一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </f ...

  8. IT兄弟连 HTML5教程 HTML5的基本语法 了解Web

    HTML也是计算机编程语言,但由于功能简单易用,不涉及业务逻辑,算是编程语言中最简单的了.其实学习HTML这门语言,就是在学习一个个HTML标记的使用,标记的名称和使用不是自定义的,它的功能及用法是已 ...

  9. IT兄弟连 HTML5教程 HTML5的学习线路图 第二、三阶段

    第二阶段编写用户交互功能 通过第一阶段的学习虽说可以完成页面制作,但并不完美,不能算是合格的前端工程师,所以要继续学习如图1.13中的第二阶段内容.现在的Web页面都融入了大量的特效,并且多数需要与用 ...

  10. IT兄弟连 HTML5教程 HTML5和HTML的关系

    HTML5开发现在很火爆,是一门技术,更是一个概念.可以让我们的工作模式.交互模式以及对应用和游戏的体验有了翻天覆地的变化,很多人都知道HTML5这门技术,也常把HTML5读作H5(简称).其实一些外 ...

随机推荐

  1. Es6中箭头函数与普通函数的区别

    Es6中箭头函数与普通函数的区别? 普通function的声明在变量提升中是最高的,箭头函数没有函数提升 箭头函数没有属于自己的this,arguments 箭头函数不能作为构造函数,不能被new,没 ...

  2. SecureCRT安装包和破解脚本

    第一步下载 SecureCRT安装包和破解脚本 下载 http://pan.baidu.com/s/1c1D5Ala 破解脚本 securecrt_mac_crack.pl安装包scrt-7.3.7- ...

  3. kratos微服务框架学习笔记一(kratos-demo)

    目录 kratos微服务框架学习笔记一(kratos-demo) kratos本体 demo kratos微服务框架学习笔记一(kratos-demo) 今年大部分时间飘过去了,没怎么更博和githu ...

  4. uni-app实现图片和视频上传功能

    使用uni-app实现点击上传,既可以上传视频,有可以上传图片,图片预览,删除图片和视频功能,最终效果如下.uni-app里面没有提供同时上传视频和图片这个插件,只能靠自己手写,  1.页面布局 通过 ...

  5. SSM项目整合纪实

    一 前 言 本来是为了探究一些功能性问题,需要一套完整的项目架构,本以为SSM用过那么多了,轻松搭建不在话下,但是过程中还是遇到一些问题,踩到一些未曾料想的坑.博文以搭建极简架构为目的,附带一些关键阐 ...

  6. 百度大脑UNIT3.0详解之嵌入式对话理解技术

    相信很多人都体验过手机没有网时的焦虑,没有网什么也做不了.而机器人也会遇到这样的时刻,没有网或者网络环境不好的情况下,无法识别用户在说什么,也无法回复用户.在AIoT(AI+物联网)飞速普及的现在,智 ...

  7. Linux是如何启动的?

    参考资料: An introduction to the Linux boot and startup processes 这篇随笔,可以理解为是对这篇英文文章的翻译与个人理解.笔记的整合. 扩展阅读 ...

  8. 【数据库】SQLite3常用函数

    版权声明:本文为博主原创文章,转载请注明出处. https://www.cnblogs.com/YaoYing/ SQLite3常用函数 打开数据库 函数原型: int sqlite3_open(co ...

  9. 【重学Node.js 第5篇】部署项目到腾讯云服务器

    课程介绍看这里:https://www.cnblogs.com/zhangran/p/11963616.html 项目github地址:https://github.com/hellozhangran ...

  10. VisualStudio编译不生成xml、pdb文件的方法

    我们为了减少发布/Release时项目的体积,希望在编译时不生成xml注释文档(包括引用的其他类库),和pdb调试文件 用你喜欢的文本编辑器打开项目.csproj文件,找到PropertyGroup节 ...