Nouveaux éléments de formulaire HTML5

Ce chapitre présente les nouveaux éléments de formulaire suivants :

•datalist
•keygen
•output

Prise en charge du navigateur

Type d'entrée IE Firefox Opera Chrome Safari

datalist Non 9.5 Non

keygen 10.5 3.0 Non

sortie Non 9.5 Non Non

élément datalist L'élément
datalist spécifie une liste d'options pour le champ de saisie.
La liste est créée via l'élément option dans datalist.
Si vous devez lier la liste de données au champ de saisie, veuillez utiliser l'attribut list du champ de saisie pour référencer l'identifiant de la liste de données :
Le code est le suivant :

Page Web : <input type="url" list="url_list" name="link" />
<datalist id="url_list"> option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" /> ;
<option label=" Microsoft" value="http://www.microsoft.com" />
</datalist>

Conseil : L'élément option doit toujours définir l'attribut value.

élément keygen Le rôle de l'élément keygen est de fournir un moyen fiable d'authentifier l'utilisateur. L'élément keygen est un générateur de paires de clés. Lorsque le formulaire est soumis, deux clés sont générées, une clé privée et une 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. Actuellement, la prise en charge par les navigateurs de cet élément est suffisamment médiocre pour en faire une norme de sécurité utile.

Le code est le suivant :

<form action="demo_form.asp" method="get">
Nom d'utilisateur : <input type="text" name="usr_name" /> ;keygen name="sécurité" />
<input type="submit" />
</form>
élément de sortie

L'élément de sortie est utilisé pour différents types de sortie, tels que la sortie de calcul ou de script : Le code est comme suit :

Exemple :

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>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>
</body>
</html>

rrree

Formation continue

||

nouveau fichier

<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <p>浏览器版本：<input list="words"></p> <datalist id="words"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> <option value="Sogou"> <option value="Maxthon"> </datalist> </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]