Éléments de formulaire HTML5


HTML5 comporte les nouveaux éléments de formulaire suivants :

  • <datalist>

  • <keygen>

  • <output>

Remarque :Tous les navigateurs ne prennent pas en charge les nouveaux éléments de formulaire HTML5, mais vous pouvez les utiliser, même si le Le navigateur ne prend pas en charge les attributs de formulaire et peut toujours être affiché en tant qu'éléments de formulaire normaux.

Élément HTML5 <datalist> L'élément

<datalist> L'attribut

<datalist> spécifie que le formulaire ou le champ de saisie doit avoir une fonction de saisie semi-automatique. Lorsque l'utilisateur commence à saisir un champ de saisie semi-automatique, le navigateur doit afficher les options renseignées dans ce champ :

Liez l'élément <datalist> à l'aide de l'attribut list de l'élément <input> >

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
	
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Élément HTML5 <keygen> Le but de l'élément

<keygen> La balise

<keygen> spécifie le champ générateur de paire de clés à utiliser dans le formulaire.

Lorsque le formulaire est soumis, deux clés seront générées, l'une est la clé privée et l'autre est la clé publique.

La clé privée est stockée sur le client, et la clé publique est envoyée au serveur. La clé publique peut être utilisée ultérieurement pour vérifier le certificat client de l'utilisateur.

Instance

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

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


L'élément HTML5 <output>

<output> est utilisé pour différents types de sortie, tels que la sortie de calcul ou de script :

Exemple

<!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>

<p><strong>注意:</strong>  Internet Explorer 不支持 output 标签。</p>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Nouveaux éléments de formulaire HTML5

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