Nouveaux éléments de formulaire en HTML

HTML5 les nouveaux éléments de formulaire

HTML5 l’élément de formulaire <datalist>

L'élément <datalist> spécifie une liste d'options prédéfinies pour un élément <input>.

L'élément <datalist> est utilisé pour fournir une fonctionnalité « Saisie semi-automatique » sur les éléments <input>. Les  utilisateurs verront une liste déroulante d'options prédéfinie s’ils saisissent des données.

Utilisez attribut list de l'élément <input> pour le lier avec un élément <datalist>.

Exemple Un élément <input> avec des valeurs prédéfinies dans une <datalist> :

Exemple :     📋 Copier le code

<form action="">
<input list="browsers"><datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
 <br />  <input type="submit"></form>
            

HTML5 <keygen> élément

L'élément <keygen> vise à fournir un moyen sécurisé pour authentifier les utilisateurs.

La balise <keygen> spécifie un champ Générateur de paire de clés dans un formulaire.

Lorsque le formulaire est envoyé, les deux clés sont générées, une privée et une publique.

La clé privée est stockée localement, et la clé publique est envoyée au serveur. La clé publique pourrait être utilisée pour générer un certificat client pour l'authentification de l'utilisateur dans l'avenir.

Exemple Un formulaire avec un champ keygen :

Exemple :     📋 Copier le code

  <form action="#" method="get">
  Username: <input type="text" name="usr_name">
  Encryption: <keygen name="security">
  <input type="submit">
  </form>
            

HTML5 <output> élément

L'élément <output> représente le résultat d'un calcul (tel qu'un effectuée par un script).

Exemple Effectuer un calcul et afficher le résultat dans un élément <output> :

Exemple :     📋 Copier le code

  <form
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" name="a" value="0"> +
  <input type="number" name="b" value="0"> =
  <output name="x" for="a b"></output>
  </form>
            

HTML5 Nouveaux éléments de formulaire