Nouveaux élémen...SE CONNECTER

Nouveaux éléments de formulaire HTML5

Nouveaux éléments de formulaire HTML5

  • <datalist>

  • < ;

  • <output>

Remarque : Tous les navigateurs ne prennent pas en charge les nouveaux éléments de formulaire HTML5, mais vous pouvez utiliser les même si le navigateur ne prend pas en charge les attributs de formulaire et les affiche toujours comme des éléments de formulaire normaux. Élément


<datalist> L'élément

<datalist> . L'attribut

<datalist> spécifie que le formulaire ou le champ de saisie doit avoir une fonctionnalité 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> >

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

Exécutez le programme et essayez-le


<keygen> element

<keygen> de l'élément est de fournir un moyen fiable d'authentifier les utilisateurs. 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.

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

Mettez le programme dans votre éditeur et essayez d'exécuter le programme localement


<output> ;output> est utilisé pour différents types de sortie, tels que des calculs ou une sortie de script :

Exemple

affiche les résultats du calcul dans < ; élément de sortie> :

<!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>
Exécutez le programme et essayez-le

Nouvel élément de formulaire HTML5

Balises

     标签     描述

    

    <datalist>

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

Description


<datalist><🎜><input> définit une liste d'options. Utilisez cet élément en conjonction avec un élément d'entrée pour définir les valeurs possibles de l'entrée. < keygen><keygen> le champ Générateur de paires de clés du formulaire. < output><output> est un type de sortie différent, tel qu'une sortie de script. <🎜><🎜><🎜><🎜><🎜><🎜>section suivante
<!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>
soumettreRéinitialiser le code
chapitredidacticiel