>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 25973 个阅读者 刷新本主题
 * 贴子主题:  HTML5 表单元素 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-11 21:23:09     消息  查看  搜索  好友  邮件  复制  引用

  

HTML5  表单元素

HTML5 新的表单元素

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

HTML5 <datalist> 元素

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

     <datalist>  属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:

      使用 <input> 元素的列表属性与 <datalist> 元素绑定.

          点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小

范例

     <input> 元素使用<datalist>预定义值:

< input   list = " browsers " >

< datalist   id = " browsers " >
   < option   value = " Internet Explorer " >
   < option   value = " Firefox " >
   < option   value = " Chrome " >
   < option   value = " Opera " >
   < option   value = " Safari " >
</ datalist >

HTML5 <keygen> 元素

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

     <keygen>标签规定用于表单的密钥对生成器字段。

     当提交表单时,会生成两个键,一个是私钥,一个公钥。

     私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小

范例

     带有keygen字段的表单:

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

HTML5 <output> 元素

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

点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小

范例

     将计算结果显示在 <output> 元素:

< 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 >

HTML5 新表单元素

        
标签 描述
<datalist>   <input>标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
<keygen> <keygen> 标签规定用于表单的密钥对生成器字段。
<output> <output> 标签定义不同类型的输出,比如脚本的输出。






程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-28 18:48:16 重新编辑]
  Java面向对象编程-->面向对象开发方法概述之开发思想(上)
  JavaWeb开发-->使用过滤器
  JSP与Hibernate开发-->Java对象持久化技术概述
  Java网络编程-->用Spring整合CXF发布Web服务
  精通Spring-->Vue Router路由管理器
  Vue3开发-->虚拟DOM和render()函数
  最新的Vue面试题大全含源码级回答,吊打面试官系列
  web前端工程师面试题的知识考点盘总
  Vue2.0与Vue3.0主要区别总结
  animate.css动画样式类型库的用法
  CSS的style样式的三种用法
  vue-min-picker普通选择器,日期选择器,省市区选择器,适用...
  Vue. 入门篇
  jQuery 事件方法汇总
  CSS 网页布局
  CSS Border(边框)
  JavaScript Array(数组)对象
  JavaScript 严格模式(use strict)
  JavaScript 正则表达式
  JavaScript 语法大全
  Android 广播接收器(Broadcast Receivers)
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。