087_html5表单元素

1. html5的新的表单元素:

1.1. html5拥有若干涉及表单的元素和属性。

1.2. 本章介绍以下新的表单元素:

datalist
keygen
output

2. datalist元素

2.1. datalist元素规定输入域的选项列表。

2.2. 列表是通过datalist内的option元素创建的。

2.3. 如需把datalist绑定到输入域, 请用输入域的list属性引用datalist的id。

2.4. 例子

2.4.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>datalist元素</title></head><body><form action="input_type_range.html" method="get">Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list"><option label="W3School" value="http://www.w3school.com.cn" /><option label="Google" value="http://www.google.com" /><option label="Microsoft" value="http://www.microsoft.com" /></datalist><input type="submit" /></form></body>
</html>

2.4.2. 效果图

3. keygen元素

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

3.2. keygen元素是密钥对生成器(key-pair generator)。当提交表单时, 会生成两个键, 一个是私钥, 一个公钥。

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

3.4. 目前, 浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

3.5. 例子

3.5.1. keygen.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>keygen元素</title></head><body><form action="Keygen.action" method="get">Username: <input type="text" name="usr_name" />Encryption: <keygen name="security" /><input type="submit" /></form></body>
</html>

3.5.2. 效果图

3.5.3. Keygen.java

package com.lywgames.mysessionlistener;import java.io.IOException;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class Keygen extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {Enumeration<String> enums = req.getParameterNames();while(enums.hasMoreElements()) {String name = enums.nextElement();System.out.println(name + ":" + req.getParameter(name));}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}

3.5.4. 2048(High Grade)请求结果

usr_name:zhangsan
security:MIICQDCCASgwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCwx6WRyZ+g8aqLEMC+s/XiGs132Q7e5fiZ0eW686d9U9rcv+aBMJePDKjQ5Cs/qYRxmfGY/fC99jPIwqz8QX0L3OourjDOpW8F+MGx0ipl4+5CA8kNFbTiL5pPEuNXXGv8BJjdfOlo797/n9nfNCCX5mtB7+gVVipuRn0JNk2OOiZAGg/YL16TdEGRcN42UvHh3HgimN6j1Vpw8OlOz1ICD+Vxh8EUPMmxu9Cr7oFYgNGPHYsxrdCEYOX+Hy19cTjNgtl/Y2zjYTtY5EeIfZ1O6K1sfLxM4q1Qzzmn41IW+0ebM9YLuY9u4EBGzQeCOgt0XIkpbuDlmGmEHDq8F38xAgMBAAEWADANBgkqhkiG9w0BAQQFAAOCAQEAQlqn30SSNWA5gkdqXPCA2Nv6yV2kbXX452TFceIW3iZbB/04BL1pQLc3FRsTOY70SPwB4KU8HHZMVGEzKgq0wEFuRge0X3iyGtMwUZUItrTp1LVDdKaDpg6pZMAfw8yDSXFTOnVertBJH3tXhYvGeSZlXMfB0SzB3bNTsRaImRwy9ICXHGLcTXiQzHlRQSBM8LxJKXFcrws1kxh3rSuHs7VzRWGYwrTTbD3CaMIPk4+fZW2+sdVsC6fggUioq7oQblZu17UN3Us+QtCaRk2RfMjO4mZ68fzW6KUYm4BjnzaLsr+ZJXTAbdOGRENqlDYPRLv2Dp/p6COELhTg+G/VFA==

3.5.5. 1024(Medium Grade)请求结果

usr_name:zhangsan
security:MIIBOjCBpDCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEA6hR4THvI/Yyhn65PN20u9S1NYD6IzhDcdR92g0EEIJhaDS0cebxNn4uvZ9/VO7ZISOOWl0CnHSLHwzoGNZQCMsNpsTzTm4eXyJBLTaE52e3P5OFv2Qm2epxk/BbDL6FCHZY0XNDep+RnGlf9QqOwldbr7V5hDB8t9PFjQKwvOgECAwEAARYAMA0GCSqGSIb3DQEBBAUAA4GBACTJmQKRGOaMjIlhoPmILAKqfq1+rltRbcFmu+phcP+O7KrjzRMuFb83aPR3rSliG3+/LsW4MQ9KpxIn1bP9D+Ado8b2PSReozq9/unTwGRQ7zEFUij9vADWLaA8FPDuXDrT6uONEnrWsW7AxWlB2/q4czQoyHq1d/Xr934SWM8B

4. output元素

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

4.2. 例子

4.2.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>output元素</title></head><body><p>使用output元素的简易计算器:</p><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></body>
</html>

4.2.2. 效果图

087_html5表单元素相关推荐

html5表单实例元素,HTML5新表单元素的图文实例-
这一篇介绍html5新增的表单元素和表单属性. 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何 ...
【2018-01-22】HTML-表单及表单元素
<body><form action="" method="post">& ...
5 select 选择的值_表单元素之选择类型
表单元素的选择类型可以分为三种: 单选多选下拉单选和复选框的属性值可以有两个:disabled(不可操作的) 和 checked. 下拉框的属性值可以是:selected(默认选中) .mult ...
css label 居中布局_HTMLCSS精华知识点——表单元素、BFC、两栏布局、居中总结等...
HTML&CSS精华知识点--第九节一.input表单元素一系列元素,主要用于收集用户数据 1.type属性表示输入框类型text:普通文本输入框 date,日期选择框,兼容性问题 sea ...
(总结1)HTML5中新增加的表单元素
HTML5中新增加了很多元素标签使用,在经过了近一星期多的学习之后现在进行一下总结,方便日后查阅: H5中的智能表单 1 <form action=""> 2 < ...
顶部对齐css表单,vertical-align 表单元素垂直对齐的解决方法
如下图所示: 于是上网查看了一些网站,发现这个问题是普遍存在的,如下图(FF3.5): 在很多网站涉及到表单的页面中,都存在这种表单元素与提示文字无法对齐的问题.于是打算研究一下这个问题.首先,搜索到 ...
给自己提个醒：关于document.getElementsByName无法获取非表单元素
document.getElementsByName自己一厢情愿以为可以获取所有元素,以前也碰到过,但是不长记性,还是记录下来比较好. document.getElementsByName只能获取表单 ...
HTML（三）：表单元素
表单元素概述表单(Form),用于收集用户信息.提交用户请求等处理过程 1.设计表单,并放入一些输入域 2.网站访问者在自己的计算机上填写上述输入域,并提交到服务器 ...
JS 表单和表单元素
JS:The Definitive Guide 例18-1,列举了所有的表单元素,并把表达的相关操作都呈现出来,非常的好!不愧为一本经典的书籍.例子非常恰当. <!DOCTYPE HTML> ...

087_html5表单元素

087_html5表单元素相关推荐

最新文章

热门文章