HTML5 Tutoriel de base

HTML5 API

HTML5 Média

HTML5 Graphique

HTML5 Attributs du formulaire HTML5 Types d'entrée

HTML5 Éléments de formulaire

HTML5Il y a plusieurs éléments et attributs liés au formulaire.

HTML5 Nouveaux éléments de formulaire

HTML5 Il y a les nouveaux éléments de formulaire suivants :

<datalist>
<keygen>
<output>

Attention :Pas tous les navigateurs prennent en charge HTML5 Un nouvel élément de formulaire, mais vous pouvez les utiliser, même si le navigateur ne prend pas en charge les attributs de formulaire, ils peuvent toujours être affichés comme des éléments de formulaire conventionnels.

HTML5 L'élément <datalist>

L'élément <datalist> spécifie la liste des options du champ d'entrée.

L'attribut <datalist> spécifie que le champ de formulaire ou d'entrée doit posséder la fonction de complétion automatique. Lorsque l'utilisateur commence à saisir dans le champ de complétion automatique, le navigateur doit afficher les options remplies dans ce champ :

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

在线示例

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

示例

<!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>Attention :</strong>Internet Explorer　9（更早 IE 版本），Safari 不支持 datalist 标签。</p>
</body>
</html>

Voyons voir ‹/›

HTML5 <keygen> 元素

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

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

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

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

在线示例

带有keygen字段的表单：

示例

<!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>Attention :</strong>Internet Explorer 不支持 keygen 标签。</p>
</body>
</html>

Voyons voir ‹/›

HTML5 <output> 元素

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

在线示例

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

示例

<!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>Attention :</strong>　　Internet Explorer ne prend pas en charge le tag output.</p>
</body>
</html>

Voyons voir ‹/›

Html5中的智能表单

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Html5中的智能表单　oldtoolbag.com</title>
</head>
<body>
<form action="demo-form.php">
　　　　　　　　<fieldset>
　　　　　　　　　　　　<legend>Html5中的智能表单</legend>
　　　　　　　　　　　　<label for="email">
　　　　　　　　　　　　　　　　email：<input type="email" name="email" id="email"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="tel">
　　　　　　　　　　　　　　　　tel:<input type="tel" name="tel" id="tel"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="url">
　　　　　　　　　　　　　　　　url:<input type="url" name="" id="url"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="number">
　　　　　　　　　　　　　　　　number:<input type="number" name="" id="number" step="3"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="search">
　　　　　　　　　　　　　　　　search:<input type="search" name="" id="search"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="range">
　　　　　　　　　　　　　　　　range:<input type="range" name="" id="range" value="60" min="0" max="100"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="color">
　　　　　　　　　　　　　　　　color:<input type="color" name="" id="color"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="time">
　　　　　　　　　　　　　　　　time:<input type="time" name="" id="time"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="date">
　　　　　　　　　　　　　　　　date:<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="Soumettre"/>
　　　　　　　　</fieldset>
　　　　</form>
</body>
</html>

Voyons voir ‹/›

HTML5 Nouveaux éléments de formulaire

Balise	Description
<datalist>	Le tag <input> définit une liste d'options. Utilisez cet élément avec l'élément input pour définir les valeurs possibles de l'input.
<keygen>	Le tag <keygen> spécifie un champ générateur de paires de clés pour le formulaire.
<output>	Le tag <output> définit différents types de sorties, par exemple les sorties de scripts.

HTML5 Attributs du formulaire HTML5 Types d'entrée