HTML5 新的表单元素

HTML5 新的表单元素

先说一下新增了哪些:

HTML5 有以下新的表单元素:

<datalist>

<keygen>

<output>

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

接下来我们一个一个来介绍:

HTML5 <datalist> 元素

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

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

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<form action="demo-form.php" method="get">
<input list="phone" name="phone">
<datalist id="phone">
  <option value="huawei">
  <option value="oppo">
  <option value="vivo">
  <option value="iphone">
  <option value="sony">
</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>
<head> 
<meta charset="utf-8">  
</head>
<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>

属性                                值                                           描述

autofocus                   disabled            使 keygen 字段在页面加载时获得焦点。    

challenge                  challenge           如果使用,则将 keygen 的值设置为在提交时询问。    

disabled                     disabled                           禁用 keytag 字段。    

form                         formname           定义该 keygen 字段所属的一个或多个表单。    

keytype                         rsa                        定义 keytype。rsa 生成 RSA 密钥。    

name                       fieldname                   定义 keygen 元素的唯一名称。

                                                               name 属性用于在提交表单时搜集字段的值。

 HTML5 <output> 元素

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">  
</head>
<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>

new : HTML5 中的新属性。

属性                       值                               描述

for                   element_id      定义输出域相关的一个或多个元素。    

form                   form_id        定义输入字段所属的一个或多个表单。    

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


继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="demo-form.php" method="get"> <input list="phone" name="phone"> <datalist id="phone"> <option value="huawei"> <option value="oppo"> <option value="vivo"> <option value="iphone"> <option value="sony"> </datalist> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 9(更早IE版本),Safari不支持 datalist 标签。</p> </body> </html>
提交重置代码
高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

哈哈哈

不错,有新的效果

7年前    添加回复 0

我喜欢晴天

不是所有的浏览器都支持HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。

7年前    添加回复 0

女神的闺蜜爱上我

记住新元素就是学会HTML5了嘛

7年前    添加回复 0

末日的春天

直接在文本框中来个<select>。

7年前    添加回复 0

男神

好好看下,新出来的,花点心思了

7年前    添加回复 0

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~