Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

HTML5 新表单元素

HTML5 新的表单元素

  • <datalist>

  • <keygen>

  • <output>

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

<datalist> 元素

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

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

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" method="get">
    <input list="fruits" name="fruit">
    <datalist id="fruits">
        <option value="苹果">
        <option value="香蕉">
        <option value="柚子">
        <option value="橙子">
        <option value="梨子">
    </datalist>
    <input type="submit">
</form>
</body>
</html>

运行程序尝试一下

<keygen> 元素

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

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

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

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" method="get">
    用户名: <input type="text" name="usr_name">
    加密: <keygen name="security">
    <input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>
</body>
</html>

把程序放到你的编辑器，本地运行程序尝试一下

 <output> 元素

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

实例

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</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>
</body>
</html>

运行程序尝试一下

HTML5 新表单元素

     标签     描述

    

    <datalist>

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



Weiter lernen
||
<!DOCTYPE html> <html> <head>  <meta charset="UTF-8"> <title>php中文网(php.cn)</title>  </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> </body> </html>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492534 spielt ab