• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5新增常用的表单元素有哪些?附使用实例

HTML5新增常用的表单元素有哪些?附使用实例

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含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="微课江湖" value="http://" />
<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>

Input 类型:

HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

1.Input 类型- email

email 类型用于应该包含e-mail 地址的输入域。在提交表单时,会自动验证email 域的值。

2.Input 类型- url

url 类型用于应该包含URL 地址的输入域。在提交表单时,会自动验证url 域的值。

3.Input 类型- number

number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定:

4.Input 类型- range

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。

您还能够设定对所接受的数字的限定:

5.Input 类型- Date Pickers(数据检出器)

HTML5 拥有多个可供选取日期和时间的新输入类型:

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间(小时和分钟)

datetime - 选取时间、日、月、年(UTC 时间)

datetime-local - 选取时间、日、月、年(本地时间)

6.Input 类型- search

search 类型用于搜索域,比如站点搜索或Google 搜索。

search 域显示为常规的文本域。

<知识点>

<form>定义供用户输入的表单

<input>定义输入域

<textarea>定义文本域(一个多行的输入控件)

<label>定义一个控制的标签

<fieidset>定义域

<legend>定义域的标题

<select>定义一个选择列表

<optgroup>定义选项组

<option>定义下拉列表中的选项

<button>定义一个按钮

【相关文章】

HTML和HTML5的发展历史

html的基础元素,让你零基础学习HTML

以上就是HTML5新增常用的表单元素有哪些?附使用实例的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

相关文章

  • 2018-12-03HTML5实现眼睛移动效果的示例
  • 2018-12-03解析HTML的增强标记
  • 2018-12-03phonegap完成克隆和删除联系人功能的代码详解
  • 2018-12-03怎么看待 Adobe 停止移动版 Flash 播放器开发,投入更多的精力进行 HTML5 的开发?
  • 2018-12-03HTML5 Canvas组件绘制太极图案的图文代码详情
  • 2017-08-06使用canvas绘制超炫时钟
  • 2018-12-03用html5实现语音搜索框的方法_html5教程技巧
  • 2018-12-03HTML5-XMLHttpRequest Level 2概述详解
  • 2018-12-03HTML5 对各个标签的定义与规定:body的介绍_html5教程技巧
  • 2017-08-06HTML5页面音视频在微信和app下自动播放的实现方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 分享文字溢出隐藏实例
    • HTML5-Geolocation APIs的示例代码
    • html5与css3小应用
    • 什么是canvas离屏技术?canvas放大镜效果如何实现?
    • HTML5第一人称射击游戏实现的代码分享
    • CSS3 还缺少哪些必要的特性?
    • HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
    • HTML5学习笔记简明版(8):新增的全局属性
    • HTML 5离线存储之Web SQL
    • HTML5 canvas画布详解(一)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有