程序员之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > html5 >

HTML5新表单元素_动力节点Java学院整理

  发布时间：2017-07-12 10:57:05   作者：mingforyou   我要评论
这篇文章主要为大家详细介绍了HTML5新表单元素，介绍了三种表单元素，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

HTML5 新的表单元素

HTML5 有以下新的表单元素:

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

HTML5 <datalist> 元素

<datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
使用 <input> 元素的列表属性与 <datalist> 元素绑定.

<!DOCTYPE html>
<html>
<body>

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p>

</body>
</html>

HTML5 <keygen> 元素

<keygen> 元素的作用是提供一种验证用户的可靠方法。

<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<!DOCTYPE html>
<html>
<body>

<form action="demo_keygen.php" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>

</body>
</html>

HTML5 <output> 元素

<output> 元素用于不同类型的输出，比如计算或脚本输出：

<!DOCTYPE html>
<html>
<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

<p><strong>注意:</strong>  Internet Explorer 不支持 output 标签。</p>

</body>
</html>

HTML5 新表单元素

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。

相关文章

  • 详解HTML5表单新增属性

    本文主要对HTML5表单新增属性进行详细介绍，并附上实例解析，简单易懂。需要的朋友一起来看下吧
    2016-12-21

  • HTML Form表单元素全面了解

    下面小编就为大家带来一篇HTML Form表单元素全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-26

  • html5表单及新增的改良元素详解

    下面小编就为大家带来一篇html5表单及新增的改良元素详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-07

  • HTML5新增的表单元素和属性实例解析

    这篇文章主要为大家介绍了HTML5新增的表单元素和属性,具有一定的参考价值！需要的朋友可以参考下
    2014-07-07

  • HTML5 的新的表单元素(datalist/keygen/output)使用介绍

    HTML5 拥有若干涉及表单的元素和属性，下面为大家介绍下新的表单元素datalist 元素、keygen 元素、output 元素以及它们的使用实例，感兴趣的朋友可以参考下哈，希望对大家
    2013-07-19

  • HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注

    在HTML5增强的元素中，最值得关注的就是表单元素;在HTML5中，表单已经做了重大的修整，一些以前需要通过JavaScript编码实现的功能现在无需编码就可轻松实现,感兴趣的朋友可
    2013-01-31

  • HTML标记语言——表单

    点击这里返回网页教学网　HTML教程　栏目． 上文：标记语言——引用 原文出处 chapter 5 表单 互动性一直是互联网的重点,让使用者与网站能够交换信息
    2008-10-17

  • HTML表单标记教程(2):

    本教程介绍FORM表单标记的各种属性在网页设计中的应用. <FORM>标记的NAME属性 基本语法 01 <Form name="Form＿name"> 02 ……
    2008-10-17

  • HTML表单标记教程(4):

    假设现在要在表单中添加这样一项内容：浏览所在的城市。这里不说全国的城市，只说省会以上的城市就有几十个。如果以上面讲过的单选按钮的形式，将这些城市全部罗列在网页上
    2008-10-17

  • 带有图片预览功能的上传表单的完整HTML

    带有图片预览功能的上传表单，完整的HTML代码如下所示 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=
    2008-10-17

最新评论

关注微信公众号

扫一扫
?


http://www.vxiaotou.com