html5中新增加的表单元素有哪些

html5中新增加了3个表单元素:1、datalist元素,用于为input设置下拉列表,里面的选项是预先定义好的,将作为用户的输入数据;2、keygen元素,可规定用于表单的密钥对生成器字段;3、output元素,用于将计算结果输出显示。

html5中新增加的表单元素有哪些

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

HTML5中新增了三个表单元素:datalist、keygen、output。

1、datalist元素

标签规定了 元素可能的选项列表。

立即学习“前端免费学习笔记(深入)”;

标签被用来在为 元素提供”自动完成”的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。

这里注意datalist元素要写id,与input表单元素的 list属性创建联系

登录后复制

例1:

在这里插入图片描述

在页面上显示如下:

在这里插入图片描述

例2:

在这里插入图片描述

在页面上显示如下:

在这里插入图片描述

假如想要输入的是网址,需要注意value值必须添加http://

例3

在这里插入图片描述

这里的datalist元素在火狐浏览器上是没有下拉列表的,要注意!

以及datalist的子元素option元素可以写成单标签的格式 :eg:

2、keygen元素

标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。

是HTML5中新增的元素,用来建立一个密钥生成器

当提交表单时,私钥存储在本地,公钥发送到服务器。主要作用是提供一种用户验证身份的方法

使用时注意不同浏览器支持程度不同;目前Internet Explorer 和 Safari暂不支持

因为涉及到服务器的一些知识,本节课我们近对该元素了解即可,和服务器相关的知识不在本套课程范围内。

keygen元素元素的属性:

name/form/autofocus/disabled

challenge属性:将 keygen 的值设置为在提交时询问。

keytype属性:定义密钥类型,如设置为rsa(一种密码的算法),则生成 RSA 密钥。

实例

 html5中新增加的表单元素有哪些

html5中新增加的表单元素有哪些

html5中新增加的表单元素有哪些

nbsp;html>无标题文档    

        掌握fieldset/legend元素的用法(和figure和figcaption很像,只不过是作用于表单)    

    

登录后复制

3、output元素

标签作为计算结果输出显示(比如执行脚本的输出)。

output标签语法格式

默认内容

登录后复制

说明:output标签中的内容为默认显示内容,它会随着相关元素的改变而变化。

output标签属性

for:定义输出域相关的一个或多个元素,以空格隔开。

form:定义输入字段所属的一个或多个表单,以空格隔开。

name:定义对象的唯一名称(表单提交时使用)。

实例

nbsp;html>        html中output标签详细介绍     

output标签演示:

    
加法计算器
    

登录后复制

1.gif

通过上边的实例,相信大家也学会了output标签的用法,将其改为减法、乘法、除法等计算器也是轻而易举的事,有兴趣的朋友可以试试哟!

【相关推荐:html视频教程、web前端】

以上就是html5中新增加的表单元素有哪些的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2932442.html

(0)
上一篇 2025年3月11日 20:20:57
下一篇 2025年2月24日 10:44:16

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • html5中元素由哪三部分组成

    html5中元素由开始和结束标签、内容、属性三部分组成,语法“内容”。标签名称不区分大小写,但属性的值需要区分大小写;且少部分HTML标签没有单独的结束标签,而是在开始标签中添加“/”来进行闭合。 本教程操作环境:windows7系统、HT…

    2025年3月11日
    200
  • html5的div一行可以放两个吗

    html5的div元素默认一行不可以放两个。div是一个块级元素,一个元素会独占一行,两个div默认无法在同一行显示;但可以通过给div元素添加“display:inline;”样式,将其转为行内元素,就可以实现多个div在同一行显示了。 …

    2025年3月11日
    200
  • controls在html5中表示什么

    在html5中,controls表示音频和视频的播放控件,是audio和video标签中的属性;该属性是一个布尔属性,用于规定浏览器为视频或音频提供播放控件,语法为“”或“”。 本文操作环境:Windows10系统、html5版、Dell …

    2025年3月11日
    200
  • html5默认字体大小是多少

    在html5中,默认字体大小是根据浏览器的不同来决定的,多数浏览器的默认字体大小为16px;可以利用style和“font-size”属性设置字体的大小,语法为“”。 本文操作环境:Windows10系统、html5版、Dell G3电脑。…

    2025年3月11日
    200
  • html5中列表和表格的区别是什么

    html5中列表和表格的区别:1、表格主要是用于显示数据的,而列表主要是用于给数据进行布局;2、表格是使用table标签配合tr、td、th等标签进行定义的,列表是利用li标签配合ol、ul等标签进行定义的。 本文操作环境:Windows1…

    2025年3月11日 编程技术
    200
  • html中哪个标签实现文本分段

    html中“”标签实现文本分段。p标签用于定义段落,在需要分段大换行时,对文本内容前加“”,文本内容后加“”即可实现文本分段效果;p元素是一个块级元素,会自动在其前后创建一些空白,浏览器会自动添加,也可以在样式表中规定。 本教程操作环境:w…

    2025年3月11日
    200
  • html5文档一定要有什么标签

    一定要有4个标签:1、“”,是一种标准通用标记语言的文档类型声明;2、“”,用于告知浏览器其自身是一个HTML文档;3、“”,包含文档的元数据;4、“”,用于包含访问者可以看到的内容。 本教程操作环境:windows7系统、HTML5版、D…

    2025年3月11日
    200
  • figure是html5的新增标签吗

    figure是新增标签。figure是html5新增的语义化标签,用于规定独立的流内容,比如图像、图表、照片等等;figure中的内容通常是与主内容相关的,同时元素的位置相对于主内容又是独立的,如果把它删除,不会对网页中的其它内容产生影响。…

    2025年3月11日
    200
  • html5标记分为哪三类

    html5标记的3种类型:1、块级元素,其display值为“block”,特点为能够设置宽高、边距,会自动换行;2、行内元素,其display值为“inline”,不会自动换行,无法设置宽高;3、行内块状元素,不会自动换行、能够设置宽高。…

    2025年3月11日
    200
  • HTML5中画布标签是什么

    HTML5中画布标签是“”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。 本教程操作环境…

    2025年3月11日 编程技术
    200

发表回复

登录后才能评论