HTML5 Grund教程

HTML5 API

HTML5 Medien

HTML5 Grafik

HTML5 Formularattribute HTML5 Input-Typen

HTML5 Formularelemente

HTML5haben mehrere Elemente und Attribute, die sich auf das Formular beziehen.

HTML5 Neue Formularelemente

HTML5 Es gibt folgende neue Formularelemente:

<datalist>
<keygen>
<output>

Achtung:Nicht alle Browser unterstützen HTML5 Ein neuer Formularelement, aber Sie können sie verwenden, selbst wenn der Browser die Formulareigenschaften nicht unterstützt, können sie als reguläre Formularelemente angezeigt werden.

HTML5 Das Element <datalist>

Das Element <datalist> definiert die Liste der Optionen für ein Eingabefeld.

Das Attribut <datalist> definiert, dass ein Formular- oder Input-Feld eine Autovervollständigungsfunktion haben sollte. Wenn der Benutzer mit der Eingabe in dem Autovervollständigungsfeld beginnt, sollte der Browser die verfügbaren Optionen im Feld anzeigen:

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

在线示例

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

Beispiel

<!DOCTYPE　html>
<html>
<head>　
<meta charset="utf-8">　
<title>基本教程(oldtoolbag.com)</title>　
</head>
<body>
　　　　
<form action="demo-form.php"　method="get">
<input　list="languages"　name="language">
<datalist　id="languages">
　　<option　value="C++">
　　<option　value="PHP">
　　<option　value="Golang">
　　<option　value="Python">
　　<option　value="Ruby">
</datalist>
<input　type="submit">
</form>
<p><strong>Achtung:</strong>　Internet Explorer　9（更早 IE 版本），Safari 不支持 datalist 标签。</p>
</body>
</html>

Testen Sie es heraus ‹/›

HTML5 <keygen> 元素

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

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

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

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

在线示例

带有keygen字段的表单：

Beispiel

<!DOCTYPE　html>
<html>
<head>　
<meta charset="utf-8">　
<title>基本教程(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo_form.php"　method="get">
　　用户名:　<input　type="text"　name="username">
　　加密:　<keygen　name="security_keygen">
　　<input　type="submit">
</form>
<p><strong>Achtung:</strong>　Internet　Explorer　不支持　keygen　标签。</p>
</body>
</html>

Testen Sie es heraus ‹/›

HTML5 <output> 元素

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

在线示例

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

Beispiel

<!DOCTYPE　html>
<html>
<head>　
<meta charset="utf-8">　
<title>基本教程(oldtoolbag.com)</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>
<p><strong>Achtung:</strong>Internet Explorer unterstützt das output-Tag nicht.</p>
</body>
</html>

Testen Sie es heraus ‹/›

Html5intelligente Formulare

Beispiel

!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Html5intelligente Formulare oldtoolbag.com</title>
</head>
<body>
<form action="demo-form.php">
　　　　　　　　<fieldset>
　　　　　　　　　　　　<legend>Html5intelligente Formulare</legend>
　　　　　　　　　　　　<label for="email">
　　　　　　　　　　　　　　　　E-Mail：<input type="email" name="email" id="email"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="tel">
　　　　　　　　　　　　　　　　Telefon:<input type="tel" name="tel" id="tel"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="url">
　　　　　　　　　　　　　　　　URL:<input type="url" name="" id="url"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="number">
　　　　　　　　　　　　　　　　Zahl:<input type="number" name="" id="number" step="3"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="search">
　　　　　　　　　　　　　　　　Suche:<input type="search" name="" id="search"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="range">
　　　　　　　　　　　　　　　　Bereich:<input type="range" name="" id="range" value="60" min="0" max="100"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="color">
　　　　　　　　　　　　　　　　Farbe:<input type="color" name="" id="color"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="time">
　　　　　　　　　　　　　　　　Zeit:<input type="time" name="" id="time"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="date">
　　　　　　　　　　　　　　　　Datum:<input type="date" name="" id="date"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="month">
　　　　　　　　　　　　　　　　month:<input type="month" name="" id="month"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="week">
　　　　　　　　　　　　　　　　week:<input type="week" name="" id="week"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<input type="submit" value="Absenden"/>
　　　　　　　　</fieldset>
　　　　</form>
</body>
</html>

Testen Sie es heraus ‹/›

HTML5 Neue Formularelemente

Tag	Beschreibung
<datalist>	Der <input>-Tag definiert eine Liste von Optionen. Verwenden Sie diesen Tag zusammen mit dem input-Element, um mögliche Werte für den input zu definieren.
<keygen>	Der <keygen>-Tag definiert ein Schlüsselpaar-Generator-Feld für das Formular.
<output>	Der <output>-Tag definiert verschiedene Arten von Ausgaben, z.B. die Ausgabe von Skripten.

HTML5 Formularattribute HTML5 Input-Typen