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. <🎜><🎜><🎜><🎜><🎜><🎜>

Formation continue

nouveau fichier

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

soumettre Réinitialiser le code

Opération automatique

Nouveaux éléments de formulaire HTML5

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]